JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="http://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
<div class="fileUpload" ng-app="uploader" ng-controller="upContrl">
    <div ngf-drop  ng-model="files" class="drop-box" ngf-drag-over-class="dragover" ngf-allow-dirs="true" ngf-multiple="true" >
        drop files
    </div>
    <div ngf-no-file-drop>drop is not supported</div>
  
</div>

CSS

.dragover
{
    background-color:pink;
    width:300px;
    height:300px;  
}
.drop-box
{
    width:300px;
    height:300px;
    background-color:rgb(240,240,240);
}

JavaScript

var myApp = angular.module('uploader',['ngFileUpload']);


myApp.controller('upContrl',function($scope){
                 $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];
              
              var keys= [];
              
              for(var key in file)
              {
                  keys.push(key);
                  
              }
              alert(file.path);
              alert(file.name);
              alert(keys);
              
                  
          }  
          
          
      }

};                     
                 
});