Image upload with progress bar

Rails
1

Hello there,

I try already third day to find a way, how to improve my upload about
progress bar. I use for upload of images the paperclip gem and in my app
jQuery library.

Could anyone give me, please, any help or tip, how to do? I tried to
search, read a discussions, but I still don’t know, how to do…

So, thank you so much for every advice.

2

Hi!

A found this on google:
http://railsillustrated.com/screencast-file-uploads-progress-in-rails-passenger.html

Best Regards,
Everaldo

3

Hi!

I hadn’t noticed this tutorial was too old until sending the e-mail.

I searched a little bit more and found this:
http://blog.bitcrowd.net/uploadify-paperclip-rails-3-and-sessions/

They use flash (Uploadify) with JQuery, but mostly of the answers points
this way.

Best Regards,
Everaldo

4

Thank you Everaldo,

well, probably I will try it, but in the best way, I would like to try
some way with jQuery…
This is a bit worse to find some good source

5

Manny 777 wrote in post #1020917:

Thank you Everaldo,

well, probably I will try it, but in the best way, I would like to try
some way with jQuery…
This is a bit worse to find some good source

Hi, this is what I use: http://aquantum-demo.appspot.com/file-upload

It is relatively simple and does not require any flash for the progress
bar like other plugins do.

It offers two ways to do it, one with some defined UI (and more jquery
dependencies) and then a basic one where you take care of the styling.
It has a lot of options.

I use the last one to reduce dependency. I don’t use paperclip or
carrierwave to handle the upload. In my case I just take the file and
store it myself in the cloud.

I know just the link doesn’t help that much but it depends a lot on how
you want to implement it. In my case I wanted to upload a pic, see the
progress, be able to cancel and see it as a preview before a bigger form
was sent. Then I wanted to be able to change the pic in the middle, etc.

From the ones I checked this was the best for my case. There’s some
examples in the wiki and the guy who runs it helped me quickly when I
ran into a problem.

Maybe you can take a look at it.
Note that the progress information didn’t really show moving before it
was in the real server, locally didn’t move.

Cheers.

6

I posted a tut at:

http://boneheadcode.posterous.com/html5-multiple-file-upload-rails-edition

that includes a %counter, so a progress bar wouldn’t be too much of a
stretch.

7

Hi Ron,

thank you for link. I tried to update my code by your tutorial and I
bumped on 2 problems.

The first one - if I will send the form with data, so all of my session
variables will be destroyed.
The second one - I don’t know why, but co-working between the form and
paperclip plugin not works. Text data are stored into DB table, but the
image is not uploaded.

In my model (photo.rb) I have:

has_attached_file :photo

and in JS:
qp.album_id = document.getElementById(‘photo_album_id’).value;
qp.attachment_model_name = ‘photo’;
qp.attachment_model_id = null;
qp.file_model = ‘photo’;

Could you help me, please, where could be a problem? I am struggling
with this problem the whole weekend, but I still don’t know, why it
doesn’t work me…

Thank you million times!

8

Ok,
so the second problem I solved.

But I still don’t understand, why if I send a form are all of session
variables destroyed…
Have anyone an idea, please, where could be a problem?

Thanks

9

Do all kinds of form uploads, even those without multipart data, destroy
your session variables? If so, then it doesn’t sound like the photo
upload is the root of the problem.

10

I tried to debug my script and all session variable are destroyed in a
moment, when I click on the button “upload” (that run the function
runit()) - I am not sure, could be here the problem?

11

Well, I’m now a bit confused - in your tutorial - you don’t use the
“form” - there are only input tags, without start & stop mark of form
(there is nothing like “<%= form_tag({ :controller => ‘photos’, :action
=> ‘upload’ }, { :multipart => true, :remote => true}) do %>”)