7

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.

Mladen Oršolić
  • 1,352
  • 3
  • 23
  • 43
R. Dey
  • 509
  • 2
  • 7
  • 19

1 Answers1

3

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 :/

evilReiko
  • 19,501
  • 24
  • 86
  • 102
  • What is the benefit of folder upload if we can't get folders on server side? – Apul Gupta Sep 19 '17 at 06:21
  • 1
    The drag&drop thing should work (you can [test it here](https://stackoverflow.com/questions/47932586/uploading-directory-and-maintainign-structure-through-javascript-and-html5/47935286#47935286)). 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). – Kaiido Feb 02 '18 at 08:03