#381 jQuery File Upload pro

Thanks for the awesome video, Ryan. Just a note.

jQuery File Upload is great, however it does not handle any sort of file upload for IE since:

a) IE doesn't support drag and drop
b) IE doesn't support selecting multiple files.

In the situation of IE, you just fall back to single file uploads, while things like progress bars do still work.

Edit: Sorry, I should state it will upload multiple files for IE, but you still have to select them one at a time.

That's a really great episode, thanks Ryan!

Although I am struggling to integrate this with nginx-upload-module.
( https://github.com/vkholodkov/nginx-upload-module/tree/2.2 )

Problem is, we need to have high throughput and are therefore using the nginx module to bypass Rails for uploading files and handle it directly via nginx.

It would be nice if anyone had a suggestion on how to combine the nice client side UI of jquery-file-upload and the backend of the nginx-upload-module ?

Any ideas?

I've noticed that JQuery file upload supports chunking and resumable uploads. It's hard to find any info on how to do that in Rails. Any hints?

Thanks for great episode, Ryan. I've been struggling with this library, trying to integrate it with Rails, but there were no docs and examples were too messy to understand.

I wonder, is it possible to use jQueryFileUpload in a "new" action of a controller with many nested pictures (good if it would even work with polymorphic associations)?Because, to create a picture under a gallery, it is required to have an id of a parent.. but in a new action a parent is not persisted in db yet and has no id.

A workaround for me was to create a parent model and to put a condition to use file upload only on "edit" action. I also masked "edit" link to "add pictures or edit" for users :-) But, I believe, there are better solutions. Any ideas?

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?

Thanks!

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)

Could this work with nested form attributes? For example a Product model that has_many :images.

x-tmpl is a dead project. This episode would have been better without using that template language. I would rather use jQuery file upload plugin with HTML5 and CarrierWave to implement the multiple file uploads with progress bar.

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?

Anyone had luck with using jQuery File Upload UI in Rails?

Someone know how put this work using nested_forms, for exemple products upload many photos in the products new form?

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?

Hmmm, no file seems to be chosen once I tied my file_field_tag to the id that fileupload uses. Anyone have similar issues?

The progress bar doesn't seem to finish when file uploaded. I'm trying to upload a single file.

Does anyone know how to change the file_field when dealing with nested attributes? The main table is users. each has_many images. The application works fine for uploading a single file (using carrierwave).

views/users/new.html.erb
<%= f.fields_for :images do |z| %>
<fieldset>
<p>
    <%= z.label :image_title %><br />
    <%= z.text_field :image_title %>
    <%= z.hidden_field :image_priority, :value => '1' %> 
  </p>
  <p>
    <%= z.file_field :image_location %>
  </p>
</fieldset>
<% end %>

The railscast says you should add a "multiple" option to file_Field and then "hardcode" the field name. So somthing like this:

<%= z.file_field :image_location, multiple: true, name: "images[image_location]" %>

This code works for me on Mac Os x, but when I deploy to Linux I receive a route error. 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

it seems that the application is not working (https://github.com/railscasts/381-jquery-file-upload/blob/master/gallery-after)

nothing happens when I select images

Has anyone used this with bootstrap modal ?, when I add a modal with fileupload not found.

Does anyone know how to load photos AFTER clicking the submit button in form?

I throw in my (in development) project that uses this tutorial:
https://github.com/vadviktor/fse-rails
I hope it helps some people out there to get some grip.

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

any suggestions?

Has anyone got this working with jQuery 1.9.0?

I did an gem update on jquery-rails and now getting the following error

Uncaught Error: Syntax error, unrecognized expression: ...

Sizzle.error

Would it be possible to have the progress bar appear in the div where the image will be appended? Something like this: http://dribbble.com/shots/919309-Uploader-Interaction-and-Animation

I have a question: I cannot get this to work for the 'update' action. 'new' works fine, but I use the same code for 'update' and I always get a redirect with a "Template is missing" error for there's no 'update.html.erb', only 'update.js.erb', which has the same code as 'create.js.erb'.

If I add in the "respond_to" block with "format.js", it won't act out what's on 'create.js.erb' but rather do a full reload and shows the updated picture.

How can we get the same ajax upload to work with the 'update' action?

Does anyone found a way to cancel a single upload ?

I did some research and I couldn't find the solution.

Thanks Mr Bates for your great screencasts.

I found that in Rails 4, setting name: in f.file_field didn't work: Rails appended [] to the end of the field name regardless. I had to replace this:

    <%= f.file_field :image, multiple: true, name: "painting[image]" %>

with plain HTML, like this:

    <input id="painting_image" multiple="multiple" name="painting[image]" type="file" />

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.

I generated a unique token (GUID) when a "New Gallery" form is displayed. 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.

https://github.com/dlehman/Rails-Carrierwave-jQuery-File-Upload

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'm also having issues implementing this soulution with nested forms, has anyone found a solution to this.

I've posted for help on stack overflow http://stackoverflow.com/questions/15599613/multiple-image-uploads-in-a-nested-form-with-carrierwave

In the end I dropped the jQuery file upload gem soloution all together & followed Episode #196 for uploading multiple images.

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. I'm currently ramping up an app which uses the jquery-fileupload / sidekiq combination. And it seems to work fine.

One thing I've encountered though is the use of the :after_save callback in your Painting model. Sometimes Sidekiq is so fast that the record has not yet been commited when the worker is already on it. So I've changed the :after_save to an :after_commit and everything was fine again.

Thanks again and keep up the great work!

Excuse me, I don't see any of your view files contains "id=new_painting", how does $("#new_painting").fileupload() work in painting.js.coffee?

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? If I create a migration preventing null values ​​in the column photo, an error occurs after upload:

Mysql2::Error: Column 'photo' cannot be null: INSERT INTO photos (created_at, project_id, photo, updated_at) VALUES ('2013-04-28 04:54:34', 19, NULL, '2013-04-28 04:54:34')

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.9 as Synthmax also mentioned.

In Firebug you'll see an this error when you try to upload a file:

Error: Syntax error, unrecognized expression:

I've found a solution to get the progress bar to work again.

Change the following line in your paintings.js.coffee:

data.context = $(tmpl("template-upload", file))

to:

data.context = $(tmpl("template-upload", file).trim()) if $('#template-upload').length > 0

Please let me know if this helps you

Does any one know, How can I remove progress bar after uploading the file?

Thank Ryan for this course.
Does any one can tell me how can i add UserMailer to js.erb file? or where i need to add UserMailer in controllers?(With this tutorial code)

Thanks everyone

Hello, this is a great course and is working perfectly but I am having trouble with Client-side Image Resizing. I followed:
https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing

I added 3 lines but it doesn't work
$("#fileupload").fileupload
disableImageResize: false
imageMaxWidth: 800
imageMaxHeight: 800
...

Does anyone have a working example?

Thank you for any help

I just tried running this code on my windows machine. While I can get the file upload to work on Firefox, IE and Safari browsers. It simply doesn't work in Chrome browser. When I select a file, neither the filename shows in the paintings page nor the file gets uploaded to the server. Anyone else faced a similar problem?

If you'r planning on using this plugin for the sole purpose of multiple uploads you may want to hold off for awhile. this plugin supports all modern browsers and IE10 up but IE8 and IE9 still total about 25% of browser usage across the globe.

Stats: http://gs.statcounter.com/#browser_version-ww-monthly-201207-201307-bar

this is as useful as tits on a bull, its dated and from the comments above doesn't seem to be working

Please update for Rails 4 kinda useless now.

Hey someone, I have made it a good way through this tutorial trying to make it work on rails 4, and have encountered a problem Im stuck at about 6mins 30 secs in. I think its my render partial, I have probably done something wrong, anyways I after upload images my render partial does not refresh, it adds the new image and all other images under the image that was already attached. So if I add two images to a new item it shows the first image, then renders the partial again with the first image and the second image under the first so there are 3 photos in total. I'm kinda lost any help would be great!

works pretty well for me but am trying to associate the photo to a particular user which i know how to, but how do i code the create, index and show action in the paintings controller?

Thanks for the useful screencast! Just wondering two things.

1. Is there any way to enable server side file size validation like: https://github.com/carrierwaveuploader/carrierwave/wiki/How-to%3A-Validate-attachment-file-size

2. Client side resizing doesn't seem to work for me.
   https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing

disableImageResize: false,
imageMaxWidth: 200,
imageMaxHeight: 200,

Does anyone have ideas?

I must be missing something obvious, but although I have got the basic version working fine, I can't figure out how to implement the UI version with all of the built in widgets. Does anyone know how?

Thanks in advance!

Has anyone figured out a way to do this with accepts_nested_attributes_for

Also looking for an answer as to how I can allow for multiple uploads attached to one object (nested attributes). Although its been asked about 20 times already...I'll ask it again, has anyone found a solution?

I think I have found a solution for (nested attributes) plain HTML5 multiple file uploads, with no tokens, hashes...etc

Please leave feedback

Multiple Files Upload With Nested Resource Using Paperclip in Rails

Hey All,

Bootstrap 3 modifications:

from:

data.context.find('.bar').css('width', progress + '%')

to:

data.context.find('.progress-bar').css('width', progress + '%')

And then

from:

<div class="progress"><div class="bar" style="width: 0%"></div></div>

to:

<div class="progress progress-striped"><div class="progress-bar" style="width: 0%"></div></div>

I hope this helps. I f'd around with this for hours install all new css, js files before it dawned on me to update the bootstrap css.

To Your Success!!! Mark

P.S.

My code is a little different:

First, I got carrierwave working as per 253-carrierwave-file-uploads

then..

jQuery ->
  $('#new_photo').fileupload
    dataType: "script"
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        data.context = $(tmpl("template-upload", file).trim()) if $('#template-upload').length > 0
        $('#new_photo').append(data.context)
        data.submit()
      else
        alert("#{file.name} is not a gif, jpeg, or png image file")
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.progress-bar').css('width', progress + '%')

<%= simple_form_for [@gallery, @photo], :html => { :class => 'form-vertical' } do |f| %>
        <h3>Upload Photos Here</h3>
        <p>You can select multiple files.</p>
        <%= file_field_tag(:image, multiple: true, name: "photo[image]") %>                
<% end %>

<script id="template-upload" type="text/x-tmpl">
<div class="upload">
  {%=o.name%}
  <div class="progress progress-striped"><div class="progress-bar" style="width: 0%"></div></div>
</div>
</script>

<div id="uploads">
        <%= render 'uploads' %>
</div>

<ul id="photos" class="inline"><%= render @photos %></ul>

<% if photo.id.present? %><li class="no-margin-padding pull-left"><a href="<%= photo.image_url() %>"><%= image_tag(photo.image_url(:icon)) if photo.image? %></a></li><% end %>

  def create
    #on Gallery using to_param with 'auth_tokens' for securing user interface
    @gallery = Gallery.where("auth_token = ?", params[:id].to_s).first
    @photo = @gallery.photos.create(photo_params)
    respond_to do |format|
      format.html { redirect_to :back, notice: "Thank you for uploading" }
      format.js
      format.json { render json: [@photo.to_jq_upload].to_json, status: :created, location: @photo }
    end
  end

 *= require jquery.fileupload-ui

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require jquery.fileupload-process
//= require photos

gem 'jquery-fileupload-rails'
gem "jquery-ui-rails"

My js replaces the elements on the dom with the correct code, however the new image doesn't render on the page. The file IS in the correct directory, and the paths match. When I reload the page the image will render.

Why is this happening and how can I fix it?

Thanks!

How can i enhance this code to Resumable Upload like youtube. This code is getting failed when the internet getting disconnect..
Plz give some suggestion..
Thanks!