Rails5 + jquery-fileupload-rails + carrierwave + Amazon S3, проблема со скриптом

Question

Привет всем.

Это мой первый пост здесь (и, вероятно, не последний...)

Я создаю приложение Rails, где администратор может создать рецепт. Каждый рецепт указан в указателе, и администратор может добавить такие вещи, как название, ингредиенты, время, которое вы должны потратить на рецепт и т. Д.

Теперь я хотел бы иметь возможность загрузить изображение для этого рецепта.

Поскольку я понятия не имел, как этого добиться, я решил запустить новое приложение с нуля, где у вас есть пользователь с именем и изображением.

Я уже достиг загрузки изображения для пользователей (аватара) с помощью базовой формы загрузки:

<%= f.file_field :image %>

Как упомянуто в названии, эта загрузка идет на Amazon S3. Я использую "несущую волну" из тумана с помощью MiniMagick для отображения изображения так, как я хочу. Также жемчужина "Figaro", чтобы скрыть мой идентификатор для Amazon S3.

Я также пытался обновить несколько файлов, используя один и тот же процесс. Это отлично работает. И вы можете найти урок, которому я следовал на этой странице: ЗДЕСЬ

Но пользователь должен ждать, и на экране ничего не происходит, пока загружается картинка. Может быть, пользователь может подумать, что что-то пошло не так, и просто покинуть страницу и в конечном итоге разочароваться или что-то.

Вот почему у меня возникла идея использовать jQuery File Upload для рельсов.

Проблема в том, что все учебники очень устарели, и я не могу найти что-то, что правильно работает со всеми этими вещами вместе (s3, carrierwave, jquery). Учебники, которые я нашел, были написаны в 2013 году или около того... Не удалось найти ничего интересного.

За исключением этого. Даже если (снова) это с 2014 года.

Этот скрипт позволяет загружать несколько файлов одновременно, удалять их и т. Д., Просто вставляя код в любое представление. Я пробовал это, но есть много проблем, и первая из них:

<%= javascript_include_tag 'jquery.iframe-transport.js' %>
<%= javascript_include_tag 'jquery.fileupload.js' %>
<%= javascript_include_tag 'jquery.fileupload-ui.js' %>

Когда я пытаюсь код, я получаю эту ошибку:

The asset "jquery.iframe-transport.js" is not present in the asset pipeline.

Я не думаю, что это необходимо, так как вы должны быть в состоянии получить его из файла application.js с этим //= require jquery-fileupload, верно?

Когда я удаляю эти строки, скрипт загружается, но выглядит это так:

JQuery

Как видите, вы можете выбрать файл, но он должен показать картинку ниже.

И только кнопка отмены работает и убирает час

---

что означает "картинки", я думаю. Но загрузка и удаление не будут работать, то же самое для флажка.

Кто-нибудь может помочь мне сделать эту работу как-нибудь?

Проблема может прийти с s3? или это проблема скрипта? Я никогда не кодировал Java, поэтому я не вижу, где там может быть ошибка.

Если кто-то может помочь или хотя бы показать мне, как я буду признателен.

Спасибо

Answer 1

Итак... Последние 6 часов я пытался это сделать. Я успешно установил Yarn и Webpack в своем приложении rails. В соответствии с инструкцией по установке вы можете установить все через gemfile без необходимости повторного "rails new".

По умолчанию, когда я захожу в браузер, я вижу сообщение (javascript/application.js -> console.log("Hello World from Webpacker")).

Тем не менее, я не понимаю, как все работает, даже после прочтения этого и этого.

Я пробовал Refile Gem для своих загрузок. Все работает. Я хотел бы (как показывает мой первый пост) создать индикатор выполнения. У меня есть сценарий кофе для этого. Я поместил свой скрипт в my_app/javascript/users.coffee и в application.js, я написал это:

require(users.coffee)

У меня ошибка. Тогда я попытался написать это:

//= require refile
//= require popper
//= require bootstrap
//= jquery
//= require_tree .

И у меня снова ошибка.

Вот мой сценарий кофе:

jQuery ->
  $(document).on "upload:start", "form", (e) ->
    $(this).find("input[type=submit]").attr "disabled", true
    $("#progress-bar").slideDown('fast')

  $(document).on "upload:progress", "form", (e) ->
    detail          = e.originalEvent.detail
    percentComplete = Math.round(detail.loaded / detail.total * 100)
    $('.progress-bar').width("#{percentComplete}%");
    $("#progress-bar-text").text("#{percentComplete}% Complete")

  $(document).on "upload:success", "form", (e) ->
    $(this).find("input[type=submit]").removeAttr "disabled"  unless $(this).find("input.uploading").length
    $("#progress-bar").slideUp('fast')

Кстати, я изменил на это мой application.html.erb

<%= javascript_pack_tag 'application' %>

Я также bin/yarn добавляю refile и rails webpacker:compile

Результат моего package.json:

{
  "name": "UploadRefile",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^3.0.2",
    "coffeescript": "1.12.7",
    "jquery": "^3.2.1",
    "refile": "^0.2.11"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.9.5"
  }
}

До сих пор не работает. Я также пытался использовать без кофеина, чтобы изменить мой сценарий кофе. Результат таков:

jQuery(function() {
  $(document).on("upload:start", "form", function(e) {
    $(this).find("input[type=submit]").attr("disabled", true);
    return $("#progress-bar").slideDown('fast');
  });

  $(document).on("upload:progress", "form", function(e) {
    const { detail }          = e.originalEvent;
    const percentComplete = Math.round((detail.loaded / detail.total) * 100);
    $('.progress-bar').width(`${percentComplete}%`);
    return $("#progress-bar-text").text(`${percentComplete}% Complete`);
  });

  return $(document).on("upload:success", "form", function(e) {
    if (!$(this).find("input.uploading").length) { $(this).find("input[type=submit]").removeAttr("disabled"); }
    return $("#progress-bar").slideUp('fast');
  });
});

Ошибка снова.

Кто-нибудь может привести меня к чему-то? Потому что я не могу двигаться вперед на самом деле. Я терпеливый парень, но я не понимаю процесс веб-пакета. Объяснения очень запутанные, даже если они говорят противоположность. Я просто хочу заставить работать индикатор выполнения. С несущей волной или с refile. Не имеет значения

Спасибо за помощь