Upload by JS not working

[Debdut]

When using the html template it works

<form action='http://localhost:8000/upload' method='post' encType="multipart/form-data">
  <input type="file" name="sampleFile" />
  <input type='submit' value='Upload!' />
</form> 

But when I upload by JS instead of Form Submit it doesn't work

<input id="input" type="file" name="sampleFile" />

const input = document.querySelector('#input')
input.addEventListener('change' (event) => {
  const files = event.target.files
  fetch('http://localhost:8000/upload', { method: 'post', files })
})

In server req.files is undefined

[Debdut]

I also tried FormData already, doesn't work

const input = document.querySelector('#input')

input.addEventListener('change' (event) => {
  const files = event.target.files

  const body = new FormData()
  body.append('files', files)

  fetch('http://localhost:8000/upload', { method: 'post', body  })
})

[SirCQQ]

Try changing the 'addEventListener' from "change" to "submit".

You are trying to create a FormData object and execute a fetch every time you change something in the form.

P.S. Here const files = event.target.files const body = new FormData() body.append('files', files) Try to append files[0]

Hope it helps 😄

[Debdut]

Nope it doesn’t work

[duterte]

This thing has not been fixed yet ?

[richardgirges]

I need to see your server code. It sounds like you are not loading the express fileupload middleware properly.

[duterte]

I need to see your server code. It sounds like you are not loading the express fileupload middleware properly.

I'm having this the same scenario in which I need to upload file (Images for instance) using fetch API, but looks like it was not supported yet.

[richardgirges]

I cannot help without seeing your node code. All I know is that it “doesn’t work” but I have no code or reproducible issue to go off of. Please provide code showing your issue so that I can assist.

At the moment I am able to upload code just fine with JS and all of our tests are passing.

[duterte]

I cannot help without seeing your node code. All I know is that it “doesn’t work” but I have no code or reproducible issue to go off of. Please provide code showing your issue so that I can assist.

At the moment I am able to upload code just fine with JS and all of our tests are passing.

This is a code snippets on front-end, which is trying to upload file using fetch API

This is a code snippets on nodeJS which tries to log to the console the req.files object

But it logs undefined in the console.

Maybe because I did not use html form to upload the file, Instead I used browser's built-in fetch API

[SirCQQ]

Try this in the node file

const express = require("express");
const fileUpload = require('express-fileupload');

const app = express();

app.use(fileUpload({
    createParentPath: true
}));

app.post("/post_image", (req,res)=>{
   console.log(req.files);
return res.send("Done");
})

And for the request you should use content-type:multipart/form-data header so the middleware can understand that a file is sent, the default header is application/x-www-form-urlencoded.

You should use the specific headers for the specific request.

Hope it helps.

P.S. If you are using encType=multipart/form-data in the form tag you don't need to use it in request.

P.S.S. I think you should create a FormData object where you append under the key files every file from input like this

let files = this.formRef.current[4].files;
        for (let i in files) {
          form.append("files", files[i])
        }

this.formRef.current[4] is an

<input type="file" multiple />

[duterte]

Hi I just wanted all to know that the procedure provided above made by @SirCQQ solves the problem

Code snippets in front-end

Code in backend

console log