JSFiddle - React, Tailwind, and code Playground

by chikunova_nata

HTML

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example106-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
  <script src="script.js"></script>



</head>

<body ng-app="httpExample">
  <div ng-controller="FetchController">
    <p>FILE:
      <input type="file" id="file" ng-file-select="onFileSelect($files)" />
    </p>
    <p>URL:
      <input type="text" ng-model="url" size="80" aria-label="URL" />
    </p>
    <p>
      <button id="fetchbtn" ng-click="fetch()">send request</button>
    </p>
    <p>http status code: <pre>{{status}}</pre></p>
    <p>http response data: <pre>{{data}}</pre></p>
  </div>
</body>

</html>

JavaScript

(function(angular) {
  'use strict';
  var fileReader = function($q, $log) {

    var onLoad = function(reader, deferred, scope) {
      return function() {
        scope.$apply(function() {
          deferred.resolve(reader.result);
        });
      };
    };

    var onError = function(reader, deferred, scope) {
      return function() {
        scope.$apply(function() {
          deferred.reject(reader.result);
        });
      };
    };

    var onProgress = function(reader, scope) {
      return function(event) {
        scope.$broadcast("fileProgress", {
          total: event.total,
          loaded: event.loaded
        });
      };
    };

    var getReader = function(deferred, scope) {
      var reader = new FileReader();
      reader.onload = onLoad(reader, deferred, scope);
      reader.onerror = onError(reader, deferred, scope);
      reader.onprogress = onProgress(reader, scope);
      return reader;
    };

    var readAsDataURL = function(file, scope) {
      var deferred = $q.defer();

      var reader = getReader(deferred, scope);
      reader.readAsDataURL(file);

      return deferred.promise;
    };

    var readAsArrayBuffer = function(file, scope) {
      var deferred = $q.defer();

      var reader = getReader(deferred, scope);
      reader.readAsArrayBuffer(file);

      return deferred.promise;
    };

    return {
      readAsDataUrl: readAsDataURL,
      readAsArrayBuffer: readAsArrayBuffer
    };
  };

  var app = angular.module('httpExample', [])
    .controller('FetchController', ['$scope', '$http', '$templateCache', 'fileReader',
      function($scope, $http, $templateCache, $fileReader) {
        $scope.url = '';
        var byteArray = [];

        $scope.getFile = function() {
          $fileReader.readAsArrayBuffer($scope.file, $scope)
            .then(function(result) {
              byteArray = result;
              console.log(byteArray)
            });
        };

        $scope.fetch = function() {
          $scope.code...