Ruby On Rails AJAX File Upload With Valum

Some sample code I wrote with Andrew Valums’s AJAX uploader script and Ruby On Rails.

Note; I use the prototype javascript library to manipulate the DOM during the onComplete event.

If you need any help getting this to work, simply use the comments below.

  function createUploader(){            
      var uploader = new qq.FileUploader({
          allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'], 
          element: document.getElementById('file-uploader-demo1'),
          action: '/vendor/products/12/upload',
          params: {
                 postid: '9999'
          },
          onComplete: function(id, fileName, responseJSON){
            if (responseJSON.success) {
              $$('.qq-upload-failed-text').first().update('Successfully Uploaded!');
            }
            else
            {
              $$('.qq-upload-failed-text').first().update('Hmm .. upload failed');
            }
          }
      });           
  }
  // in your app create uploader as soon as the DOM is ready
  // don't wait for the window to load  
  window.onload = createUploader;

and the ruby on rails code

  def upload
    @filename = params['qqfile']
    
    newf = File.open('assets/' + @filename, "wb")
    str =  request.body.read 
    newf.write(str)
    newf.close
    
    render :text => '{success:true}'
  end


8 Responses to “Ruby On Rails AJAX File Upload With Valum”

  1. sven says:

    Hi,

    in Firefox it works fine, but in IE8 doesn’t?

    Any idea?

    br, sven

  2. In ie8, params[:qqfile] doesn’t give the filename, but the actual file. So you can skip the treatment above.

  3. For those of you using jQuery, the Remotipart gem makes AJAX style file uploads relatively easy to implement:

    http://rubygems.org/gems/remotipart
    https://github.com/formasfunction/remotipart

  4. Any advise on how to get this to work with Paperclip? I am also using JQuery btw. I am trying to implement multi photo upload. I can send the filename as the parameter photo[photo], but Paperclip expects all of this to be sent:

    “photo”=>{“photo”=>#<ActionDispatch::Http::UploadedFile:0x7f2a00c97e18 @original_filename="myphoto.jpg", @tempfile=#, @headers=”Content-Disposition: form-data; name=\”photo[photo]\”; filename=\”myphoto.jpg\”\r\nContent-Type: image/jpeg\r\n”, @content_type=”image/jpeg”>}

    Both my model and the attactment are called photo.

  5. New Era Caps says:

    Great article, I think you covered everything there.

  6. kavs says:

    Hi,
    can any one write whole code for “Ruby On Rails AJAX File Upload With Valum” i.e create method view page,etc…

  7. New Era Snapback ajustable size, one size fits all. All New Era Snapback Hats are 1:1 quality, 100% cotton with original packing. We correct newest New Era Snapback Hats and Caps, and introduce the most reliable supplier in the whole market. The price will be the best and the service will be guaranteed. Move now!

    http://newerasnapback.com/

  8. Mr. Black says:

    I got a error in this line “str = request.body.read”.

    Error is:

    NoMethodError (undefined method `body’ for #):

    Please help to fix this error!!!

Leave a Reply

You must be logged in to post a comment.