Я следовал за «Прямая загрузка изображений S3 в Rails» . Моя цель - загрузить документы непосредственно в Amazon S3 через форму и сохранить соответствующую ссылку s3 в модель UserDocument.
Я использую ruby 2.2.10p489 и Rails 5.1.6. Я пытаюсь загрузить файлы напрямую в Amazon S3 с помощью JQuery. При загрузке представления new.html.erb в консоли JavaScript Chrome появляется следующее сообщение об ошибке:
Uncaught TypeError: fileInput.fileupload is not a function
at HTMLInputElement.<anonymous> (client_side_s3_upload.self-2be7ed022d6f0781280d316c208a0c078031b2d12aee201b25082ec22be186e6.js:10)
at Function.each (jquery-3.3.1.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js:355)
at jQuery.fn.init.each (jquery-3.3.1.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js:190)
at HTMLDocument.<anonymous> (client_side_s3_upload.self-2be7ed022d6f0781280d316c208a0c078031b2d12aee201b25082ec22be186e6.js:3)
at fire (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:3233)
at Object.fireWith [as resolveWith] (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:3363)
at Function.ready (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:3583)
at HTMLDocument.completed (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:3618)
Вот представление new.html.erb, относящееся к форме загрузки:
<%= javascript_include_tag 'jquery-3.3.1.js' %>
<%= javascript_include_tag 'jquery.ui.widget.js' %>
<%= javascript_include_tag 'z.jquery.fileupload.js' %>
<% if !@user_document.errors.empty? %>
<div class = "alert alert-error">
<ul>
<% @user_document.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class = "well">
<%= form_for(@user_document, 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| %>
<div class="field">
<%= f.label :attachment %>
<%= f.file_field :attachment %>
<%= f.submit "Save", class: "btn btn-primary" %>
</div>
<% end %>
</div>
Вот мое application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag Ckeditor.cdn_url %>
<script src="https://js.stripe.com/v3/"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
<!== [if lt IE 9]>
<script src = "cdnjs.cloudfare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<div class="container">
<% flash.each do |message_type, message| %>
<div class="alert alert-info alert-<%= message_type %>"><%= message %></div>
<% end %>
<%= yield %>
</div>
</body>
</html>
Here is the relevant controller:
class UserDocumentsController < ApplicationController
before_action :logged_in_user
before_action :set_s3_direct_post, only: [:new, :edit, :create, :update]
def new
@user_document = UserDocument.new
end
def create
@user_document = UserDocument.new(user_document_params)
if @user_document.save
redirect_to user_documents_path, notice: "The document #{@user_document.name} has been uploaded."
else
render "new"
end
end
def destroy
@user_document = UserDocument.find(params[:id])
@user_document.destroy
redirect_to user_documents_path, notice: "The document #{@user_document.name} has been deleted."
end
private
def user_document_params
params.require(:user_document).permit(:name, :attachment)
end
def set_s3_direct_post
@s3_direct_post = S3_BUCKET.presigned_post(key: "uploads/#{SecureRandom.uuid}/${filename}", success_action_status: '201', acl: 'private')
end
end
Вот код JavaScript:
$(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'></div>").append(progressBar);
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");
}
});
});
});