How can I upload folder and files both from same input type?

Question

I am using a form where I can upload both, a file or full folder. I am using following code:

<html>
  <input type = "file" id = "file" name = "files[]" multiple/>
  <input id="file" type=file multiple webkitdirectory directory>
</html>

With first input, I can upload file but not folder and with 2nd input, I can upload folder but not file. But I want to be able to upload both with same input.

Please tell me what is the exact code by which I can upload both file and folder in single click.

off-topic: remove spaces between attributes, values and =... so id="file" instead of id = "file" — Luuuud
– Luuuud, Commented Nov 24, 2016 at 14:59

evilReiko · Accepted Answer · 2016-11-24 15:37:38Z

2

As I'm writing this, this is not possible with pure HTML, unless you use some plugin like Flash then maybe it's possible.

1 file upload:

<input type="file" name="file">

Multiple files upload (but must be in same folder):

<input type="file" name="file[]" multiple>

1 folder upload (Note: not all browsers may support this):

<input type="file" name="file" webkitdirectory directory>

Multiple folders upload maybe not possible currently.

Here is a trick that might work (but I didn't test it): You can drag and drop file(s) and folder(s) directly in the input field, for example from your desktop to the browser's input. Try selecting files AND folders and drog-n-drop them in your input field, but I don't know if they will be uploaded correctly to the server.

EDIT:

Just tested that trick, it didn't work :/

edited Nov 24, 2016 at 15:37

answered Nov 24, 2016 at 13:50

evilReiko

20.6k24 gold badges93 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Apul Gupta Over a year ago

What is the benefit of folder upload if we can't get folders on server side?

Kaiido Over a year ago

The drag&drop thing should work (you can test it here). But what is not possible though is to have the dialog for both directories and single/multiple files. I am not entirely sure, but I think it's even an OS restriction (at least on osX).

Collectives™ on Stack Overflow

How can I upload folder and files both from same input type?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related