Rails carrierwave file upload progress bar

All we need to do here is call fileupload on the new paintings form after the DOM has loaded. When we reload the page now our file upload form has some extra functionality, although it looks the same.

To accomplish this we first need to customize the file uploader. The dataType option determines the type of data that the uploader expects back from the server. This approach usually leads to duplication on the client and server and it can be easier in these situations to work with JavaScript instead. Using script as the data type means that we can return a script from the server and it will be executed after the file uploads.

This template is fairly simple. First we check to see if the painting is a new record. We can try this out now by reloading the page then adding a couple of files. When we do so the new images automatically appear in the gallery without us having to reload the page. To work around this we can set some default values based on the files that are uploaded. If we were running it across a slow connection then it could be minutes before the files appear in the gallery so we should provide some feedback to the user during this time.

This will need to be all on the client which means that for convenience it would be nice if we had some way to render a client-side template. This library is included within the jQuery File Upload gem and it will easily allow us to render out a template which is embedded inside the HTML. The rest of the code in here is just some div s to handle displaying the progress bar. CarrierWave has a broad range of configuration options, which you can configure, both globally and on a per-uploader basis:.

If you want CarrierWave to fail noisily in development, you can change these configs in your environment file:. It's a good idea to test your uploaders in isolation. In order to speed up your tests, it's recommended to switch off processing in your tests, and to use the file storage. In Rails you could do that by adding an initializer with:. Remember, if you have already set storage :something in your uploader, the storage setting from this initializer will be ignored.

If you need to test your processing, you should test it in isolation, and enable processing only for those tests that need it. Processing can be enabled for a single version by setting the processing flag on the version like so:. If you want to use fog you must add in your CarrierWave initializer the following lines. Ensure you have it in your Gemfile:.

For the sake of performance it is assumed that the directory already exists, so please create it if it needs to be. Here's a full example:.

That's it! Note : for Carrierwave to work properly it needs credentials with the following permissions:. Fog is used to support Rackspace Cloud Files. You'll need to configure a directory also known as a container , username and API key in the initializer.

For the sake of performance it is assumed that the directory already exists, so please create it if need be. You can optionally include your CDN host name in the configuration. This is highly recommended, as without it every request requires a lookup of this information. Fog is used to support Google Cloud Storage. You'll need to configure a directory also known as a bucket and the credentials in the initializer.

You can still use the CarrierWave::Uploader url method to return the url to the file on Google. Since Carrierwave doesn't know which parts of Fog you intend to use, it will just load the entire library unless you use e. If you prefer to load fewer classes into your application, you need to load those parts of Fog yourself before loading CarrierWave in your Gemfile. Beware that this specific require is only needed when working with a fog provider that was not extracted to its own gem yet.

A list of the extracted providers can be found in the page of the fog organizations here. If you're uploading images, you'll probably want to manipulate them in some way, you might want to create thumbnail images for example. CarrierWave comes with a small library to make manipulating images with RMagick easier, you'll need to include it in your Uploader:.

You can set a process callback, which will call that method any time a file is uploaded. There is a demonstration of convert here. Convert will only work if the file has the same file extension, thus the use of the filename method. Check out the manipulate! This allows you to have the power of ImageMagick without having to worry about installing all the RMagick libraries. Currently, the MiniMagick carrierwave processor provides exactly the same methods as for the RMagick processor.

See the documentation for CarrierWave::Compatibility::Paperclip for more details. The Active Record validations use the Rails i18n framework. Add these keys to your translations file:. The carrierwave-i18n library adds support for additional locales. By default, CarrierWave copies an uploaded file twice, first copying the file into the cache, then copying the file into the store. For large files, this can be prohibitively time consuming. By default, mounting an uploader into an ActiveRecord model will add a few callbacks.

For example, this code:. If you want to skip any of these callbacks eg. In addition to the ActiveRecord callbacks described above, uploaders also have callbacks. Uploader callbacks can be before or after the following events:. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

Skip to content. Star 8. Classier solution for file uploads for Rails, Sinatra and other Ruby web frameworks github. Branches Tags. Could not load branches. Hi, How would you implement this with a nested resource. For example I have a form for a item with nested pictures. How can I implement the fileupload method to the items form?

Would be awesome to see how to create our own 'folder', and how to see files be placed inside of folders. I have already achieved the same effect from this video on my own a few months ago with jQuery File Upload, and I was still interested on how to see some type of folder abstraction integrated alongside. And i don't mean uploading a folder. I mean you can create a Folder object, which has files on the inside, so it follows some sort of directory managing.

This episode would have been better without using that template language. I've done this. I was having difficult getting templates to work, probably with haml, I don't really know, but the solution wasn't difficult once you realize there's no magic happening in the tmpl function.

In place of data. That function can build up the html element for the status bar from hardcoded html in strings, jquery methods, handlebars templates, or - as I've done - by cloning a hidden element basically a poor-man's template. Like many other commenters have already asked, anyone have a decent pattern they can offer for handling nested resources? Imagine if this "painting" actually belonged to an "album" resource.

I'd like the ability to upload paintings right on the form where I create the album. If the album isn't created until i submit the form, how can I create painting records as they are uploaded? I use the JQuery file upload but just allowing one file to be selected.

If the file is just part of a object, say user. So the user can upload a single picture to the user object. I don't want to create a new record when a file is uploaded, simply update a field. How does one accomplish that? Anyone have similar issues? Yeah, seems to be a problem with Chrome. On other browsers it does work for me. What browser are you using? Update: gem update jquery-fileupload-rails and clearing my cache seems to have fixed this for me.

I went without the UI version and it worked. I guess the UI version makes quite a lot of decisions for you. So plz give me your code. The main table is users. The application works fine for uploading a single file using carrierwave. So somthing like this:. Why it happens? Did anybody actually make it work in google or firefox? As soon, has I upload the picture in firefox the items get created but the image don't upload anymore.

Google doesn't even function on it. I am developing a site right now using this tutorial and everything works fine. Maybe you have some dependencies unsolved on OS side.

Just wondering if anybody else has tried this on mobile i. When I try to upload multiple files from iPad, let's say I select 3 pictures, it uploads the first picture 3 times.

Bobby, Daniel, did you ever figure out a solution to this? I can't get around this on the mobile web myself. If I upload more than one image file, only one of the images is uploaded multiple times.

I'm not sure what version of jquery-rails used to produce this error, but it looks like there's an issue with jquery-rails version 2. I downgraded to jquery-rails version 2. Thanks for the fix! Can you explain why this worked or what changed to cause the error in the first place? Would it be possible to have the progress bar appear in the div where the image will be appended?

I have a question: I cannot get this to work for the 'update' action. Actually, I found that the problem is that I have the edit form dynamically generated via ajax, so that the ". How to bind custom functions to dynamically loaded elements? I found that in Rails 4, setting name: in f. I had to replace this:. Same for me, although not even limited to Rails 4. I'm running 3. Same here under 3. This answer helped me out a ton. My problem occurred when upgrading from Rails 3. The fix is to specify paramName.

I had the same perennial desire to be able to add images to a gallery without having to save it first. I found a sample app demo of jquery-file-upload using carrierwave on GitHub that did almost what I wanted.

I added the ability to be able to add images before the gallery record had been saved. This token is saved with each image as it's uploaded and saved as an independent "Picture" record. When the gallery is finally saved, it finds any Picture records with the matching token, and adds them as children.

Note: if you upload images, but abandon the form before saving it, you do get orphaned pictures. You would need to clean these up periodically. I downloaded the example and ran it without any luck, seems like something is broken. Tried with Chrome and Safari. When dropping files, nothing happens, when adding files from the dialog, nothing happens.

Can someone confirm or am I missing something. I updated rails to 3. I'm also having issues implementing this soulution with nested forms, has anyone found a solution to this.

After the download completes and the paintings appear in the list via the javascript callback , if I click on a painting to show the show page, and then click "back" in my browser, the index page shows the paintings without the most recent additions until I refresh it. This makes sense, because the cached version of the page didn't have the extra divs added by the javascript. Is there some way I could make the invalidate the cache for this page so it shows the newer uploads too without manually reloading it via the browser?

Hey Ryan, thanks for this great episode. And it seems to work fine. Sometimes Sidekiq is so fast that the record has not yet been commited when the worker is already on it. It does the same thing for the IDs for various inputs. I followed this video tutorial and every time I'm uploading photos, an additional line with NULL value to all columns is being created.

So if I upload 3 photos are created four lines at database table, three OK and one null. Has anyone experienced the same problem or any idea where I could have been wrong? I found the problem, I just don't need to submit the form, because jquery file uploader does it automatically after selecting photos.

Then, when I submit, no photos are being sent through the form, then create method is trying to save null. Today I had some issues getting the progress bar to work as described by Ryan in this screencast. There seems to be an incompatibilty with jQuery 1. Thank Ryan for this course.