JSFiddle - React, Tailwind, and code Playground

by danialfarid

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
<body ng-app="fileUpload" ng-controller="MyCtrl">
    <form name="myForm">
        <div ng-click="show = !show">show</div>{{picFile.name}} {{username}}
        <fieldset ng-if="show">{{picFile.name}} {{username}}
            <legend>Upload on form submit</legend>Username:
            <input type="text" name="userName" ng-model="username" size="31" required>
            <br>Photo:
            <input type="file" ngf-select ng-model="picFile" name="file" accept="image/*" ngf-max-size="2MB" required>
            <br>Parent: Username:
            <input type="text" name="userName" ng-model="$parent.username" size="31" required>
            <br>Photo:
            <input type="file" ngf-select ng-model="$parent.picFile" name="file" accept="image/*" ngf-max-size="2MB" required>
        </fieldset>
        <br>
    </form>
</body>

CSS

.thumb {
    width: 24px;
    height: 24px;
    float: none;
    position: relative;
    top: 7px;
}
form .progress {
    line-height: 15px;
}
}
.progress {
    display: inline-block;
    width: 100px;
    border: 3px groove #CCC;
}
.progress div {
    font-size: smaller;
    background: orange;
    width: 0;
}

JavaScript

//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.uploadPic = function (file) {
        file.upload = Upload.upload({
            url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
            method: 'POST',
            headers: {
                'my-header': 'my-header-value'
            },
            fields: {
                username: $scope.username
            },
            file: file,
            fileFormDataName: 'myFile'
        });

        file.upload.then(function (response) {
            $timeout(function () {
                file.result = response.data;
            });
        }, function (response) {
            if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data;
        });

        file.upload.progress(function (evt) {
            // Math.min is to fix IE which reports 200% sometimes
            file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });
    }
}]);