coudn't upload multipart data in react app using axios

Question

hi I am trying to post a multipart data in my react app using axios, but it's not not getting posted and giving me the error after taking a long time nearly about more then 5 minutes "(failed) net:::err_CONNECTION_RESET, i don't know what is going wrong here, below is the code snippet

function that makes the reqeuset :

handleClick(event){
let self = this;
    if(this.state.filesToBeSent.length>0){
            const formData = new FormData();
            formData.append('file',this.state.filesToBeSent[0][0]);
            let jsonObject = new Object;
        jsonObject.itemId="1262";
        jsonObject.module="Breakfix";
        jsonObject.filename=("yyyyy");
        jsonObject.filepath="c:\\abc\\";
        jsonObject.createdOn=Math.round(new Date().getTime()/1000.0);
        jsonObject.createdBy="3";

            formData.append("attachment", JSON.stringify(jsonObject));
        let filesArray = this.state.filesToBeSent;
    axios.post(GLOBAL.uploadFile,
            formData
);
}
else{
 alert("Please upload some files first");
}
}
**code written on express to route the post to the actual API** : 
function uploadFiles(request, response) {
let payload = request.signedCookies['access_token'];
payload.apikey = "d2c-234";
const secret = 'my-secret';
const signed = jwt.sign(payload, secret, {
algorithm: 'HS256',
expiresIn: '7d'
});
let config = {
headers: {'x-auth-token': signed
}
};
let data={}
if(!_.isEmpty(request.body)) {
data = request.body;
}
axios.post("https://abc-myapp.net/serviceManagement/rest/uploadBreakfixImage/",data,config)
 .then(uploadResponse => {
    response.status(200).json(uploadResponse);
 }).catch(function(error) {
   console.error(error.stack);
 });
}
 when putting console on the express side it seems request doesn't have the payload, what am i doing wrong here ??

Ravindra Ranwala · Accepted Answer · 2017-07-18 06:23:34Z

1

You can't post JSON data along with the file or any other attachment. You can post it as form data to your back end. The form data is passed as a multi-part data to the server with relevant boundaries. Here's a sample code for your reference. You may pass json data along with the formData as key, value pairs like this.

let data = new FormData();

data.append('itemId', '1262');
data.append('module', 'Breakfix');
data.append('filename', 'yyyyy');
data.append('filepath', 'c:\\abc\\');
data.append('upload', fileData, fileName)


axios.post(url, data)
    .then(response => console.log(response))
    .catch(errors => console.log(errors));

Hope this helps. Happy Coding !

answered Jul 18, 2017 at 6:23

Ravindra Ranwala

21.2k7 gold badges50 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rajan Chauhan Over a year ago

Hi @Ravindra, i am stringifying that JSON object, putting all that in a key named "attachment" and then parsing it again in API side using JSON parsor, it's working fine when i am trying to submit the data through POSTMAN client.

Ravindra Ranwala Over a year ago

So you mean, you send entire JSON content as a string in a key value pair against the key called attachment. Then check for HTTP headers and post them here. So that I can help you.

Rajan Chauhan Over a year ago

Accept:application/json, text/plain, / Content-Length:196667 Content-Type:multipart/form-data; boundary=----WebKitFormBoundarymCXU9DZi4uU9kQA4 Cookie:access_token='here is my access token'

Ravindra Ranwala Over a year ago

hmm, looks ok to me. Are you sure that the same works with the postman. Then compare the headers between the two instances and check for the difference.

Rajan Chauhan Over a year ago

Hi Ravindra, yes i have checked the headers and they are same, sorry for the late response.could you please help me with the same ?

|

Collectives™ on Stack Overflow

coudn't upload multipart data in react app using axios

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related