Why am I missing "filename" and "Content-Type" while uploading image using form-data?

690 Views Asked by At

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

There are 0 best solutions below