проблема при попытке реализовать прямую загрузку методом перетаскивания с помощью shrine direct_upload для aws rails 5.2 - PullRequest
Новая
       8

проблема при попытке реализовать прямую загрузку методом перетаскивания с помощью shrine direct_upload для aws rails 5.2

0 голосов
/ 27 октября 2018

Код:

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..(101024),                  # limit upload size to 10 MB
  }
}
Shrine.plugin :restore_cached_data

Трикс-загрузка 

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 с помощью перетаскивания в редактор, как показано здесь но не могу правильно понять JS.

все остальные настройки устанавливаются непосредственно из *1024* документации

Фотографии загружаются в мои aws, но срок их действия истекает через несколько минут

пример: https://sprout -free-forum-photos.s3.amazonaws.com / store / de6271df193b0ae16e14c3297c58c363.jpg? Алгоритм X-Amz = AWS4-HMAC-SHA256 & X-Amz-Credential = AKIAINSUNFH0%% 2% 2%%% 8%% 0% 8%% как минимум 2 2Fus-восток-1% 2Fs3% 2Faws4_request & X-Amz-Date = 20181027T192116Z & X-Amz-Истекает = 900 & X-Amz-SignedHeaders = хост и X-Amz-Signature = a4c9da3b5933ca29954dfaf11e592543c69a5a7ad1d4dcd3b70747ef0a695c38

даже с моим ведром, установленным для публичного чтения

любая помощь была бы велика, я потерян!

Это текущий сайт в прямом эфире и здесь мой полный мерзавец

1 Ответ

0 голосов
/ 30 января 2019

И сегодня столкнулся с этой проблемой.

Также используем Shrine с AWS S3 и Trix в старом приложении rails.

Я заметил, что изображения присутствуют на сервере S3,Это просто URL-адреса, которые использует Трикс, которые не работают.

После поиска некоторых других похожих вопросов, наткнулся на: https://stackoverflow.com/a/51197576/2561325

Ответ от одного из сопровождающихсвятилищеВсе, что вам нужно сделать, это применить общедоступные настройки в инициализаторе shrine в config/initializers/shrine.rb.

Моя проблема исправлена, изображения, используемые редактором Trix, не устарели.

...