librelist archives

« back to archive

Multiple File uploads using flask

Multiple File uploads using flask

From:
pronoyc@gmail.com
Date:
2012-06-11 @ 21:02
Hello,

I've been trying this for a long time now, but how do I upload multiple
files in one go using Flask?


<form class="form" action="{{ url_for('upload_images') }}"
enctype="multipart/form-data" method="POST" >

			<label>Click on the button below and choose the files</label>
			<input type=file multiple name="file[]" class="span7" /><br />
			
			<label>Custom folder name</label>

			<input type=text class="span7" placeholder="Write a name of the
folder you'd like the images to be uploaded to" /><br />
			<input class="btn btn-primary" type="submit" value="Upload Images">			

</form>	



@app.route('/upload/images', methods=['GET','POST'])
def upload_images():
	if request.method == "POST":
		file =  request.files['file[]']	

		filename = secure_filename(file.filename)
		file.save(app.config['FILE_UPLOAD_PATH'] + filename)
	return render_template('upload_image_test.html')



Turns out the FileStorage object holds only one filename. How do I pass
multiple file objects or is there a way that I am missing, to iterate over
the object and retrive file names. Any help will be appreciated.


--
Regards,

Pronoy Chopra
http://blog.pronoy.in/
http://www.twitter.com/pronoyc

Re: [flask] Multiple File uploads using flask

From:
Jesse Dubay
Date:
2012-06-11 @ 22:12
Hello,

request.files is a MultiDict, so you should be able to get a list of
FileStorage objects with:

    request.files.getlist('file[]')

Also, the [] brackets aren't necessary on that field name, but that's
just nitpicking :)

Jesse

On Mon, Jun 11, 2012 at 2:02 PM, pronoyc@gmail.com <pronoyc@gmail.com> wrote:
> Hello,
>
> I've been trying this for a long time now, but how do I upload multiple
> files in one go using Flask?
>
>
> <form class="form" action="{{ url_for('upload_images') }}"
> enctype="multipart/form-data" method="POST" >
>
>
> 			<label>Click on the button below and choose the files</label>
> 			<input type=file multiple name="file[]" class="span7" /><br />
> 			
> 			<label>Custom folder name</label>
>
>
> 			<input type=text class="span7" placeholder="Write a name of the folder
> you'd like the images to be uploaded to" /><br />	
> 			<input class="btn btn-primary" type="submit" value="Upload Images">			
>
>
> </form>	
>
>
>
> @app.route('/upload/images', methods=['GET','POST'])
> def upload_images():
> 	if request.method == "POST":
> 		file =  request.files['file[]']	
>
>
> 		filename = secure_filename(file.filename)
> 		file.save(app.config['FILE_UPLOAD_PATH'] + filename)
> 	return render_template('upload_image_test.html')
>
>
>
> Turns out the FileStorage object holds only one filename. How do I pass
> multiple file objects or is there a way that I am missing, to iterate over
> the object and retrive file names. Any help will be appreciated.
>
>
> --
> Regards,
>
> Pronoy Chopra
> http://blog.pronoy.in/
> http://www.twitter.com/pronoyc

Re: [flask] Multiple File uploads using flask

From:
pronoyc@gmail.com
Date:
2012-06-11 @ 22:19
Wow


> request.files is a MultiDict, so you should be able to get a list of
> FileStorage objects with:
>
>    request.files.getlist('file[]')
>

It works! Thank you so much!

-- 
Regards,

Pronoy Chopra
http://blog.pronoy.in <http://www.pronoy.in/about>/
http://www.twitter.com/pronoyc

Re: [flask] Multiple File uploads using flask

From:
pronoyc@gmail.com
Date:
2012-06-12 @ 08:44
Is there a error or some callback when the file has be successfully
uploaded? I am using the file.save() method and it returns None on being
successful. How do I check if the image is uploaded. Do I do a directory
listing check or can I get a confirmation through the Werkzeug methods?

<code>
@app.route('/upload/images', methods=['GET','POST'])
def upload_images():
if request.method == "POST":
 #file = request.files['file']
#print file
 for file in request.files.getlist('file'):
 if file and allowed_file(file.filename):
 filename = secure_filename(file.filename)
back = file.save(os.path.join(app.config['UPLOADED_FILES_DEST'], filename))
 print back
sleep(5)
</code>


-- 
Regards,

Pronoy Chopra
http://blog.pronoy.in <http://www.pronoy.in/about>/
http://www.twitter.com/pronoyc

Re: [flask] Multiple File uploads using flask

From:
Simon Sapin
Date:
2012-06-12 @ 10:02
Le 12/06/2012 10:44, pronoyc@gmail.com a écrit :
> Is there a error or some callback when the file has be successfully
> uploaded? I am using the file.save() method and it returns None on being
> successful. How do I check if the image is uploaded. Do I do a directory
> listing check or can I get a confirmation through the Werkzeug methods?

If anything goes wrong, you will most likely get an exception. So 
some_file.save() returning at all means success.

-- 
Simon Sapin

Re: [flask] Multiple File uploads using flask

From:
pronoyc@gmail.com
Date:
2012-06-12 @ 11:17
Thanks Simon,

Another question. Now that I have successfully uploaded the images, I am
now retrieving them from the directory using this code

@app.route('/uploads/<filename>')def retrieve_files(filename):
    return send_from_directory(app.config['UPLOADED_FILES_DEST'],filename)


Now a couple of questions arise:
1. If I need to embed the file in the <img> tags in the templates, how do I
do that? can the source be like how the css is provided? so the overall
src="/static/img/uploadedmedia/foo/abc.png"
2. I am running my app on Heroku, how do I serve static content?
3. How do I retrieve the URL of where the image has been uploaded so that a
media viewer like that of wordpress can be shown to the user?


-- 
Regards,

Pronoy Chopra
http://blog.pronoy.in <http://www.pronoy.in/about>/
http://www.twitter.com/pronoyc

Re: [flask] Multiple File uploads using flask

From:
Simon Sapin
Date:
2012-06-12 @ 12:00
Le 12/06/2012 13:17, pronoyc@gmail.com a écrit :
> @app.route('/uploads/<filename>')
> def  retrieve_files(filename):
>      return  send_from_directory(app.config['UPLOADED_FILES_DEST'],filename)
>
>
> Now a couple of questions arise:
> 1. If I need to embed the file in the <img> tags in the templates, how
> do I do that? can the source be like how the css is provided? so the
> overall src="/static/img/uploadedmedia/foo/abc.png"

What you put in the src attribute of <img> elements in HTML is not the 
filename of the image on your server, but the URL. For the above route, 
it would be something like <img src="/uploads/foo.png">. However it is 
good practice to avoid hard-codings paths like /upload/ in your 
templates. Assuming you are using Jinja, try this instead:

<img src="{{ url_for('retrieve_files', filename='foo.png') }}">

See http://flask.pocoo.org/docs/api/#flask.url_for


> 2. I am running my app on Heroku, how do I serve static content?

The retrieve_files you have above should just work, but there are other 
ways that may be more efficient. I don’t know, I never used Heroku. But 
they probably have docs on the subject.


> 3. How do I retrieve the URL of where the image has been uploaded so
> that a media viewer like that of wordpress can be shown to the user?

I don’t understand. How is WordPress relate to your Flask application?

-- 
Simon Sapin

Re: [flask] Multiple File uploads using flask

From:
pronoyc@gmail.com
Date:
2012-06-12 @ 12:52
>
> What you put in the src attribute of <img> elements in HTML is not the
> filename of the image on your server, but the URL. For the above route,
> it would be something like <img src="/uploads/foo.png">. However it is
> good practice to avoid hard-codings paths like /upload/ in your
> templates. Assuming you are using Jinja, try this instead:
>
> <img src="{{ url_for('retrieve_files', filename='foo.png') }}">
>
> See http://flask.pocoo.org/docs/api/#flask.url_for


Yes thanks, I was doing the same thing, except I thought there might be a
different way to embed the image.


I don’t understand. How is WordPress relate to your Flask application?
>

Oh, well, I am using TinyMCE editor to format the text. Now I need to put
images in the post. So, I thought I could create something like the WP
media viewer, with simple functionality. e.g Embed image would lead to
opening a popup/modal where a person could see the uploaded images and
accordingly select which one he wants to embed. Once having done that, the
url for that image would get copied on the clipboard or directly put into
the post.

That was my intention. So that brings back the question, how do I see the
list of all images uploaded and what if some are in a sub directory? Is
there a straight forward method because I know it can be done through a
simple hack?


-- 
Regards,

Pronoy Chopra
http://blog.pronoy.in <http://www.pronoy.in/about>/
http://www.twitter.com/pronoyc

Re: [flask] Multiple File uploads using flask

From:
Ib Lundgren
Date:
2012-06-12 @ 12:50
Think Heroku recommends simply serving static content as you mentioned
Simon and that if you want a more optimized way use a content provider such
as Amazon S3 or Akamai.

Pronoy, you might run into problems with file uploads on Heroku since they
only allow temp files. Check out
https://devcenter.heroku.com/articles/s3for information of how you can
push your uploaded files to Amazon S3.

On Tue, Jun 12, 2012 at 2:00 PM, Simon Sapin <simon.sapin@exyr.org> wrote:

> Le 12/06/2012 13:17, pronoyc@gmail.com a écrit :
> > @app.route('/uploads/<filename>')
> > def  retrieve_files(filename):
> >      return
>  send_from_directory(app.config['UPLOADED_FILES_DEST'],filename)
> >
> >
> > Now a couple of questions arise:
> > 1. If I need to embed the file in the <img> tags in the templates, how
> > do I do that? can the source be like how the css is provided? so the
> > overall src="/static/img/uploadedmedia/foo/abc.png"
>
> What you put in the src attribute of <img> elements in HTML is not the
> filename of the image on your server, but the URL. For the above route,
> it would be something like <img src="/uploads/foo.png">. However it is
> good practice to avoid hard-codings paths like /upload/ in your
> templates. Assuming you are using Jinja, try this instead:
>
> <img src="{{ url_for('retrieve_files', filename='foo.png') }}">
>
> See http://flask.pocoo.org/docs/api/#flask.url_for
>
>
> > 2. I am running my app on Heroku, how do I serve static content?
>
> The retrieve_files you have above should just work, but there are other
> ways that may be more efficient. I don’t know, I never used Heroku. But
> they probably have docs on the subject.
>
>
> > 3. How do I retrieve the URL of where the image has been uploaded so
> > that a media viewer like that of wordpress can be shown to the user?
>
> I don’t understand. How is WordPress relate to your Flask application?
>
> --
> Simon Sapin
>

Re: [flask] Multiple File uploads using flask

From:
pronoyc@gmail.com
Date:
2012-06-12 @ 12:57
>
> Think Heroku recommends simply serving static content as you mentioned
> Simon and that if you want a more optimized way use a content provider such
> as Amazon S3 or Akamai.


I don't know if this question is relevant, can we use a service like
CloudFlare. Currently the application is in the testing period so I am
looking for free options.


> Pronoy, you might run into problems with file uploads on Heroku since they
> only allow temp files. Check out 
https://devcenter.heroku.com/articles/s3for information of how you can 
push your uploaded files to Amazon S3.
>

Will do, thanks a lot. Otherwise, I have other things in mind:
Use Github or Dropbox (except I haven't been able to locate the Dropbox API)


-- 
Regards,

Pronoy Chopra
http://blog.pronoy.in <http://www.pronoy.in/about>/
http://www.twitter.com/pronoyc

Re: [flask] Multiple File uploads using flask

From:
pronoyc@gmail.com
Date:
2012-06-12 @ 13:34
>
> Will do, thanks a lot. Otherwise, I have other things in mind:
> Use Github or Dropbox (except I haven't been able to locate the Dropbox
> API)
>

Found the Dropbox API<https://www.dropbox.com/developers/start/files#python>


-- 
Regards,

Pronoy Chopra
http://blog.pronoy.in <http://www.pronoy.in/about>/
http://www.twitter.com/pronoyc