Billjesh Baidya
Billjesh Baidya

Reputation: 349

Express file upload: req.files is undefined

I am using library called express-fileupload for file handeling middle wear. But when I do console.log.log(req.files) it says undefined. I checked request headers in chrome dev tool it says img/png but the express says its undefined.

here is my client side:

public static async upload(data: Upload){
      const track = data.track
      const artwork = data.artwork
      if(track && artwork){
          try{
              await Req.upload("/api/u/music/upload", track)
              await Req.upload("api/u/music/upload", artwork)
          }catch(err){
              console.log(err)
          }
      }
 }
 
 /*req class*/
 
 export class Req {
    public static async upload(url: string, file: File|null|undefined){
      const response = await fetch(url, { // Your POST endpoint
        method: 'POST',
        headers: {
          // Content-Type may need to be completely **omitted**
          // or you may need something
          "CSRF-Token": <string>Cookies.get("XSRF-TOKEN"),
        },
        body: file // This is your file object
      })
      return await response.json()
    }
}

and in my server side:

app.use(cors())
app.use(bodyParser.urlencoded({extended : true, limit: "100mb"}));
app.use(bodyParser.json({limit: '100mb'}));
app.use(express.static(path.join('build')))
app.use(cookieParser())
app.use(fileUpload())
app.use(csrf({cookie: true}))


export const uploadMusic = async (req: Request, res: Response)=>{
    console.log(req.files) //undefined
    res.send({"upload_status": "ok"})
}

Upvotes: 1

Views: 1458

Answers (1)

Quentin
Quentin

Reputation: 944538

The module you are using (as well as the one Bona Ws recommends) expects you to POST a multipart/form-data body where the file is one of the parts.

You are posting a plain file.

Use a FormData object to generate a multipart request.

const body = new FormData();
body.append("key", file);

Upvotes: 2

Related Questions