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
javascript file upload image django-rest-framework


source to share


No one has answered this question yet

Check out similar questions:

278
Uploading files with HTTPWebrequest (multipart / form-data)
37
Django REST Framework Boot Image: "The submitted data was not a file"
22
Can I set the filename in the blob data when I upload the data to the server using html5?
2
load into php $ _FILE from chrome extension
1
upload large files using html5 uploader
1
upload image to API without input form file
0
phonegap: load image without header information
0
"Submitted data was not a file" Error loading images with Django REST Framework
0
load image data via ajax POST. Facing problems
0
ASP.NET MVC limitation or XMLHttpRequest?



All Articles
Loading...
X
Show
Funny
Dev
Pics