JSFiddle - React, Tailwind, and code Playground

by danialfarid

HTML

<script src="http://angular-file-upload.appspot.com/js/angular-file-upload.js"></script>
<div ng-app="fileUpload" ng-controller="MyCtrl">Username
    <input type="text" ng-model="username"></br></br>
    <input type="checkbox" ng-model="multiple">upload multiple file</br></br>
    watching model:
    <div class="button" ng-file-select ng-model="files" ng-multiple="multiple">Select File</div>
    on file change:
    <div class="button" ng-file-select ng-file-change="upload($files)" ng-multiple="multiple">Select File</div>
    Drop File:
    <div ng-file-drop ng-file-select ng-model="files" class="drop-box" 
        drag-over-class="dragover" ng-multiple="true" allow-dir="true"
        accept="image/*,application/pdf">Drop pdfs or images here or click to upload</div>
    <div ng-no-file-drop>File Drag/Drop is not supported for this browser</div>
    <ul>
        <li ng-repeat="f in files" style="font:smaller">{{f.name}}</li>
    </ul>
</div>
</div>

CSS

.button {
    -moz-appearance: button;
    /* Firefox */
    -webkit-appearance: button;
    /* Safari and Chrome */
    padding: 10px;
    margin: 10px;
    width: 70px;
}
.drop-box {
    background: #F8F8F8;
    border: 5px dashed #DDD;
    width: 200px;
    height: 65px;
    text-align: center;
    padding-top: 25px;
    margin: 10px;
}
.dragover {
    border: 5px dashed blue;
}

JavaScript

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

app.controller('MyCtrl', ['$scope', '$upload', function ($scope, $upload) {
    $scope.$watch('files', function () {
        $scope.upload($scope.files);
    });

    $scope.upload = function (files) {
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                $upload.upload({
                    url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                    fields: {
                        'username': $scope.username
                    },
                    file: file
                }).progress(function (evt) {
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    console.log('progress: ' + progressPercentage + '% ' +
                                evt.config.file.name);
                }).success(function (data, status, headers, config) {
                    console.log('file ' + config.file.name + 'uploaded. Response: ' +
                                JSON.stringify(data));
                });
            }
        }
    };
}]);