I am very frustrated and could not find the soloution:

I am creating a project using angularjs and nodejs.I get image data from angular side in node js and send this data to further api.I got error

{ "error": { "detail": "Multipart form parse error - Invalid boundary in multipart: None" }
}

here is my code in nodejs side:

var request = require('request'); console.log(req.files);
var data = { website:' contact_number:'dsdsd', services_offered:'dsadasd', contact_name:'dasdas', provider_category:'exchange', email:'', image:req.files }
var api_url = global.common.base_url + 'vcard/1.0.0/visit_card/' + req.param('uuid') +'/'; request({ url: api_url, method: 'PUT', headers: { 'Content-Type': 'multipart/form-data', 'Authorization': 'Bearer '+req.cookies.apitoken }, json: data }, function(error, response, body) { if(response.statusCode == 200 && !error){ res.end(JSON.stringify(body)); }else{ res.send(response.statusCode, { error: body }); } });
}

In req.files i get

{ image: [ { fieldName: 'image[0]', originalFilename: 'icon_dd_chart_grey.png', path: 'C:\\Users\\karakuma\\AppData\\Local\\Temp\\op74_gLSzPs-_49aT1GF0si
7.png', headers: [Object], size: 1474, name: 'icon_dd_chart_grey.png', type: 'image/png' } ] }

2

5 Answers

Try defining the content type as follows.

content_type='multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'

I was facing the same issue and it worked for me in python.

6

I also faced this issue while trying to upload file. For me the issue was the FormData, which was coming as Object instead of FormData instance

So i converted my object to FormData using below code:

const getFormData = object => Object.keys(object).reduce((formData, key) => { formData.append(key, object[key]); return formData; }, new FormData());

And the just executed my post request, in my case using Vue resource:

return Vue.http.post(url, getFormData(formData), { headers: { 'Content-Type': 'multipart/form-data' } });

<script src=""></script>

There is no need to mention the content type in header, fetch() will detect it's content type by itself.

let formData = new FormData()
formData.append("email", email);
formData.append("password", password);
formData.append("image", image);
const response = await fetch(' { method: 'POST', headers: {'X-CSRFToken': csrftoken}, //django specific body: formData, });

I have been facing this problem in angular 11 connected to Django rest API, I was able to curl with something like this in order to upload a JSON with a form:

curl -X POST -S \ -H 'Accept: application/json' \ -u "user:password" \ -F "name=name" \ -F "label=mylabel" \ -F "otherfields=something" \ -F "photo=@./example.png;type=image/png" \ 

But I was getting that exception using my header as httpOptions:

'content-type': 'multipart/form-data',

So I just commented out the content-type and it seems angular is so clever that he creates the header for you and will set the multipart together with the boundaries.

For more information on this:What is the boundary in multipart/form-data?

let data = fs.createReadStream('/home/insert/screen03.jpg'); let form = new FormData(); form.append('files', data, 'test.jpg'); form.getLength((err, length) => { if (err) { reject(err); } let headers = Object.assign({ 'Content-Length': length, 'Authorization': `Token b84db005a7fc1e5471a763aa42fcc5734b7bb22a` }, form.getHeaders()); return axios.post(` form, { headers: headers }) .then(res => console.log(res.data)) .catch(error => console.log(error.response.data)) });

3

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy