Загрузчик файлов jQuery и не связанные с героинкой турболинки, перепробовал все исправления, которые я могу найти на SO
Я часами пытался это исправить. Я использовал руководство Heroku для прямой загрузки S3 в Rails. Я смог заставить это работать в моей настроенной версии. Прекрасно работает в локальной настройке, но не на Heroku. Я сузил это до проблемы JS, потому что индикатор выполнения не хочет загружаться. JS делает загрузку зависимой от создания до того, как она начнет загрузку. Мои навыки JS отстой (я продолжаю подключаться, потому что я должен, но я ненавижу JS со страстью, это просто не для меня).
application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery-table
//= require js/stellar
//= require js/nivo-lightbox.min
//= require js/custom
//= require js/css3-animate-it
//= require gritter
//= require turbolinks
//= require jquery-fileupload/basic
// = require_tree .
Чтобы заставить его работать в тесте, я должен был поместить сценарий в саму форму.
_form.html.erb
<div class="row">
<div class="col-md-10 col-md-offset-1 text-center inner">
<%= form_for(@repair, html: { class: "directUpload", data: { 'form-data' => (@s3_direct_post.fields), 'url' => @s3_direct_post.url, 'host' => URI.parse(@s3_direct_post.url).host } }) do |f| %>
<% if @repair.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@repair.errors.count, "error") %> prohibited this repair from being saved:</h2>
<ul>
<% @repair.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field h3">
<%= current_user.email %>
</div>
<div class="field h3">
<%= f.label 'PPE Serial #' %>
<%= f.collection_select :ppe_id, current_user.ppes, :id, :serial %>
</div>
<div class="field h4">
<%= "Entered On: #{Date.today}" %><br />
</div>
<div class="field h4" id="photoUploader" >
<%= f.fields_for :photos, @repair.photos.build do |photos_fields| %>
<%= photos_fields.label :file_url, 'Upload a Photo' %>
<%= photos_fields.file_field :file_url %>
<% end %>
<div class='progress' id='pgbar'></div>
</div>
<div class="field h4">
<%= f.label :notes, 'Please give a detailed description of repairs needed.' %><br />
<%= f.text_area :notes, class: 'note_area' %>
</div>
<div class="actions">
<%= f.submit 'Save Record', class: 'btn btn-brand' %>
</div>
<script>
$(window).on('turbolinks:load', function() {
$('.directUpload').find("input:file").each(function(i, elem) {
var fileInput = $(elem);
var form = $(fileInput.parents('form:first'));
var submitButton = form.find('input[type="submit"]');
var progressBar = $("<div class='bar'></div>");
var barContainer = $("<div class='progress' id='pgbar'></div>").append(progressBar);
$('#pgbar').remove();
fileInput.after(barContainer);
fileInput.fileupload({
fileInput: fileInput,
url: form.data('url'),
type: 'POST',
autoUpload: true,
formData: form.data('form-data'),
paramName: 'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
dataType: 'XML', // S3 returns XML if success_action_status is set to 201
replaceFileInput: false,
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
progressBar.css('width', progress + '%')
},
start: function (e) {
submitButton.prop('disabled', true);
progressBar.
css('background', 'green').
css('display', 'block').
css('width', '0%').
text("Loading...");
},
done: function(e, data) {
submitButton.prop('disabled', false);
progressBar.text("Uploading done");
// extract key and generate URL from response
var key = $(data.jqXHR.responseXML).find("Key").text();
var url = '//' + form.data('host') + '/' + key;
// create hidden field
var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url })
form.append(input);
},
fail: function(e, data) {
submitButton.prop('disabled', false);
progressBar.
css("background", "red").
text("Failed");
}
});
});
});
</script>
<% end %>
</div>
</div>
Я пробовал иметь скрипт в файле application.js, со смешанными результатами в тесте, но ни один не работает на Heroku. Я также попробовал каждую комбинацию
$(window).on('turbolinks:load', function() {
$(Document).on('turbolinks:load', function() {
$(document).ready(function(){
$(function(){
Я предварительно скомпилировал ресурсы, отключил турболинки для этой формы, отключил турбо-ссылки для этой страницы, отключил турболинки для всего приложения, переместил порядок файлов в списке приложений appplication.js.
Хотелось бы, чтобы я лучше понимал JS, чтобы настроить скрипт загрузки, чтобы он не зависел от того, от чего он зависит.
Я не получаю ошибок в консоли JS. Он просто загружается или не зависит от окружающей среды.
Буду признателен за любую оказанную помощь.
Одна заметка на JS для индикатора выполнения. В моей рабочей версии на Test турболинки продолжали создавать контейнерный div для бара при перезагрузке. Так создавались пустые столбики, но они вообще не мешали сценарию. Поэтому я создал div, а затем добавил вызов, чтобы удалить его, чтобы, если он уже существовал, он был заменен новым при перезагрузке.
1 ответ
Я наконец смог обойти это. Проблема была не в моем JS-коде в скрипте загрузки на странице, а в том, что Heroku отказался включать код jQuery-uploader независимо от того, что я пробовал. Как я уже сказал, отлично работает в производстве, но совсем не на Heroku. Что я сделал, чтобы загрузить jQuery-upload/basic JS в моей установке Heroku было скопировано три файла из гема jQuery-upload в папку my /public, а затем добавьте это в файл инициализатора для ресурсов:
/config/initializers/assets.rb:
... #added code:
Rails.application.config.assets.precompile += %w( jquery-fileupload/basic-plus.js )
Не уверен, почему, независимо от того, что я сделал, код JS, который будет загружаться без проблем
Теперь, когда Heroku загружается, он загружает этот JS в мой файл application.js. Все работает отлично. Я должен задаться вопросом, нет ли какого-нибудь недостатка в драгоценном камне.