I have the below request in python
import requests, json, io
cookie = {}
payload = {"Name":"abc"}
url = "/test"
file = "out/test.json"
fi = {'file': ('file', open(file) )}
r = requests.post("http://192.168.1.1:8080" + url, data=payload, files=fi, cookies=cookie)
print(r.text)
which send a file, and form fields to the backend. How can I do the same (sending file + form fields) with Angular $http. Currently, I do like this, but not sure how to send the file too.
var payload = {"Name":"abc"};
$http.post('/test', payload)
.success(function (res) {
//success
});
This question is related to
javascript
angularjs
You can also upload using HTML5. You can use this AJAX uploader.
The JS code is basically:
$scope.doPhotoUpload = function () {
// ..
var myUploader = new uploader(document.getElementById('file_upload_element_id'), options);
myUploader.send();
// ..
}
Which reads from an HTML input element
<input id="file_upload_element_id" type="file" onchange="angular.element(this).scope().doPhotoUpload()">
In my solution, i have
$scope.uploadVideo = function(){
var uploadUrl = "/api/uploadEvent";
//obj with data, that can be one input or form
file = $scope.video;
var fd = new FormData();
//check file form on being
for (var obj in file) {
if (file[obj] || file[obj] == 0) {
fd.append(obj, file[obj]);
}
}
//open XHR request
var xhr = new XMLHttpRequest();
// $apply to rendering progress bar for any chunking update
xhr.upload.onprogress = function(event) {
$scope.uploadStatus = {
loaded: event.loaded,
total: event.total
};
$scope.$apply();
};
xhr.onload = xhr.onerror = function(e) {
if (this.status == 200 || this.status == 201) {
//sucess
$scope.uploadStatus = {
loaded: 0,
total: 0
};
//this is for my solution
$scope.video = {};
$scope.vm.model.push(JSON.parse(e.currentTarget.response));
$scope.$apply();
} else {
//on else status
}
};
xhr.open("POST", uploadUrl, true);
//token for upload, thit for my solution
xhr.setRequestHeader("Authorization", "JWT " + window.localStorage.token);
//send
xhr.send(fd);
};
}
I was unable to get Pavel's answer working as in when posting to a Web.Api application.
The issue appears to be with the deleting of the headers.
headersGetter();
delete headers['Content-Type'];
In order to ensure the browsers was allowed to default the Content-Type along with the boundary parameter, I needed to set the Content-Type to undefined. Using Pavel's example the boundary was never being set resulting in a 400 HTTP exception.
The key was to remove the code deleting the headers shown above and to set the headers content type to null manually. Thus allowing the browser to set the properties.
headers: {'Content-Type': undefined}
Here is a full example.
$scope.Submit = form => {
$http({
method: 'POST',
url: 'api/FileTest',
headers: {'Content-Type': undefined},
data: {
FullName: $scope.FullName,
Email: $scope.Email,
File1: $scope.file
},
transformRequest: function (data, headersGetter) {
var formData = new FormData();
angular.forEach(data, function (value, key) {
formData.append(key, value);
});
return formData;
}
})
.success(function (data) {
})
.error(function (data, status) {
});
return false;
}
I had similar problem when had to upload file and send user token info at the same time. transformRequest
along with forming FormData
helped:
$http({
method: 'POST',
url: '/upload-file',
headers: {
'Content-Type': 'multipart/form-data'
},
data: {
email: Utils.getUserInfo().email,
token: Utils.getUserInfo().token,
upload: $scope.file
},
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;
}
})
.success(function (data) {
})
.error(function (data, status) {
});
For getting file $scope.file
I used custom directive:
app.directive('file', function () {
return {
scope: {
file: '='
},
link: function (scope, el, attrs) {
el.bind('change', function (event) {
var file = event.target.files[0];
scope.file = file ? file : undefined;
scope.$apply();
});
}
};
});
Html:
<input type="file" file="file" required />
Please, have a look on my implementation. You can wrap the following function into a service:
function(file, url) {
var fd = new FormData();
fd.append('file', file);
return $http.post(url, fd, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
});
}
Please notice, that file
argument is a Blob
. If you have base64
version of a file - it can be easily changed to Blob
like so:
fetch(base64).then(function(response) {
return response.blob();
}).then(console.info).catch(console.error);
There are other solutions you can look into http://ngmodules.org/modules/ngUpload as discussed here file uploader integration for angularjs
here is my solution:
// Controller_x000D_
$scope.uploadImg = function( files ) {_x000D_
$scope.data.avatar = files[0];_x000D_
}_x000D_
_x000D_
$scope.update = function() {_x000D_
var formData = new FormData();_x000D_
formData.append('desc', data.desc);_x000D_
formData.append('avatar', data.avatar);_x000D_
SomeService.upload( formData );_x000D_
}_x000D_
_x000D_
_x000D_
// Service_x000D_
upload: function( formData ) {_x000D_
var deferred = $q.defer();_x000D_
var url = "/upload" ;_x000D_
_x000D_
var request = {_x000D_
"url": url,_x000D_
"method": "POST",_x000D_
"data": formData,_x000D_
"headers": {_x000D_
'Content-Type' : undefined // important_x000D_
}_x000D_
};_x000D_
_x000D_
console.log(request);_x000D_
_x000D_
$http(request).success(function(data){_x000D_
deferred.resolve(data);_x000D_
}).error(function(error){_x000D_
deferred.reject(error);_x000D_
});_x000D_
return deferred.promise;_x000D_
}_x000D_
_x000D_
_x000D_
// backend use express and multer_x000D_
// a part of the code_x000D_
var multer = require('multer');_x000D_
var storage = multer.diskStorage({_x000D_
destination: function (req, file, cb) {_x000D_
cb(null, '../public/img')_x000D_
},_x000D_
filename: function (req, file, cb) {_x000D_
cb(null, file.fieldname + '-' + Date.now() + '.jpg');_x000D_
}_x000D_
})_x000D_
_x000D_
var upload = multer({ storage: storage })_x000D_
app.post('/upload', upload.single('avatar'), function(req, res, next) {_x000D_
// do something_x000D_
console.log(req.body);_x000D_
res.send(req.body);_x000D_
});
_x000D_
<div>_x000D_
<input type="file" accept="image/*" onchange="angular.element( this ).scope().uploadImg( this.files )">_x000D_
<textarea ng-model="data.desc" />_x000D_
<button type="button" ng-click="update()">Update</button>_x000D_
</div>
_x000D_
Source: Stackoverflow.com