I am trying to upload a file to Django server using angularjs 1.6.5. I am not able to upload file using $http.patch method

Question

Using Angularjs 1.6.5 I am trying to upload a file to the Django server. When I try to upload the file I am not sure what type of 'Content-Type' header should be passed with the $http.patch method. Here is the following my Angular apps config:-

var app = angular.module("edit_modules", []);

app.config(function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    $httpProvider.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8';
    $httpProvider.defaults.useXDomain = true;
    $httpProvider.defaults.headers.common['Accept'] = 'application/json, text/javascript';
});

And this is my patch method:-

$http.patch(url, data, {
    headers: {'Content-Type': 'application/json; charset=utf-8' }
}).then(successCallback, errorCallback);
function successCallback(response){
    console.log("Success");
    console.log(response);
};
function errorCallback(error){
    alert("Error Uploading!");
    console.log(error);
};

When I pass {'Content-Type': 'application/json; charset=utf-8' } through the Header I get the following error:-

"The submitted data was not a file. Check the encoding type on the form."
Status :- 400

Since its content-type is file I used the following header {'Content-Type': 'multipart/form-data; charset=utf-8'} . But then I got this error:-

Multipart form parse error - Invalid boundary in multipart: None
Status :- 400

As suggested in the link here I tried the following header as well {'Content-Type': undefined} But this as well did not resolve my problem and I got the following error:-

Unsupported media type "text/plain;charset=UTF-8" in request. 
Status :- 415

However when I tried with simple text fields the PATCH method worked with the header supplied being {'Content-Type': 'application/json; charset=utf-8' }. I am not sure where the problem is. I even tried to see the console for what data was being set to be patched

data = {
    "video": element.files[0]
};
console.log(data);

THIS is what i got on console:-

{video: File(99861)}video: File(99861) {name: "Capture2.PNG", lastModified: 1517491665223, lastModifiedDate: Thu Feb 01 2018 18:57:45 GMT+0530 (India Standard Time), webkitRelativePath: "", size: 99861, …}

any help is much appreciated.

Label is just a video but it can be any type of file. – Shashishekhar Hasabnis Apr 24 '18 at 12:28 — Shashishekhar Hasabnis, Apr 24 '18 at 12:28
Thats not what I am not looking for. – Shashishekhar Hasabnis Apr 24 '18 at 12:43 — Shashishekhar Hasabnis, Apr 24 '18 at 12:43
But thanks for your concern. – Shashishekhar Hasabnis Apr 24 '18 at 12:43 — Shashishekhar Hasabnis, Apr 24 '18 at 12:43

score 0 · Accepted Answer · answered Apr 26 '18 at 11:15

Referring to the answer here I found that you need to attach the File Object to be sent using FormData. Also you need an additional header in config transformRequest: angular.identity,. Here is the successful PATCH method that worked for me.

        var fd = new FormData();
        fd.append('video', element.files[0]);
        $http.patch(url, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).then(successCallback, errorCallback);
        function successCallback(response){
            console.log("Success");
            console.log(response);
        };
        function errorCallback(error){
            alert("Error Uploading!");
            console.log(error);
        };

In the second line 'video' is the REST API Endpoint's variable where my file will be stored. In order to avoid the error

Multipart form parse error - Invalid boundary in multipart: None

I have left the headers: {'Content-Type': undefined}.

I am trying to upload a file to Django server using angularjs 1.6.5. I am not able to upload file using $http.patch method

1 Answers1