I am trying to upload an image from my AngularJs client to Django REST API.
My header is ok. Has proper content-type
Content-Type:multipart/form-data; boundary=---WebKitFormBoundaryYtkiHFTO9IU6LLxB
but my Request Payload looks like
------WebKitFormBoundaryYtkiHFTO9IU6LLxB
Content-Disposition: form-data; name="photo"
------WebKitFormBoundaryYtkiHFTO9IU6LLxB--
instead of (as seen by using Advanced REST Client chrome extension)
------WebKitFormBoundaryrezxw2nm5Ty5NVg7
Content-Disposition: form-data; name="photo"; filename="image.png"
Content-Type: image/png
------WebKitFormBoundaryrezxw2nm5Ty5NVg7--
As you can see, I am missing the "filename" and "Content-Type" variables and I guess this has something to do with why my image does not get accepted by the Django REST Api.
My code is as shown below. I have earlier captured image using cordova's camera plugin and I have the file url. I use that to get a fileEntry object and a File object from that. Hope the File object is the right one I am using. Please suggest where I am wrong.
fileStorageService.resolveUrl($scope.userProfile.user.photo).then(function(fileEntry){
var fd = new FormData();
fileEntry.file(function(file){
//var blob = new Blob(file.getAsBinary(), { type: "image/jpg"});
//var blob = file.slice(file.start,file.end,file.type);
fd.append('photo',file,file.name);
userService.updateUser(baselink,id,fd).then(function(response){
ngNotify.set("Updated your profile photo",{
type: 'info',
position: 'bottom',
sticky: false,
duration: 2000
});
$scope.editable = false;
},function(error){
console.log(error);
ngNotify.set("Unable to send your profile photo. Please try again later",{
type: 'warn',
position: 'bottom',
sticky: false,
duration: 2000
});
});
},function(error){
console.log(error);
});
});