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
{
    border:1px solid rgb(150,150,150);
    width:300px;
    height:300px;
}

.drop-box
{
    width:300px;
    height:300px;
    border:1px solid rgb(230,230,230);
    border-radius:5px;
    
}

JavaScript

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

var rootTree = {
    files = [],
    directories = []
    

};
  
var direct = {
    var name;
    var path;
    var files = [];
    var directories = [];
}

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(keys);
              fitInside(file);
                  
          }
      }

};                     
                 
});

function fitInside(object)
{
    
    for(var t in rootTree.files)
    {
        
    }
}