Image upload with progress bar

rubyonrails-talk
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

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

4

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

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-paperclip-multiple-file-upload-and-atta

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

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 %>")

11

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?