Comment puis-je travailler avec ng-file-upload dans une application (new to angularjs)?

Question

J'essayais de télécharger un fichier pendant que je le sélectionnais simultanément, je travaille avec l'application angularjs où j'ai besoin de parcourir un fichier avec le télécharger en même temps dans un tableau lignes.

<form> 
     <input type="text" class="browse-form"placeholder=" Click browse to load documents " required> 
     <button ngf-select="vm.uploadFiles($files)" mutiple accept=".csv,.pdf" class="browse-btn">Browse</button> 
     </form> 
     <p style="margin-top: -30px;"> Note:Supported file formats are word,excel and pdf only</p> 
     <table class="table"> 
     <tr> 
     <thead style="background:#fff;font-size: 13px;font-weight:bold;"> 
     <th>DOCUMENT NAME</th> 
     <th>SIZE</th> 
     <th>VERSION</th> 
     <th>DATE UPLOADED</th> 
     <th>UPLOADED BY</th> 
     <th>ACTION</th> 
     </thead></tr> 
     <tr><td ng-repeat="uploading in files" style="font:smaller">{{uploading.name}} 
     <span class="progress" ng-show="uploading.progress >=0"> 
     <div style="width:{{uploading.progress}}" ng-bind="uploading.progress + '%'"> 
     </div> 
     </span> 
      </td> 
     </table> 

Mon contrôleur

(function() { 
'use strict'; 

angular 
.module('app',['ngFileUpload']) 
.controller('ManageController', ManageController); 

ManageController.$inject=['$http','$scope','localStorageService','workspaceService','Upload','$timeout']; 

function ManageController($http,$scope,localStorageService,workspaceService,Upload,$timeout) { 
    var vm = this; 
    //uploading 
    vm.uploadFiles=function(files){ 
    vm.files=files; 
angular.forEach(files,function(file){ 
    file.upload=Upload.upload({ 
     url:' ', 
     data:{file:file} 
    }); 
    file.upload.then(function(response){ 
     $timeout(function(){ 
      file.result=response.data; 
     }); 
    }); 

    }); 
    } 
    } 
    })(); 

J'ai inclus à la fois les scripts de ng-file-upload-shim.min.js et ng-fichier-upload.js dans ma principale index.html comme script ..... Je reçois toujours un écran vide complet dans mon application en indiquant que ngFileUpload est mal orthographié.

Answer 1

En html ajoutez simplement le code ci-dessous ..

<button class="btn btn-danger active" ngf-select="upload($file)">Upload</button> 

et dans le contrôleur u peut faire comme ça ..

$scope.upload = function (file) { 
    if(file){ 
    try{   
    var token = 'token if required' ; // optional field 
    Upload.upload({ 
     url: 'enter url to hit api', 
     data: {file: file, 'username': $scope.username}, 
     headers: {'Authorization': 'JWT ' + token}, 
    }).then(function onSuccess(response) { 
     console.log("success"); 
    }).catch(function onError(response) { 
     console.log("error",response); 
    }); 
    }catch(error){ 
    console.log(error.message); 
    } 
} 

};

Il suffit de l'essayer. cela a fonctionné pour moi .. :)