How to recive uploded file in nodejs

Question

i have a redux-from submission, console log look like this

{
  id: "x", 
  parentId: "b", 
  editing: true, 
  logo: FileList, 
}

Logo FileList contains my uploaded file name and file, i think

0: File(19355) {name: "11964821.jpeg", lastModified: ......

using fetch to send to nodejs, image contain my files and above data

function Update(image) {

    const requestOptions = {
        method: 'POST',
        headers: { ...authHeader(), 'Content-Type': 'application/x-www-form-urlencoded' },
        body: JSON.stringify(image)
    };
    return fetch(`${apiUrl}/API`, requestOptions).then(handleResponse)
    .then( data => {  return data; });
}

but this data not receiving nodejs, because is tried re.file etc.. its shows undefined

app.post('/image', upload.single('logo'), function (req, res, next) {

})

include formdata

  const onSubmit = (image, dispatch)=>{

    var formData = new FormData(); 
    formData.append('logo',image.logo[0]);

    var imageNew = {...image,formData};

    dispatch(imageActions.companyProfileLogoUpdate(imageNew)) ;  
  }

now log is

formData: FormData {}
id: "5c66478b0814720a4365fe72"
logo: FileList {0: File(19355), length: 1}
parentId: "5c66478b0814720a4365fe71"

yes... using multer to save image, backed part is ok because its working fine with postman — david, Feb 21 '19 at 08:18
yes.. its working fine using postman,, but when we come to redux form upload not working — david, Feb 21 '19 at 08:21

score 1 · Answer 1 · answered Feb 21 '19 at 08:30

1

let formData = new FormData();
formData.append('logo' , {{your image file}}

// upload file as 
let result = await sendServerRequestForForm(url,formData);


function sendServerRequestForForm(url,data) {
var promise = new Promise(function(resolve) {
    resolve($.ajax({
        url,
        method : 'POST',
        data,
        processData: false,
        contentType: false,
        success: function(data) {
            return data
        },
        error: function (err) {
            try{
                let responseStatus = err.responseJSON
                // watch your response
            }catch (e) {
                console.log('Field to get response');
            }
        }
    }));
});
return promise

}

answered Feb 21 '19 at 08:30

Basit

862
1
12
30

he is specific about using `fetch api`. fetch and jquery ajax differ a lot – Gaurav Saraswat Feb 21 '19 at 08:33
:( yes fetch api – david Feb 21 '19 at 08:37
ok @david you could try below answer i just forgot you are using fetch :) – Basit Feb 21 '19 at 08:43
you can also ajax any problem with this ? – Basit Feb 21 '19 at 08:46
will try , but prefer solution for this :( – david Feb 21 '19 at 08:50
fetch API should also work i dont know where its going wrong.. for fetch API do not set header i think this help you https://stackoverflow.com/questions/46640024/how-do-i-post-form-data-with-fetch-api – Basit Feb 21 '19 at 08:52

Basit · Answer 2 · 2019-02-21T08:53:30.757

1

for fetch API you can try this

let formData = new FormData();
formData.append('logo', fileList[0]);

fetch(url, {
method: 'post',
body: data,
})
.then(…);

edited Feb 21 '19 at 08:53

answered Feb 21 '19 at 08:49

Basit

862
1
12
30

are you sure Content-Type' is 'application/x-www-form-urlencoded ? – david Feb 21 '19 at 08:52

Gaurav Saraswat · Answer 3 · 2019-02-21T10:59:44.343

0

First thing is for using fetch api for post content-type header should match typeof body. since your body is json stringified your contentType header should be 'application/json' . more about this .

Second. since you want to upload an image which a file you should use FormData without requirement of setting contentType: like below:

let formData = new FormData();
formData.append('logo', image.logo[0]);

const requestOptions = {
  method: 'POST',
  body: formData
};

fetch(`${apiUrl}/API`, requestOptions)
.then(handleResponse)...

edited Feb 21 '19 at 10:59

answered Feb 21 '19 at 08:29

Gaurav Saraswat

1,353
8
11

my file in image.logo[0], is it okey to join var imageNew = {...image,formData}; like this ? – david Feb 21 '19 at 08:36
i dont think so. `formData` is not simple object `its instance of formData ` – Gaurav Saraswat Feb 21 '19 at 08:53
i dont think so. `formData` is not simple object `its instance of formData ` .to add data, you need to call `formData.append('logo', fileList[0])`. – Gaurav Saraswat Feb 21 '19 at 09:04
Uncaught ReferenceError: fileList is not defined – david Feb 21 '19 at 09:08
@david dude, i wrote `fileList` just to signify whatever variable list you are using. on top of it these random guys have blindly copied my answer and pasted. one of those is accepted too :/ – Gaurav Saraswat Feb 21 '19 at 11:02

score 0 · Accepted Answer · answered Feb 21 '19 at 10:56

0

move formData to fetch file and remove header content type, Try this

function Update(image) {

var formData = new FormData(); 
formData.append('logo',image.logo[0]);  

    const requestOptions = {
        method: 'POST',
        headers: { ...authHeader() },
        body: formData
    };
    return fetch(`${apiUrl}/API`, requestOptions).then(handleResponse)
    .then( data => {  return data; });
}

answered Feb 21 '19 at 10:56

Shanu T Thankachan

993
2
8
16

Thanks, fileList[0] to image.logo[0], working fine :) – david Feb 21 '19 at 10:58

How to recive uploded file in nodejs

4 Answers4