Multiple Files Upload with Google App Engine Python


On client side (HTML code for browsers):

<strong>Upload Files:</strong>
<form method="post" action="/postmultifiles" enctype="multipart/form-data">
  <input type="file" name="filesToUpload[]" id="filesToUpload" multiple="" onChange="makeFileList();" />
  <input type="submit" value="Send">
</form>
<p><strong>Files You Selected:</strong></p>
<ul id="fileList"><li>No Files Selected</li></ul>

On client side (JavaScript code for browsers):

function makeFileList() {
  var input = document.getElementById("filesToUpload");
  var ul = document.getElementById("fileList");
  while (ul.hasChildNodes()) {
    ul.removeChild(ul.firstChild);
  }
  for (var i = 0; i < input.files.length; i++) {
    var li = document.createElement("li");
    li.innerHTML = input.files[i].name;
    ul.appendChild(li);
  }
  if(!ul.hasChildNodes()) {
    var li = document.createElement("li");
    li.innerHTML = 'No Files Selected';
    ul.appendChild(li);
  }
}

The above HTML/JavaScript code comes from [1]. Put the code on your webpage. When users choose multiple files, the files will be listed on the webpage.

----

On server side (Python code for Google App Engine):

class MultipleFilePage(webapp2.RequestHandler):
  def post(self):
    for file_data in self.request.POST.getall('filesToUpload[]'):
      file_name = file_data.filename
      file_content = file_data.value
      # do something here...

The code for receiving multiple files is easy. Please check the above code, which comes from [2].


References:

[1]Multiple File Upload Input
[2]Receive multi file post with google app engine
[3]Reading local files in JavaScript - HTML5 Rocks