Несколько загрузок файлов с Rails 3 и скрепкой на heroku

Question

Мне нужен интерфейс в приложении Rails 3 для загрузки нескольких файлов в Amazon S3 (потому что я нахожусь на heroku), возможно, с индикаторами выполнения.

Мне легко удалось настроить скрепку изагрузить отдельные файлы, но я действительно потерян, как идти дальше.

Пожалуйста, не могли бы вы дать мне несколько советов?Это 2 дня, я ищу по всему интернету, но я не могу найти работающее решение

---

** РЕДАКТИРОВАТЬ **

Я действительно не могу понять ...Я схожу с ума, потому что я теряю слишком много часов на этом ... пожалуйста, помогите мне.Если я пытаюсь открыть пример приложения, на который ссылается Джонни, я получаю только это (и в моем приложении оно такое же):

Где находится пользовательский интерфейс?Что-то не так в моем браузере?

---

** EDIT 2 **

Здесь, на GitHub, вы можете найти мой testapp ... пожалуйста, вы можете объяснитьмне почему чертов пользовательский интерфейс загрузки не отображается?Спасибо!

---

** РЕДАКТИРОВАТЬ 3 **

Большое спасибо, Джонни, я не знал, что jquery и прототип не могут жить вместе.Теперь плагин отображается правильно, но при попытке загрузить что-то он создает новую запись «upload», но его поле вложения пустое, а файлы не на 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)

Answer 1

Вы можете посмотреть на jQuery-File-Upload. Демонстрация здесь и рельсы 3 / Установка скрепки здесь .

Редактировать : Как упоминалось в @apneadiving, библиотека была обновлена ​​до версии 5. У вас есть скрипт для версии 4. Вам следует попробовать изменить this для работы с PaperClip. Копирование большей части примера кода в мое приложение (с несколькими изменениями) сработало для меня:

---

#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, используя jquery-rails .

#Gemfile
gem 'jquery-rails'

Далее запустите bundle install, а затем rails g jquery:install.

Затем измените app/views/layouts/application.erb на это:

<%= 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 и application.

Answer 2

Я недавно начал с очень похожей задачи, и плагин swf (по крайней мере, самый последний) действительно позволит вам обновить запись скрепки.У него есть обратные вызовы практически для всего, что вам нужно расширить.

:onUploadComplete (upload_options,event)

Вот сущность Натана Колгейта по этому вопросу.Он просто делает удаленный вызов на сервер rails, как только загрузка завершена, сообщая ему места для прикрепления скрепки.

из его uploadCompleteHandler

var uploadCompleteHandler = function(upload_options,event){
$.ajax({
      url: '<%= notify_rails_of_successful_upload_path(:format => :js)%>',
      global: false,
      type: 'POST',
      data: ({
        'authenticity_token' : '<%= form_authenticity_token %>',
    'upload' : {
        'file_file_name' : upload_options.FileName,
            'file_file_size' : upload_options.FileSize,
            'file_content_type' : upload_options.ContentType
    }
    }),
      dataType: 'script'
   }
)
};

Я не уверен, если этоточный обратный вызов запускается для каждого файла;это определенно выглядит так, как было бы.Но он передает все, что нужно скрепке, обратно через запрос ajax.имя файла, размер, тип содержимого.Таким образом, все, что отправляется на heroku, это некоторый текст о файле, который избавляет ваше приложение от большого объема работы, передавая его клиенту.

edit: flash - единственный способ избежать отправки, который я нашелмного данных через героку на с3.Есть несколько загрузчиков только для html5 / js, которые могли бы выполнить работу, но те, которые я нашел, все еще довольно созрели для дерева разработки.

Answer 3

Просмотр: (обратите внимание на массив blog_post[avatars][])

<form accept-charset="UTF-8" action="/blog_posts" enctype="multipart/form-data" id="new_blog_post" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="&#x2713;" />
<input name="authenticity_token" type="hidden" value="<%=form_authenticity_token %>" />
</div>
<p><input id="blog_post" name="blog_post[avatars][]" type="file" multiple /></p>
<p><input name="commit" type="submit" value="Upload" /></p>
</form>

Контроллер:

# POST /blog_posts
# POST /blog_posts.json
def create

    @blog_post = BlogPost.new(params[:blog_post])

    @blog_post.avatars.each do |avatar|

        each_blog_post = BlogPost.new

        each_blog_post.avatar = avatar

        if each_blog_post.save

        end

    end

end

Модель:

class BlogPost < ActiveRecord::Base

    attr_accessible :title, :avatar, :avatars

    has_attached_file :avatar

    attr_accessor :avatars

end

Answer 4

Согласно Поддержка Heroku , см. .

Скрепка для бумаг и загрузка нескольких файлов , хотя и не зависит от S3.