Rails Carrier Wave with JQuery Uploader

Question

I am using Rails Carrier Wave with JQuery Upload like on this rails tutorial, but I am having an error when I hit the upload button :

Error: SyntaxError: JSON.parse

Any advise/suggestions are much appriciated.

edited your post : please use plain text instead of image links, especially with such short error messages ( if your link breaks, your question won't be understandable anymore ). Moreover, it will be simpler to help you if you give more information, like actual code (ui scripts, controller action...) — m_x, Dec 03 '11 at 15:45

score 22 · Accepted Answer · edited Jan 08 '13 at 17:13

Why not try Uploadify?

Step 1

Add gem 'carrier_wave' to you Gemfile.

Step 2

Save this code to /lib/flash_session_cookie_middleware.rb:

require 'rack/utils'

class FlashSessionCookieMiddleware
  def initialize app, session_key = '_session_id'
    @app = app
    @session_key = session_key
  end

  def call env
    if env['HTTP_USER_AGENT'] =~ /^(Adobe|Shockwave) Flash/
      request = Rack::Request.new env
      env['HTTP_COOKIE'] = [@session_key, request.params[@session_key]].join('=').freeze unless request.params[@session_key].nil?
      env['HTTP_ACCEPT'] = "#{request.params['_http_accept']}".freeze unless request.params['_http_accept'].nil?
    end

    @app.call env
  end
end

Step 3

Edit session_store.rb and add this code to the end of file:

Rails.application.config.middleware.insert_before(
  ActionDispatch::Session::CookieStore,
  FlashSessionCookieMiddleware,
  Rails.application.config.session_options[:key]
)

Step 4

Download Uploadify and unzip it.

Step 5

Copy jquery.uploadify.v2.1.4.min.js and swfobject.js to /app/assets/javascripts if you use Rails 3.1 or later; to /public/javascripts if you use Rails 3.0 or an earlier version.
Copy uploadify.swf and cancel.png to /app/assets/images/ or /public/images.
Copy uploadify.css to /app/assets/stylesheets/ or /public/stylesheets.

Step 6

Edit your application.js and insert below:

//= require swfobject
//= require jquery.uploadify

Step 7

In you upload page, add this:

<input id="uploadify" name="uploadify" type="file"/>

Step 8

Add this code to you upload script:

$(document).ready(function() {
  <% key = Rails.application.config.session_options[:key] %>
  var uploadify_script_data = {};
  var csrf_param = $('meta[name=csrf-param]').attr('content');
  var csrf_token = $('meta[name=csrf-token]').attr('content');
  uploadify_script_data[csrf_param] = encodeURI(encodeURIComponent(csrf_token));
  uploadify_script_data['<%= key %>'] = '<%= cookies[key] %>';

  $('#uploadify').uploadify({
    uploader        : '/assets/uploadify.swf',
    script          : '/photos',
    cancelImg       : '/images/cancel.png',
    auto            : true,
    multi           : true,
    removeCompleted     : true,
    scriptData      : uploadify_script_data,
    onComplete      : function(event, ID, fileObj, doc, data) {
    }
  });
});

Step 9

Write your controller like this:

def create
  @photo = Photo.new image: params[:file_data]
  @photo.save
end

Note: This was tested with Uploadify 2.1.4.

I suppose because CarrierWave doesn't take 8 steps to get working :p — Kirill, Dec 08 '11 at 02:23
Can you expand on Step 9? I'm getting a HTTP Error. How do I know it is returning correctly? — RyanJM, Feb 29 '12 at 20:50
Seems like the free version only supports flash, therefore won't use it. — Yossi Shasho, Aug 25 '13 at 14:54

score 0 · Answer 2 · answered Aug 24 '12 at 19:18

Hey I was also using uploadify, but this JS plugin does not require Flash and is more aethetically pleasing aka "prettier". I created a demo app out of some examples,

Its a simple case and you can learn a lot from it:

https://github.com/jalagrange/bootstrap_uploader

Hope this helps!