Upload image to google cloud store through a web page form python, google app engine, angularjs

Question

First let me say,

I think I've read every stack exchange post that seemed relevant to this topic.*

What I'm trying to do:

1. I'm trying to allow certain users to send an image to google cloud storage through a form on my site..
2. Another requirement along with sending that image to the cloud storage,is, I need to create a model of that image in the datastore, with it's relevant attributes.

I'm not sure what the best way to go about this is because..

Approaches I've read about:

There's a bunch of approaches for getting images to the cloud storage:

• through the blobstore api
• through the python client for cloud storage: https://cloud.google.com/appengine/docs/python/googlecloudstorageclient/#Python_About_the_client_library
• through rest api (I was considering a json approach)https://cloud.google.com/storage/docs/json_api/v1/how-tos/upload#simple

I've read a lot of conflicting information,

and I've read so much I can't keep it straight,

however,

I think the resolution was:

For blobstore:

1. The blobstore.uploadtocloudstoragethingmethod may or may not have a file upload limit size (no that's not the actual call or method name) 2. The blobstore method sounded like it's going to be phased out??

For Jason API:

"However, the client library includes App Engine optimizations, so using the REST API might require extra development time. Note: The App Engine development server supports the Cloud Storage Client. It doesn't support the REST API."

For the client library:

I don't know. It looks fine so far. Here is the method I'm thinking about using:

"cloudstorage.open(filename, mode='r', content_type=None, options=None, read_buffer_size=storage_api.ReadBuffer.DEFAULT_BUFFER_SIZE, retry_params=None)

In read mode (r) opens the specified Cloud Storage object for read. In write mode w, if the specified file exists, it opens it for an overwrite (append is not supported). If the file doesn't exist, it is created in the specified bucket."

The stuff I'm using:

1. Google App Engine
2. Python (for handlers, models,etc)
3. angularjs and jquery (front end)
4. json sometimes (backend)
5. GAE boilerplate (don't ask)

What I think I'm gonna do :

1. Get the user's image:

So, I found this form which I tested. It does grab a file from your computer:

<form action="<?php echo $upload_url?>" enctype="multipart/form-data"
method="post">
Files to upload: <br>    <input type="file" name="uploaded_files"    size="40">    <input type="submit" value="Send">

(No, I can't use the, the php junk in the action. I took it from some place in the docs, but I tested it, it does grab a file, no it won't send, and it would be silly to expect it to)

2. Modify my current handler (which takes care of creating a model of the image in the datastore) to also use

this method:

"cloudstorage.open(filename, mode='r', content_type=None, options=None, read_buffer_size=storage_api.ReadBuffer.DEFAULT_BUFFER_SIZE, retry_params=None)

In read mode (r) opens the specified Cloud Storage object for read. In write mode w, if the specified file exists, it opens it for an overwrite (append is not supported). If the file doesn't exist, it is created in the specified bucket."

My Problems so far

I don't know how that form works, and I don't know how to get the right information from this form to a handler, and what info that handler will need, so I can process it, create the model (I already know how to create the model in the data store, already doing so), and also send the image to the google cloud storage with this method:

"cloudstorage.open(filename, mode='r', content_type=None, options=None, read_buffer_size=storage_api.ReadBuffer.DEFAULT_BUFFER_SIZE, retry_params=None)

In read mode (r) opens the specified Cloud Storage object for read. In write mode w, if the specified file exists, it opens it for an overwrite (append is not supported). If the file doesn't exist, it is created in the specified bucket."

Can anyone give me an example? I can't find any good relevant posts or docs on what to put in the form such that it will grab the file, grab the other form data that the user fills in, and then ends up sending the image to the google cloud storage.

--UPDATE-- :

So, right after posting this, I googled gcs.open, which led to this post:

how to upload image to the cloud storage via app engine?

I believe this could do the trick as far as backend goes, I do have one question left.

To repaste the question:

Questions:

1. I don't know what the image name will be, I'd like to use the the existing one, or perhaps a random one. Suggestions?

2. Where do I stick this: enctype="multipart/form-data" ?

3. will number 2. mess with my other form data? I need more info than just this image in the post request

Answer 1

To answer your questions:

1. I don't know what the image name will be, I'd like to use the the existing one, or perhaps a random one. Suggestions?

I don't think that really matters, just make sure to think about possible name clashes and what would happen then. I think this mostly depends on the needs of your application. You can always use a random filename and retain the actual filename in the datastore next to a reference to the Cloud Storage item.

2. Where do I stick this: enctype="multipart/form-data" ?

Enctype is a form attribute and so needs to be set on the form element in your HTML:

<form enctype="multipart/form-data" action="/save" ... >

3. will number 2. mess with my other form data? I need more info than just this image in the post request

No it should not. Just add more form input fields and they will all be submitted with the form data.

Answer 2

You can also use a signed form for a direct upload to GCS. This way you do not need the blobstore or a post handler. And you can control the timeout and objectname using a policy document. See my aswer here.