[英]Rails Active Storage direct uploads using default storage service instead of service defined in model
[英]Manual uploads using Active Storage with JSON
我正在尝试为Rails应用程序的所有文件和图像制作一个通用文件上传器。 上载器功能与流行的JS上载器(如Filestack或Uppy Uploader)相同 ,用户只需在浏览器中选择任何文件,然后应用程序就会处理该文件,并在文件上传后返回URL。 现在,有了此URL,我们便可以将其附加到任何表单/所见即所得编辑器/我们喜欢的任何地方,例如在聊天消息中。
为此,我的方法是使用Rails Active Storage进行手动上传。
因此,首先,我创建一个名为Uploader的类,该类链接到Rails Active Storage:
app / models / uploader.rb
class Uploader < ApplicationRecord
has_one_attached :file
end
然后,我为此上传器创建了一个控制器,该控制器的操作名为“文件”,将在其中处理所有文件:
config / routes.rb
post 'uploaders/file' => 'uploaders#file'
app / controllers / uploaders_controller.rb
def file
blob = ActiveStorage::Blob.create_after_upload!(
io: params[:uploader][:file],
filename: params[:uploader][:file].original_filename,
content_type: params[:uploader][:file].content_type
)
@filelink = url_for(blob)
respond_to do |format|
format.html { redirect_back(fallback_location: root_path) }
format.js
end
end
最后,这是此上载器的视图:
app / views / new.html.erb
<h3>Select Files To Upload</h3>
<%= form_for @uploader, url: uploaders_file_path(@uploader), remote: true do |f| %>
<%= f.file_field :file, direct_upload: true, class: "form-control" %>
<%= f.button type: "submit", id: "submit-uploader", class: "btn btn-primary btn-md", data: {disable_with: "Uploading..."} do %>
Save
<% end %>
<% end %>
题
因此,我的问题是如何在上述代码中使用JSON,以便获取上载的文件URL?
首先,我将以上代码更改为:
app / controllers / uploaders_controller.rb
def file
blob = ActiveStorage::Blob.create_after_upload!(
io: params[:uploader][:file],
filename: params[:uploader][:file].original_filename,
content_type: params[:uploader][:file].content_type
)
render json: { filelink: url_for(blob) }
end
app / views / new.html.erb
<%= form_for @uploader, url: uploaders_file_path(@uploader), remote: true, :html => {:'data-type' => 'json', :multipart => true} do |f| %>
<%= f.file_field :file, direct_upload: true, class: "form-control" %>
<%= f.button type: "submit", id: "submit-uploader", class: "btn btn-primary btn-md", data: {disable_with: "Uploading..."} do %>
Save
<% end %>
<% end %>
<script type="text/javascript">
$("#submit-uploader").click(function(e){
e.preventDefault();
$.ajax({
type: "POST",
dataType: "script",
url: $(this).parents("form").attr("action"),
contentType: 'application/json',
data: JSON.stringify({ file: $("#uploader_file"), _method: 'post' })
}).done(function( data ){
console.log(data);
});
});
</script>
现在,我正在使用javascript通过JSON提交活动存储表单。 但是很明显缺少某些内容,因为该脚本目前无法处理任何活动存储。 那么,我该如何解决呢?
谢谢!
您可以使用ajax发送文件,这是一个示例 :
<%= form_tag uploaders_file_path(@uploader), :html => {:multipart => true} do |f| %>
<%= f.file_field :file, direct_upload: true, class: "form-control" %>
<%= f.button type: "submit", id: "submit-uploader", class: "btn btn-primary btn-md", data: {disable_with: "Uploading..."} do %>
Save
<% end %>
<% end %>
<script type="text/javascript">
// trigger the form submit
$("form").submit(function(evt){
evt.preventDefault();
// get the input with file
var formData = new FormData($(this)[0]);
$.ajax({
url: "<%= uploaders_file_path(@uploader) %>",
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function (response) {
alert(response);
}
});
return false;
})
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.