JSFiddle - React, Tailwind, and code Playground

by xBrisa

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script>
<div ng-controller="appController">
 {{ola}}
<div class="form-group">

      <!-- Select Files -->
			<label for="fileinput" class="col-sm-3 control-label">Files</label><br>
			  <div class="col-sm-12">
				<input type="file"  ngf-select="mostrar($files)" ng-model="fotos" ng-change="mostrar($file)"  multiple name="logos" multiple="multiple" class="form-control"  placeholder="Files" />
			   </div>
         <img  ng-repeat="s in fotos track by $index" style="width:150px" ngf-src="s"/>
		</div>
    
   <!-- Upload Files -->
    <input type="button" class="btn btn-primary"  ng-click="uploadFiles(fotos)"
						 id="file" accept="image/*" ngf-max-size="4MB" value="Upload fotos"/>

</div>

JavaScript

angular
	.module("myApp",['ngFileUpload']);
  
  angular
  	.module("myApp")
    .controller("appController",appController);
    
    appController.$inject = ['$scope','Upload'];
    
    function appController($scope,Upload){
    	$scope.ola = "Welcome";      
      $scope.fotos = [];   
      
      //Show file name and index
      $scope.mostrar = function(files){
      	angular.forEach(files, function(file,index){
        	alert("file: "+file.name+" index: "+index);
        })
      }
      
      //upload problem, don't send files in ascending order like 1 2 3 4 5 ...
      $scope.uploadFiles = function (files) {
         $scope.fotos = files;
        angular.forEach(files, function(file,count) {
        	Upload.upload({
                url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                data: {
                    files: file
                }
            }).then(function (response) {                
                alert("File name: "+file.name+'\n count:'+count);
                console.log("File name: "+file.name+'\n count:'+count);
            });
        })        
  		}
}