6

I would like to be able to have a user upload a folder with all the files and folders inside it and retain the hierarchy to my web app using just the browser.

I have searched and not found how to do this. Everyone says that it is a browser problem and I believe it because there is not browser standard for doing this.

I have found and played with many javascript implementations of uploading files. When I drag a folder onto them I can get the list of all the files, but the folders and hierarchy are all gone. If I use the ones that open a dialog to find a file none of them allow selecting a folder.

So how does Dropbox do it?

I can drag a whole folder onto either Chrome or Safari (on my mac) and both of them will upload the folders and files and retain the hierarchy in dropbox.

Doesn't anyone know how they do that so that I can do the same on my own web app that is browser based?

user856232
  • 1,023
  • 1
  • 14
  • 35
  • Maybe you could have a look at https://stackoverflow.com/a/46562869 and https://stackoverflow.com/a/8218074 – caylee Apr 04 '18 at 16:28
  • Those look promising. I tried it in both Safari and Chrome and it did show the array with all the folder information. The question is actually uploading that to the server. I will have to play around with it. One of my challenges is that some of the folders have the same file name used inside, so I have to be able to attached the full path to the file stream that gets uploaded. At any rate, thank you. If it works I will let you know and you can turn this into an answer. – user856232 Apr 04 '18 at 20:20
  • This is working great for me. Please convert your comment into an answer so I can accept it as the answer. – user856232 Apr 09 '18 at 20:33

1 Answers1

4

You have to add some parameters to the input tag to support directory uploads: webkitdirectory for Webkit-based browsers (e.g., Chrome) and mozdirectory for Mozilla's browser (Firefox).

The HTML code could look like this:

<input type="file" webkitdirectory mozdirectory … />

You could have a look at https://stackoverflow.com/a/46562869 and https://stackoverflow.com/a/8218074, which are answers to similar questions.

caylee
  • 911
  • 6
  • 12
  • what about drag and drop into div - how does the webkitdirectory tag work there? – richardwhitney Feb 18 '20 at 20:27
  • @richardwhitney you've probably already figured this out, but FYI: https://developers.google.com/web/updates/2012/07/Drag-and-drop-a-folder-onto-Chrome-now-available (tldr; dragEvent.dataTransfer.items[n].webkitGetAsEntry() will get you a FileEntry or DirectoryEntry for each file system object drag-and-dropped onto your element). – Paul Wheeler Jun 18 '20 at 23:09