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

I am trying to upload an image from my AngularJs client to the Django REST API.

My title is fine. Has the correct content type

Content-Type: multipart / form-data; border = --- WebKitFormBoundaryYtkiHFTO9IU6LLxB

but my request payload looks like

------ WebKitFormBoundaryYtkiHFTO9IU6LLxB

Content-Disposition: form-data; name = "photo"

------ WebKitFormBoundaryYtkiHFTO9IU6LLxB -

instead of (as seen with Chrome Advanced Extension REST Client)

------ WebKitFormBoundaryrezxw2nm5Ty5NVg7

Content-Disposition: form-data; name = "photo"; filename = "image.png"

Content-Type: image / png

------ WebKitFormBoundaryrezxw2nm5Ty5NVg7 -

As you can see, I'm missing the "filename" and "Content-Type" variables, and I'm guessing it has something to do with why my image is not being accepted by the Django REST Api.

My code is shown below. I used to shoot an image using the cordova camera plugin and I have a url file. I am using this to get the fileEntry object and File object from this. Hope the File object is the correct one that I am using. Please suggest where I am going 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);
    });
});

      

+3


source to share





All Articles