How to upload multiple files to BlobStore?

Question

I'm trying to upload multiple files in a form to the BlobStore.

Form:

<form action="{{upload_url}}" method="POST" enctype="multipart/form-data">
  <label>Key Name</label><input type="text" name="key_name" size="50"><br/>
  <label>name</label><input type="text" name="name" size="50"><br/>
  <label>image</label><input type="file" name="image" size="50"><br/> 
  <label>thumb</label><input type="file" name="thumb" size="50"><br/> 
  <input type="submit" name="submit" value="Submit">
</form>

I'm then trying to fetch the BlobInfo objects for each of those files uploaded:

def post(self):
    image_upload_files = self.get_uploads('image') 
    thumb_upload_files = self.get_uploads('thumb') 
    image_blob_info = image_upload_files[0]
    thumb_blob_info = thumb_upload_files[0]

I'm seeing some weird behavior. Both files are making it into the BlobStore, but I cannot figure out how to get the Keys so that I can store those on another Entity. The code above manages to get the key for image_blob_info, but not thumb_blob_info. I don't understand how to use get_uploads. I want to pass multiple files through the form and then fetch them by name so I can store them in the appropriate BlobReferenceProperties on another Entity.

Answer 1

Each file needs its own unique upload url, so my guess is something wacky is happening when all three files are posted to the same url.

The best solution for supporting multiple file uploads is described in Nick Johnson's blog post:

http://blog.notdot.net/2010/04/Implementing-a-dropbox-service-with-the-Blobstore-API-part-3-Multiple-upload-support

Answer 2

You could post the files to the same name, followed by [], which will post an array:

<form action="{{upload_url}}" method="POST" enctype="multipart/form-data">
  <label>Key Name</label><input type="text" name="key_name" size="50"><br/>
  <label>name</label><input type="text" name="files[]" size="50"><br/>
  <label>image</label><input type="file" name="files[]" size="50"><br/> 
  <label>thumb</label><input type="file" name="thumb" size="50"><br/> 
  <input type="submit" name="submit" value="Submit">
</form>

Then in your form handler, you can something like this (depending on your web framework):

for uploaded_file in request.FILES.getlist('files'):
    #do something with uploaded_file

Answer 3

Using the latest version of plupload, I was able to get the UploadQueue to work with GAE with this bit of code. Note, it is CoffeeScript, but should be easy to convert back to JavaScript if you really need to. It assumes you get a bit of json back from your server as {url:"gae generated url"}

    $("#fileUploader").pluploadQueue
        runtimes : 'html5,html4'
        use_query_string : false
        max_file_size : '3mb'
        multipart: true
        unique_names : true
        multiple_queues : true
        filters : [{title : "Image files", extensions : "jpg,gif,png"}]
        preinit:
            UploadFile: (up, file) ->
                $.ajax
                    url: '/api/upload/url'
                    async: false
                    success: (data) ->
                        up.settings.url = data.url