Come caricare un file con AngularJS?

Question

Sto tentando di caricare un file con AngularJS. Questo è il mio codice:

HTML

<input type="file" file-model="myFile"/> 
<button ng-click="uploadFile()">upload me</button> 

JavaScript

$scope.uploadFile = function(){ 
    var file = $scope.myFile; 
    var uploadUrl = "http://admin.localhost/images/patanjali/"; 
    VariantService.uploadFileToUrl(file, uploadUrl); 
}; 

VariantService.uploadFileToUrl = function(file, uploadUrl){ 
    var fd = new FormData(); 
    fd.append('file', file); 
    $http.post(uploadUrl, fd, { 
     transformRequest: angular.identity, 
     headers: {'Content-Type': undefined} 
    }) 
    .success(function(){ 
     alert ('success'); 
    }) 
    .error(function(){ 
    }); 
} 

Anche se posso vedere la ('successo') allarme nel mio servizio, il file non è il risparmio in la posizione fornita nel controller.

Qualcuno può aiutarmi? Che cosa manca?

Answer 1

Sembra che si sta utilizzando code from this jfiddle per la vostra applicazione:

myApp.service('fileUpload', ['$http', function ($http) { 
    this.uploadFileToUrl = function(file, uploadUrl){ 
     var fd = new FormData(); 
     fd.append('file', file); 
     $http.post(uploadUrl, fd, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }) 
     .success(function(){ 
     }) 
     .error(function(){ 
     }); 
    } 
}]); 

Mentre configurato correttamente, questo è solo per la pubblicazione di dati dal lato client; anche il server deve essere configurato per accettare/salvare i dati. Il modo in cui lo fai dipende dal tuo stack tecnologico di back-end.

Answer 2

È possibile utilizzare i moduli AngularJs per il file uploader. I moduli sono molto utili e molto confortevoli.

1) https://github.com/nervgh/angular-file-upload

2) https://github.com/danialfarid/ng-file-upload

Answer 3

ho avuto lo stesso problema. Ho provato a seguire il codice e il mio problema è stato risolto.

var req = { 
    method: 'POST', 
    url: url, 
    headers: { 
     'Content-Type': "application/json", 
    }, 
    data: data, 
    transformRequest: function(data, headersGetter) { 
     var formData = new FormData(); 
     angular.forEach(data, function(value, key) { 
      formData.append(key, value); 
     }); 
     var headers = headersGetter(); 
     delete headers['Content-Type']; 
     return formData; 
    } 
} 

$http(req) 
    .success(function(response) { 
     $scope.Models = response; 
    }) 
    .error(function(data, status, headers, config) { 

     // called asynchronously if an error occurs 
     // or server returns response with an error status. 
     alert(data); 
    }); 

Answer 4

$scope.setFiles = function (element) { 
 
    $scope.$apply(function (scope) { 
 
     $scope.files = []; 
 
     for (var i = 0; i < element.files.length; i++) { 
 
      scope.files.push(element.files[i]) 
 
     } 
 
    }); 
 
}; 
 

 
$scope.uploadFile = function() { 
 
    var fd = new FormData(); 
 

 
    for (var i in $scope.files) { 
 
     fd.append('file', $scope.files[i]) 
 
    } 
 

 
    $http.post('http://admin.localhost/images/patanjali', fd, { 
 
     transformRequest: angular.identity, 
 
     headers: { 
 
      'Content-Type': undefined 
 
     } 
 
    }) 
 
    .then(function successCallback(response) { 
 
     
 
    }, function errorCallback(response) { 
 
     
 
    }); 
 
};

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js'></script> 
 
<input type="file" valid-file ng-model-instant id="fileToUpload" onchange="angular.element(this).scope().setFiles(this)" /> 
 
<button ng-click="uploadFile()">Upload me</button>