Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to upload multiple files using one file input element

Tags:

I'm trying to use one file input element to upload multiple files to Drive using html form. This seems to work only for one file, although the file picker allows selecting multiple files. Back in the script log viewer, I only see one file captured of the two I uploaded. Is this unsupported, or am I going the wrong way about it?

Code.gs:

function logForm(form) {   Logger.log(JSON.stringify(form));   return true; } 

index.html:

<html>   <form id="uploadTest" enctype="multipart/form-data">     <input type="file" multiple="multiple" name="fileUpload">     <input type="button" id="upload" value="upload"     onclick="google.script.run.logForm(document.getElementById('uploadTest'));">   </form> </html> 

Log view:

{"fileUpload":{"contents":"GIF87a\u0001\u0000\u0001\u0000� \u0000\u0000��̖��,\u0000\u0000\u0000\u0000\u0001\u0000 \u0001\u0000\u0000\u0002\u0002D\u0001\u0000;", "type":"image/gif","name":"1x1.gif","length":35}} 
like image 865
jad Avatar asked Mar 31 '13 04:03

jad


2 Answers

The multiple file select in the dialog when you click on the browse button of the file field happens only for the new browsers supporting HTML5. It wont allow multiple select for old browsers. For older browsers the only good solutions are flash or javascript plugins. Here is a good resource for jquery uploaders ( some support multiple files ): http://creativefan.com/10-ajax-jquery-file-uploaders/. Hence my suggestion is use some plugin so that its supported on old as well as the new browsers.

like image 189
Ujwal Abhishek Avatar answered Oct 06 '22 02:10

Ujwal Abhishek


I'm using possibility to send array of files. Just add [] to name atrribute:

<form action="/" enctype="multipart/form-data" method="post">     <input type="file" name="files[]" />     <input type="file" name="files[]" />     // etc.     <input type="submit"> </form> 

You will have array of arrays in $_FILES

Array (     [files] => Array         (             [name] => Array                 (                     [0] => 1.png                     [1] => 2.png                 )              [type] => Array                 (                     [0] => image/png                     [1] => image/png                 )              [tmp_name] => Array                 (                     [0] => /tmp/phpDQOZWD                     [1] => /tmp/phpCELeSw                 )              [error] => Array                 (                     [0] => 0                     [1] => 0                 )              [size] => Array                 (                     [0] => 32209                     [1] => 64109                 )          )  ) 

Of course, you you'll have to upload them one by one. Not convenient to a large number of files, but works in all browsers. For example,using jQuery you can add one more input each time last files[] input was changed.

function addOneMoreInput() {     $('input[type=file]').last().change(function() {         $(this).after('<input type="file" name="files[]" />');         $(this).off('change');         addOneMoreInput();     }); } addOneMoreInput(); 
like image 45
vladkras Avatar answered Oct 06 '22 03:10

vladkras