JSFiddle - React, Tailwind, and code Playground

by Prerak Sola

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload-all.min.js"></script>
<div ng-app="TestApp" ng-controller="FileUploatCtrl">
    <button type="file" ngf-select="uploadFiles($file, $invalidFiles)" accept="image/*"> Select File</button>
    <br/>
    <br/> Original File size:
    <div style="font:smaller">{{f.size}}
        <span class="progress" ng-show="f.progress >= 0">
          <div style="width:{{f.progress}}%"  
               ng-bind="f.progress + '%'"></div>
      </span>
        <div>
            Resized File size: {{newFile.size}}
        </div>
    </div>
    {{errorMsg}}
</div>

JavaScript

var app = angular.module('TestApp', ['ngFileUpload']);

app.controller("FileUploatCtrl", function($scope, Upload, $timeout) {
    $scope.uploadFiles = function(file, errFiles) {
        $scope.f = file;
        $scope.errFile = errFiles && errFiles[0];
        if (file) {
            var resizeOptions = {
                width: 1170
            };
            Upload.resize(file, resizeOptions).then(function(resizedFile) {
                $scope.newFile = resizedFile;
                console.log(resizedFile);
                console.log($scope.f);

                file.upload = Upload.upload({
                    url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                    data: {
                        file: $scope.f,
                        fileor: resizedFile
                    }
                });

                file.upload.then(function(response) {
                    $timeout(function() {
                        file.result = response.data;
                    });
                }, function(response) {
                    if (response.status > 0)
                        $scope.errorMsg = response.status + ': ' + response.data;
                }, function(evt) {
                    file.progress = Math.min(100, parseInt(100.0 *
                        evt.loaded / evt.total));
                });
            });
        }
    }
})