JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="http://wix.github.io/angular-tree-control/angular-tree-control.js"></script>
<link rel="stylesheet" href="http://wix.github.io/angular-tree-control/css/tree-control.css">
<link rel="stylesheet" href="http://wix.github.io/angular-tree-control/css/tree-control-attribute.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/5.0.9/ng-file-upload.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/5.0.9/ng-file-upload-shim.min.js"></script>
           
    <div class="treeContainer" ng-app="myApp" ng-controller="c">
                    <div class="treeWrapper">
                          <treecontrol class="tree-classic" tree-model="treedata"  options = "opts" on-selection="showSelected(node)">
                                            

                              <span >{{node.name}}</span>               

                              
                              
                                <div class="deleteDirectoryButtonContainer" ng-hide="node.isDirectory">
                                        <button class="deleteDirectoryButton" ng-click="deleteNode(node)">X</button> 
                                </div>
                                                                        
                              
                              
                              
                                <div class="addFileButtonContainer" ng-show="node.isDirectory" ng-click="addNewItem(node);" >
                                    +     </div>
        
                            </treecontrol>
                    
        </div>
        
        <div class="addNodeMenuContainer">
                    
                            <div class="newNodeContainer" ng-show="addItem">
                                 
                                            <div...

JavaScript

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


mod.controller('c',function($scope){

    $scope.treedata = [{name : 'root', children : [], isDirectory:true}];



    $scope.mainFile = {name : '' , path : ''};

    
    var requestObject = {name : 'root', children:[], isDirectory : true, parent : ''};
    
    
    
    var longTree = false;
    var filesFound = false;
    
    $scope.submit = function(elements,searchObj)
    {
        longTree = false;
        $scope.checkDepth($scope.treedata[0]);
        if(longTree)
        {
            alert('tree too long ' + maxDepth);
            return;
        }
        else
        {
            filesFound = false;
            
            if(!$scope.treedata[0].children.length)
            {
                alert('You must upload files before continuing');
                return;
            }
            else
            {
                
                $scope.checkFilesExists($scope.treedata[0]);
                
                $scope.buildTreeStructure($scope.treedata[0], requestObject);
                
                console.log(requestObject);
                
                //UNCOMMENT ONCE DONE
               /* 
                if(filesFound)
                {
                    alert('files have been found');
                    //proceed to build tree
                    
                    $scope.buildTreeStructure($scope.treedata[0],requestObject);
                    
                    console.log(requestObject);
                }
                else
                {
                    alert('No files have been added to the directory tree');
                    return;
                }
                
             */   
            }
        }
    };
    
    
    var maxDepth = 4;
    
    
    $scope.checkDepth = function(data){
        //assumes that the root folder has children
        
        if(maxDepth <0)
        {
            alert('nesting is up to zero : '...