在heroku上使用Rails 3和回形针上传多个文件 [英] Multiple files upload with Rails 3 and paperclip on heroku

问题描述

我的 Rails 3 应用程序需要一个界面来将多个文件上传到 Amazon S3(因为我使用的是 heroku)，可能还有进度条.

I need an interface on my Rails 3 app to upload multiple files to Amazon S3 (because i'm on heroku), possibly with progress bars.

我已经轻松管理如何设置回形针和上传单个文件，但现在我真的不知道如何继续.

I've easily managed how to set up paperclip and upload single files, but i'm really lost now on how to go ahead.

你能给我一些建议吗?我在整个互联网上搜索了 2 天，但找不到可行的解决方案

Please can you give me some advices? It's 2 days i'm searching across all the internet, but i can't find a working solution

** 编辑 **

我真的无法理解...我快疯了，因为我在这件事上浪费了太多时间...请帮助我.如果我尝试打开 Johnny 引用的示例应用程序，我只会得到这个(在我的应用程序中它是相同的):

I really can't understand... I'm going mad 'cause I'm losing too many hours on this... please help me. If I try to open the example app cited by Johnny I only get this (and in my app it is the same):

用户界面在哪里?我的浏览器有问题吗?

Where is the UI? Is there something wrong on my browser?

** 编辑 2 **

在 GitHub 上你可以找到我的 testapp...请你解释一下为什么该死上传UI不显示?谢谢！

Here on GitHub you can find my testapp... please can you explain me why the damn upload UI is not showing up? Thanks!

** 编辑 3 **

非常感谢Johnny，我不知道jquery 和prototype 不能共存.现在插件正确显示，但作为尝试上传的内容，它创建了一个新的上传"记录，但其附件字段为空，并且文件不在 s3 上.

Thank you very much Johnny, i wasn't aware of the fact that jquery and prototype can't live together. Now the plugin is showing up correctly, but as a try to upload something it creates a new "upload" record, but its attachment field is blank, and the files are not on s3.

控制台是这样说的:

Started POST "/uploads" for 127.0.0.1 at 2011-06-27 16:17:22 +0200
  Processing by UploadsController#create as JSON
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"GesRBTiZR1f2LV/bAeAdxWqF++gxcDJw4pPGStYGsH8=", "upload"=>{"attachment"=>[#<ActionDispatch::Http::UploadedFile:0x000001032834b8 @original_filename="animal-tiger-66550.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"upload[attachment][]\"; filename=\"animal-tiger-66550.jpg\"\r\nContent-Type: image/jpeg\r\n", @tempfile=#<File:/var/folders/Qj/QjEqvUUNGTmuki5SXOaaG++++TI/-Tmp-/RackMultipart20110627-1818-1syiex9>>]}}
  AREL (0.5ms)  INSERT INTO "uploads" ("attachment", "created_at", "updated_at", "attachment_file_name", "attachment_content_type", "attachment_file_size", "attachment_updated_at") VALUES (NULL, '2011-06-27 14:17:23.049136', '2011-06-27 14:17:23.049136', NULL, NULL, NULL, NULL)
[paperclip] Saving attachments.
Completed 200 OK in 64ms (Views: 4.2ms | ActiveRecord: 0.7ms)

推荐答案

可以看 jQuery-File-Upload.演示 此处 和 rails 3/Paperclip 设置 这里.

You can look at jQuery-File-Upload. Demo here and rails 3/Paperclip setup here.

编辑:正如@a​​pneadiving 提到的，该库已更新到第 5 版.您拥有的脚本适用于第 4 版.您应该尝试修改 this 与 PaperClip 一起使用.将大部分示例代码复制粘贴到我的应用中(进行一些修改)对我有用:

Edit: As @apneadiving mentioned, the library has been updated to version 5. The script you have is for verison 4. You should try modifying this to work with PaperClip. Copy-pasting the majority of the example code into my app (with a few modifications) worked for me:

#app/public/javascripts/application.js
$(function () {
  // Initialize the jQuery File Upload widget:
  $('#fileupload').fileupload();

  // Load existing files:
  $.getJSON($('#fileupload form').prop('action'), function (files) {
    var fu = $('#fileupload').data('fileupload');
    fu._adjustMaxNumberOfFiles(-files.length);
    fu._renderDownload(files)
        .appendTo($('#fileupload .files'))
        .fadeIn(function () {
          // Fix for IE7 and lower:
          $(this).show();
         });
    });

    // Open download dialogs via iframes,
    // to prevent aborting current uploads:
    $('#fileupload .files a:not([target^=_blank])').live('click', function (e) {
      e.preventDefault();
      $('<iframe style="display:none;"></iframe>')
        .prop('src', this.href)
        .appendTo('body');
    });

});

<小时>

#app/controllers/uploads_controller.rb
def create
  @upload = Upload.new(params[:upload])
  if @upload.save
    render :json => [{ 
              :pic_path => @upload.attachment.url.to_s ,
              :name => @upload.attachment.instance.attributes["picture_file_name"]
            }], :content_type => 'text/html'
  else
    render [:json => { :result => 'error'}], :content_type => 'text/html'
  end
end

<小时>

#app/views/uploads/new.html.haml
  %link#theme{:href => "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css", :rel => "stylesheet"}
    = stylesheet_link_tag 'jquery.fileupload-ui'
    #fileupload
      = form_for Upload.new, :html => { :multipart => true } do |f|
        .fileupload-buttonbar
          %label.fileinput-button
            %span Add files...
            = f.file_field :attachment, :multiple => true
          %button.start{:type => "submit"} Start upload
          %button.cancel{:type => "reset"} Cancel upload
          %button.delete{:type => "button"} Delete files
      .fileupload-content
        %table.files
        .fileupload-progressbar
    %script#template-upload{:type => "text/x-jquery-tmpl"}
      %tr{:class => "template-upload{{if error}} ui-state-error{{/if}}"}
        %td.preview
        %td.name ${name}
        %td.size ${sizef}
        {{if error}}
        %td.error{:colspan => "2"}
          Error:
          {{if error === 'custom_failure'}}Custom Error Message
          {{else}}${error}
          {{/if}}
        {{else}}
        %td.progress
          %div
        %td.start
          %button Start
        {{/if}}
        %td.cancel
          %button Cancel
    %script#template-download{:type => "text/x-jquery-tmpl"}
      %tr{:class => "template-download{{if error}} ui-state-error{{/if}}"}
        {{if error}}
        %td
        %td.name ${name}
        %td.size ${sizef}
        %td.error{:colspan => "2"}
          Error:
          {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
          {{else}}${error}
          {{/if}}
        {{else}}
        %td.preview
          {{if thumbnail_url}}
          %a{:href => "${url}", :target => "_blank"}
            %img{:src => "${thumbnail_url}"}/
          {{/if}}
        %td.name
          <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}
        %td.size ${sizef}
        %td{:colspan => "2"}
        {{/if}}
        %td.delete
          %button{"data-type" => "${delete_type}", "data-url" => "${delete_url}"} Delete

编辑快速浏览一下您的应用程序，问题是您将原型与 jquery 混合在一起.解决此问题的最简单方法是使用 jquery-rails 切换到 jQuery.

Edit Had a quick look at your app, the problem is that you are mixing prototype with jquery. The easiest way around this is to switch to jQuery using jquery-rails.

#Gemfile
gem 'jquery-rails'

接下来，运行bundle install，然后运行rails g jquery:install.

Next, run bundle install and then rails g jquery:install.

然后将您的 app/views/layouts/application.erb 更改为:

Then change your app/views/layouts/application.erb to this:

<%= stylesheet_link_tag :all %>
<%= csrf_meta_tag %>

<%= javascript_include_tag 'jquery.min' %>
<%= javascript_include_tag 'jquery-ui-1.8.13.custom.min' %>
<%= javascript_include_tag 'jquery.tmpl.min' %>
<%= javascript_include_tag 'jquery.iframe-transport' %>
<%= javascript_include_tag 'jquery.fileupload' %>
<%= javascript_include_tag 'jquery.fileupload-ui' %>
<%= javascript_include_tag 'jquery_ujs' %>
<%= javascript_include_tag 'application' %>

注意我删除了

<%= javascript_include_tag :defaults %>

这样我就可以指定 jquery、jquery_ujs 和应用程序的加载顺序.

So that I can specify the order in which jquery, jquery_ujs, and application are loaded.

这篇关于在heroku上使用Rails 3和回形针上传多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！