尝试使用 shrine direct_upload for aws rails 5.2 实现拖放直接上传时出现问题

Question

代码：

image_upload.js

function uploadAttachment(attachment) {
  var file = attachment.file;
  var form = new FormData;
  form.append("Content-Type", file.type);
  form.append("forum_post_photo[image]", file);

  var xhr = new XMLHttpRequest;
  xhr.open("POST", "/forum_post_photos.json", true);
  xhr.setRequestHeader("X-CSRF-Token", Rails.csrfToken());

  xhr.upload.onprogress = function(event){
    var progress = event.loaded / event.total * 100;
    attachment.setUploadProgress(progress);
  }

  xhr.onload = function(){
    if (xhr.status == 201){
      var data = JSON.parse(xhr.responseText);
      return attachment.setAttributes({
        url: data.image_url,
        href: data.image_url
      })
    }
  }

  return xhr.send(form);
}

document.addEventListener("trix-attachment-add", function(event){
  var attachment = event.attachment;

  if (attachment.file){
    console.log('new',attachment);
    return uploadAttachment(attachment);
  }
});

shrine.rb

require "shrine/storage/s3"

s3_options = {
  bucket:            Rails.application.credentials.aws[:bucket_name], # required
  access_key_id:     Rails.application.credentials.aws[:access_key_id],
  secret_access_key: Rails.application.credentials.aws[:secret_access_key],
  region:            Rails.application.credentials.aws[:bucket_region],
}

Shrine.storages = {
  cache: Shrine::Storage::S3.new(prefix: "cache",upload_options: { acl: "public-read" } , **s3_options),
  store: Shrine::Storage::S3.new(prefix: "store",upload_options: { acl: "public-read" } ,**s3_options),
}

Shrine.plugin :activerecord
Shrine.plugin :presign_endpoint, presign_options: -> (request) {
  filename = request.params["filename"]
  type     = request.params["type"]

  {
    content_disposition:    "inline; filename=\"#{filename}\"", # set download filename
    content_type:           type,                               # set content type (required if using DigitalOcean Spaces)
    content_length_range:   0..(10*1024*1024),                  # limit upload size to 10 MB
  }
}
Shrine.plugin :restore_cached_data

trix 上传

require "shrine/storage/s3"

s3_options = {
  bucket:            Rails.application.credentials.aws[:bucket_name], # required
  access_key_id:     Rails.application.credentials.aws[:access_key_id],
  secret_access_key: Rails.application.credentials.aws[:secret_access_key],
  region:            Rails.application.credentials.aws[:bucket_region],
}

Shrine.storages = {
  cache: Shrine::Storage::S3.new(prefix: "cache",upload_options: { acl: "public-read" } , **s3_options),
  store: Shrine::Storage::S3.new(prefix: "store",upload_options: { acl: "public-read" } ,**s3_options),
}

Shrine.plugin :activerecord
Shrine.plugin :presign_endpoint, presign_options: -> (request) {
  filename = request.params["filename"]
  type     = request.params["type"]

  {
    content_disposition:    "inline; filename=\"#{filename}\"", # set download filename
    content_type:           type,                               # set content type (required if using DigitalOcean Spaces)
    content_length_range:   0..(10*1024*1024),                  # limit upload size to 10 MB
  }
}
Shrine.plugin :restore_cached_data
 trix-upload
function uploadAttachment(attachment) {
  var file = attachment.file;
  var form = new FormData;
  form.append("Content-Type", file.type);
  form.append("forum_post_photo[image]", file);

  var xhr = new XMLHttpRequest;
  xhr.open("POST", "/forum_post_photos.json", true);
  xhr.setRequestHeader("X-CSRF-Token", Rails.csrfToken());

  xhr.upload.onprogress = function(event){
    var progress = event.loaded / event.total * 100;
    attachment.setUploadProgress(progress);
  }

  xhr.onload = function(){
    if (xhr.status == 201){
      var data = JSON.parse(xhr.responseText);
      return attachment.setAttributes({
        url: data.image_url,
        href: data.image_url
      })
    }
  }

  return xhr.send(form);
}

document.addEventListener("trix-attachment-add", function(event){
  var attachment = event.attachment;

  if (attachment.file){
    console.log('new',attachment);
    return uploadAttachment(attachment);
  }
});

长话短说，我在论坛上使用 trix 作为富文本，所有模型和控制器都在工作，我正尝试 direct_upload 拖放到编辑器中，如图所示 here 但是无法正确获取js。

所有其他配置直接从 documentation

设置

照片正在上传到我的 aws，但所有照片将在几分钟后过期

示例：https://sprout-free-forum-photos.s3.amazonaws.com/store/de6271df193b0ae16e14c3297c58c363.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAINSUNFHRJEDP6TQA%2F20181027%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20181027T192116Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=a4c9da3b5933ca29954dfaf11e592543c69a5a7ad1d4dcd3b70747ef0a695c38

即使我的存储桶设置为 public 读取

任何帮助都会很棒我迷路了！

这是当前站点 live and here 是我的完整站点 git

Answer 1

今天也遇到了这个问题。

还在旧的 rails 应用程序中将 Shrine 与 AWS S3 和 Trix 结合使用。

我注意到图像存在于 S3 服务器中，只是 Trix 使用的 URL 不起作用。

搜索了一些其他类似的问题后，运行变成了这个：

神社的一位维护者给出了答案gem。您所要做的就是在 config/initializers/shrine.rb.

的 shrine 初始化程序中应用 public 设置

我的问题现在已解决，Trix 编辑器使用的图像不会过期。

尝试使用 shrine direct_upload for aws rails 5.2 实现拖放直接上传时出现问题

problem while trying to implement a drag and drop direct upload with shrine direct_upload for aws rails 5.2

javascript

ruby-on-rails

amazon-web-services

roda

shrine