Rails Carrier Wave mit JQuery Uploader

Ich verwende Rails Carrier Wave mit JQuery Upload wie hier Schienen-Tutorial, aber ich habe einen Fehler, wenn ich auf die Schaltfläche zum Hochladen klicke:

Error: SyntaxError: JSON.parse

Alle Ratschläge / Vorschläge sind sehr dankbar.

Warum nicht versuchen Hochladen?

Schritt 1

Hinzufügen gem 'carrier_wave' zu dir Gemfile.

Schritt 2

Speichern Sie diesen Code unter /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

Schritt 3

Bearbeiten session_store.rb und fügen Sie diesen Code am Ende der Datei hinzu:

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

Schritt 4

Herunterladen Hochladen und entpacken Sie es.

Schritt 5

1. Kopieren jquery.uploadify.v2.1.4.min.js und swfobject.js zu
   /app/assets/javascripts wenn Sie Rails 3.1 oder höher verwenden; zu
   /public/javascripts wenn Sie Rails 3.0 oder eine frühere Version verwenden.
2. Kopieren uploadify.swf und cancel.png zu /app/assets/images/ oder
   /public/images.
3. Kopieren uploadify.css zu /app/assets/stylesheets/ oder
   /public/stylesheets.

Schritt 6

Bearbeiten Sie Ihre application.js und fügen Sie sie unten ein:

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

Schritt 7

Fügen Sie auf Ihrer Upload-Seite Folgendes hinzu:

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

Schritt 8

Fügen Sie diesen Code zu Ihrem Upload-Skript hinzu:

$(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) {
    }
  });
});

Schritt 9

Schreiben Sie Ihren Controller so:

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

Notiz: Dies wurde mit Uploadify 2.1.4 getestet.

Hey, ich habe auch uploadify verwendet, aber dieses JS-Plugin benötigt kein Flash und ist ästhetisch ansprechender, auch bekannt als “hübscher”. Ich habe aus einigen Beispielen eine Demo-App erstellt,

Es ist ein einfacher Fall und Sie können viel daraus lernen:

https://github.com/jalagrange/bootstrap_uploader

Hoffe das hilft!