2017-04-06 5 views
0

私は同時にファイルをアップロードしようとしていましたが、同時にファイルをブラウズして同時にテーブルの行にアップロードする必要があるangularjsアプリケーションで作業しています。私はのように私のメインのindex.htmlにNGファイルアップロード-shim.min.jsとNG-ファイルupload.jsのスクリプトの両方が含まれているアプリケーションでng-file-uploadを使用するにはどうしたらいいですか?

<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> 

私のコントローラ

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

    }); 
    } 
    } 
    })(); 

スクリプト..... まだ、私のアプリケーションで、完全な空白の画面が表示されて、ngFileUploadが間違っています。 HTMLで

答えて

1

だけ次のコードを追加..

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

コントローラでUは次のように行うことができ..

$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); 
    } 
} 

を}。

ただ試してみてください。 それは私のために働いた.. :)

+0

ありがとう.. :) @ yogesh mhetre – HKI345

関連する問題