Rails wird direkt auf Amazon S3 hochgeladen

Versuchen, ein neues Juwel namens CarrierWaveDirect es ermöglicht den upload von Dateien direkt auf S3 mit einem html-Formular und leicht verschieben des Bildes nach der Verarbeitung in einen hintergrund-Prozess

InformationsquelleAutor der Antwort dwilkie

Versuchen Sie suchen in carrierwave https://github.com/jnicklas/carrierwave (unterstützt s3)
Multi-Datei-uploads mit carrierwave und uploadify http://blog.assimov.net/post/4306595758/multi-file-upload-with-uploadify-and-carrierwave-on

InformationsquelleAutor der Antwort adc

Habe ich angepasst Heroku ist direkt zu S3 hochladen Lösung in Schienen (die verwendet jQuery-File-Upload und die aws-sdk gem) so-uploads für S3 gemacht werden können Remote über ajax. Ich hoffe, dass dies nützlich ist:

posts_controller.rb

before_action :set_s3_direct_post, only: [:index, :create]
before_action :delete_picture_from_s3, only: [:destroy]

class PostsController < ApplicationController

  def index
    .
    .
  end

  def create
    @post = @user.posts.build(post_params)
    if @post.save
      format.html
      format.js
    end
  end

  def destroy
    Post.find(params[:id]).destroy
  end

  private

    def set_s3_direct_post
      return S3_BUCKET.presigned_post(key: "uploads/#{SecureRandom.uuid}/${filename}", success_action_status: '201', acl: 'public-read')
    end    

    def delete_picture_from_s3
      key = params[:picture_url].split('amazonaws.com/')[1]
      S3_BUCKET.object(key).delete
      return true
      rescue => e
        # If anyone knows a good way to deal with a defunct file sitting in the bucket, please speak up.
        return true
    end

    def post_params
      params.require(:post).permit(:content, :picture_url)
    end

end

Beiträge.html-Code.erb

<div class="info"      data-url="<%= @s3_direct_post.url %>"
                  data-formdata="<%= (@s3_direct_post.fields.to_json) %>"
                      data-host="<%= URI.parse(@s3_direct_post.url).host %>">
</div>

Form

<%= form_for(:post, url: :posts, method: :post,
              html: { class: "post_form", id: "post_form-#{post.id}" }
            ) do |f| %>
  <%= f.text_area :content, id: "postfield-#{post.id}", class: "postText" %>
  <%= f.button( :submit, name: "Post", title: "Post" ) do %>
    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
  <% end %>
  <span class="postuploadbutton" id="postUp-<%= post.id %>" title="Add file" >
    <span class="glyphicon glyphicon-upload" aria-hidden="true"></span>
  </span>
  <span title="Cancel file" class="noticecancelupload" id="postCancel-<%= post.id %>" >
    <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
  </span>
  <%= f.file_field :picture_url, accept: 'image/jpeg,image/gif,image/png', 
               class: "notice_file_field", id: "postFile-#{post.id}" %>
<% end %>

_post.html-Code.erb

<%= button_to post_path(
                      params: {
                        id: post.id,
                        picture_url: post.picture_url
                      }
                    ),
                    class: 'btn btn-default btn-xs blurme',
                    data: { confirm: "Delete post: are you sure?" },
                    method: :delete do %>
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<% end %>

Javascript in jedem _post.html-Code.erb

$(document).off('click',"#postUp-<%= post.id %>");
$(document).on('click', '#postUp-<%= post.id %>', function(e) {
  prepareUpload("#post_form-<%= post.id %>");
  $('#postFile-<%= post.id %>').trigger("click");
});

$(document).off('click',"#postCancel-<%= post.id %>");
$(document).on('click', '#postCancel-<%= post.id %>', function(e) {
  $(".appendedInput").remove(); // $('#postFile-<% post.id %>').val(""); doesn't work for me
  $('.progBar').css('background','white').text("");
});

$(document).off('submit',"#post_form-<%= post.id %>"); //without this the form submitted multiple times in production
$(document).on('submit', '#post_form-<%= post.id %>', function(e) { //don't use $('#post_form-<%= post.id %>').submit(function() { so it doesn't bind to the #post_form (so it still works after ajax loading)
  e.preventDefault(); //prevent normal form submission
  if ( validatePostForm('<%= post.id %>') ) {
    $.ajax({
      type: 'POST',
      url:  $(this).attr('action'),
      data: $(this).serialize(),
      dataType: 'script'
    });
    $('#postCancel-<%= post.id %>').trigger("click");
  }
});

function validatePostForm(postid) {
  if ( jQuery.isBlank($('#postfield-' + postid).val()) && jQuery.isBlank($('#postFile-' + postid).val()) ) {
    alert("Write something fascinating or add a picture.");
    return false;
  } else {
    return true;
  }
}

Javascript in application.js

function prepareUpload(feckid) {
  $(feckid).find("input:file").each(function(i, elem) {
    var fileInput    = $(elem);
    var progressBar  = $("<div class='progBar'></div>");
    var barContainer = $("<div class='progress'></div>").append(progressBar);
    fileInput.after(barContainer);
    var maxFS = 10 * 1024 * 1024;

    var info             = $(".info");
    var urlnumbnuts      = info.attr("data-url");
    var formdatanumbnuts = jQuery.parseJSON(info.attr("data-formdata"));
    var hostnumbnuts     = info.attr("data-host");

    var form             = $(fileInput.parents('form:first'));

    fileInput.fileupload({
      fileInput:        fileInput,
      maxFileSize:      maxFS,
      url:              urlnumbnuts,
      type:             'POST',
      autoUpload:       true,
      formData:         formdatanumbnuts,
      paramName:        'file',
      dataType:         'XML',
      replaceFileInput: false,
      add: function (e, data) {
        $.each(data.files, function (index, file) {
          if (file.size > maxFS) {
            alert('Alas, the file exceeds the maximum file size of 10MB.');
            form[0].reset();
            return false;
          } else {
            data.submit();
            return true;
          }
        });
      },
      progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        progressBar.css('width', progress + '%')
      },
      start: function (e) {
        progressBar.
          css('background', 'orange').
          css('display', 'block').
          css('width', '0%').
          text("Preparing...");
      },
      done: function(e, data) {
        var key   = $(data.jqXHR.responseXML).find("Key").text();
        var url   = '//' + hostnumbnuts + '/' + key;
        var input = $('<input />', { type:'hidden', class:'appendedInput', 
                     name: fileInput.attr('name'), value: url });
        form.append(input);
        progressBar.
          css('background', 'green').
          text("Ready");
      },
      fail: function(e, data) {
        progressBar.
          css("background", "red").
          css("color", "black").
          text("Failed");
      }
    });
  });
} //function prepareUpload()

erstellen.js.erb

$(".info").attr("data-formdata",  '<%=raw @s3_direct_post.fields.to_json   %>'); //don't use .data() to set attributes 
$(".info").attr("data-url",       "<%= @s3_direct_post.url                 %>");
$(".info").attr("data-host",      "<%= URI.parse(@s3_direct_post.url).host %>");

$('.post_form')[0].reset();
$('.postText').val('');

application.js

//= require jquery-fileupload/basic

config/Initialisierungen/aws.rb

Aws.config.update({
  region: 'us-east-1',
  credentials: Aws::Credentials.new(ENV['AWS_ACCESS_KEY_ID'], ENV['AWS_SECRET_ACCESS_KEY']),
})
S3_BUCKET = Aws::S3::Resource.new.bucket(ENV['S3_BUCKET'])

Hinweise:

Diese Lösung ist für mehrere post-Formulare auf den index.html-Code.erb Seite. Dies ist der Grund, warum die @s3_direct_post Informationen wird in einem div der Klasse info innen-index.html-Code.erb, anstatt in jedem post-Formular. Dies bedeutet, es ist nur eine @s3_direct_post präsentierte auf der Seite zu jeder Zeit, unabhängig von der Anzahl der Formulare auf der Seite. Die Daten innerhalb der @s3_direct_post ist nur, Griff (mit einem Aufruf von prepareUpload()) mit Klick auf den Datei hochladen-Knopf. Nach der Einreichung einer frischen @s3_direct_post generiert wird, in der Beiträge-controller, und die Informationen in .info aktualisiert erstellen.js.erb. Die Speicherung der @s3_direct_post Daten in der form bedeutet, dass viele verschiedene Instanzen von @s3_direct_post gleichzeitig existieren können, was zu Fehlern in den Namen der Datei generation.

Müssen Sie :set_s3_direct_post sowohl die Beiträge-controller, index-action (bereit für den ersten upload) und die create-Aktion (bereit für die zweiten und nachfolgenden uploads).

Normalen Formulars wird verhindert, indem e.preventDefault(); so dass es getan werden kann 'manuell' mit $.ajax({. Warum nicht einfach remote: true in der form? Weil im Schienen -, Datei-upload erfolgt mit einem HTML-request und die Seite aktualisiert sich sogar, wenn Sie versuchen, es zu tun aus der Ferne.

Verwenden info.attr() eher als info.data() festlegen und abrufen der @s3_direct_post Attribute, da info.Daten nicht aktualisiert
(siehe zum Beispiel diese Frage). Dies bedeutet, dass Sie auch manuell Parsen des Attributs in einem Objekt mit jQuery.parseJSON() (das .Daten() ist tatsächlich nicht automatisch).

Nicht verwenden //= require jquery-fileupload im application.js. Dieser bug war eine echte ballache zu identifizieren (siehe hier). Die original Heroku Lösung hat nicht funktioniert, bis ich das verändert.

InformationsquelleAutor der Antwort Bazley