React Uploady + Multer

[AbdeenM]

Hi,

Awesome work you have done here!
I can not seem to be able to handle folder uploads on my backend side. is there any guide or example i can use to handle this?
What am doing is:
Front-end: Running a react add and using your upload-drop-zone package to initiate the uploading such as:

<Uploady destination={{
  ...createToken(Env.STORAGE_JWT_TOKEN),
  params: { ... },
  url:  'my-server/upload' }}>
  <UploadDropZone
    onDragOverClassName='drag-over'
    htmlDirContentParams={{recursive: true, withFullPath: true}}>
    <span>Drag&Drop File(s) or Folder(s) Here</span>
  </UploadDropZone>
</Uploady>

Back-end: Running an expressjs app + multer to handle my uploads, while setting the upload route such as:

router.post('/upload', (req, res, next) => validateToken(req, res, next), upload.array('file', 100), onUpload)

and the multer instance such as:

const multerStorage = multer.diskStorage({
  destination: 'temp',
  filename(req: Request, file: Express.Multer.File, callback: (error: (Error | null), filename: string) => void) {
    callback(null, file.originalname)
  }
})

export const upload = multer({
  storage: multerStorage,
  limits: {
    fileSize: ConstantsC.fileSize
  }
})

Perhaps there is a special way to handle folder uploads? or maybe i could use a different package to handle uploads from my servers side?

Thanks

[yoavniran]

hi @AbdeenM thank you! :)
I'll move this to the discussions area since this is a usage question.

I will give this a look as soon as I can and try to create a working example for you

[yoavniran]

@AbdeenM a few things to notice:

• Express+Multer, as far as I can tell, is a perfectly good option to use for uploading a folder with Uploday

• You need to tell Multer to keep the path in the file name, otherwise it will strip it out (default behavior). See the Multer options doc. Specifically, the preservePath option (set to true).

• Uploady by default sends each file in its own request. So even though you are uploading a folder, by default you will get as many requests as you have files inside the folder. This isn't a problem of course but If you want, you can group files into a single request using the grouped & maxGroupSize Uploady props.