Bonjour,
Je souhaite d'envoyer à mon serveur localhost une image séléctionnée depuis l'utilisateur en utilisant AngularJS.
Ce que je fais
-Code HTML:
<form role="form" enctype="multipart/form-data" name="myForm" ng-submit="uploadfile()">
<label class="control-label">Image:</label>
<input type="file" class="form-control " file-model="Image" >
<button type="submit"> save</button>
</form>
-Code AngularJS;
var app = angular.module('Mainapp', ['ngRoute','file-model','ui.bootstrap']);
app.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
app.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
//fd.append('file', file);
angular.forEach(file, function(file) {
fd.append('file', file);
});
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
console.log("done post");
})
.error(function(data){
console.log("failed to post "+data); //
});
}
}]);
//upload file
$scope.uploadfile = function() {
var file = $scope.Image;
console.dir(file);
var uploadUrl ="http://localhost:8000/auditconfig/images/"+file.name; // la récupération d'une image existe dans ce dossier s'affiche sur l'écran sans probléme
fileUpload.uploadFileToUrl(file, uploadUrl); // affiche toujours "failed to post"
};
Ce que j'obtiens
Aprés un test de la fonction "uploadfile()", j'obtiens les résultats suivants:
//**console.dir(file);
*File:
lastModified:1490260924299
lastModifiedDate; Thu Mar 23 2017 10:22:04 GMT+0100 (Paris, Madrid)
name:"01.png"
size:1637
type:"image/png"
webkitRelativePath:""
__proto__:File
//**Erreur d'upload**
Failed to load resource: the server responded with a status of 500 (Internal Server Error) :8099/AuditConf/images/01.png
failed to post [object Object]
//** Résultat de l'accés à l'adresse: http://localhost:8000/auditconfig/images/
Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
Wed Mar 29 01:03:17 CEST 2017
There was an unexpected error (type=Not Found, status=404).
Not Found
Comment je peux régler ce probléme ?
Merci de m'aider pour trouver la bonne solution,