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.

Acis

What I ended up doing was creating two upload_url variables, since I only need two upload two files at once. The solution referenced by Karl is good if you have n files to upload (but it is not easy to implement). – Acis

Is there a reason you're asking the user to upload a thumbnail? Are you aware of get_serving_url, which will allow you to generate thumbnails from the full-size image? – Vulgarity

This is for an admin page, as a work-around to the fact that BlobStore only supports form POSTs (you can't store urls programaticaly). Having said that, I did not know about get_serving_url. Is that part of BlobStore? – Acis

I've been trying to get the plupload guys to support doing async work before each upload happens for a while. We're almost there. Follow it on github.com/moxiecode/plupload/issues/issue/73 – Equilibrant

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

Trier

The solution on Nick's blog is much more than I need. But the answer that's helpful here is "Each file needs its own unique upload url". – Acis

If each file needs its own unique upload url, why does BlobstoreUploadHandler.get_uploads() return a list of BlobInfo objects? It seems that the Blobstore is expecting a single image, but the BlobstoreUploadHandler seems to be designed to handle multiple images. – Pleach

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

Reidreidar

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

Shanteshantee