Rails:上传dropzone,S3,carrierwave,不适用于Safari,但适用于Google Chrome
Rails: Uploading dropzone, S3, carrierwave, not working in Safari, but works in Google Chrome
我将dropzone与S3和carrierwave一起使用。我可以通过谷歌浏览器上传图像,但我无法使用Safari,这很奇怪。
这是我的表格
= nested_form_for @trip, html: { multipart: true, id: 'fileupload', class: 'directUpload', data: { 'form-data' => (@s3_direct_post.fields), 'url' => @s3_direct_post.url, 'host' => URI.parse(@s3_direct_post.url).host } } do |f|
.dropzone#imageUpload
= f.simple_fields_for :trip_images, TripImage.new, child_index: TripImage.new.object_id do |ff|
= ff.file_field :photo, class: 'hide form-fields'
= f.button :submit, id: "submit-data"
这在跳闸控制器中
def set_s3_direct_post
@s3_direct_post = S3_BUCKET.presigned_post(key: "/uploads/temporary/#{SecureRandom.uuid}/${filename}", success_action_status: '201', acl: 'public-read', content_type: 'image/jpeg')
end
这是TripImage型号
class TripImage < ActiveRecord::Base
belongs_to :resource, :polymorphic => true
mount_uploader :photo, PhotoUploader
after_create :process_async
def to_jq_upload
{
'name' => read_attribute(:attachment_file_name),
'size' => read_attribute(:attachment_file_size),
'url' => attachment.url(:original),
'thumbnail_url' => attachment.url(:thumb),
'delete_url' => "/photos/#{id}",
'delete_type' => 'DELETE'
}
end
private
def process_async
PhotoVersioningJob.set( wait: 5.seconds ).perform_later(self.id)
end
end
这是js
$(function(){
$('.directUpload').find(".dropzone").each(function(i, elem) {
s3ImageUpload(elem);
});
})
function s3ImageUpload(elem){
var fileInput = $(elem);
var form = $(fileInput.parents('form:first'));
var form_url = form.data('url');
var form_data = form.data('form-data');
Dropzone.options.imageUpload = {
url: form_url,
params: form_data,
uploadMultiple: false,
addRemoveLinks: true,
removedfile: function(file){
//some codes
},
success: function(file, serverResponse, event){
//some codes
},
error: function(data){
//some codes
}
};
}
编辑:当前CORS配置
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*.example.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
<AllowedHeader>origin</AllowedHeader>
</CORSRule>
</CORSConfiguration>
已测试但不起作用
编辑:我也有S3直接上传,不确定这是否也会影响它?
S3DirectUpload.config do |c|
c.access_key_id = Rails::AWS.config['access_key_id'] # your access key id
c.secret_access_key = Rails::AWS.config['secret_access_key'] # your secret access key
c.bucket = Rails::AWS.config['bucket_name'] # your bucket name
c.region = 's3' # region prefix of your bucket url. This is _required_ for the non-default AWS region, eg. "s3-eu-west-1"
end
我最近在Safari上遇到了类似的问题,发现它发送了一个Chrome没有的额外访问控制请求头,特别是"origin"。为了解决这个差异,我需要更新目标bucket上的AWS CORS配置。
AWS关于请求标头与允许的标头配置匹配的必要性的文档。第三个要点明确了这一要求:
飞行前请求的访问控制请求标头中列出的每个标头都必须与AllowedHeader元素匹配。
这个有用的StackOverflow答案给出了一个配置示例:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
<AllowedHeader>x-requested-with</AllowedHeader>
</CORSRule>
</CORSConfiguration>
需要添加哪些内容才能在Safari中运行:
<AllowedHeader>origin</AllowedHeader>
相关文章:
- jQuery表单验证适用于Mozilla和Internet Explorer,但不适用于Chrome或Safari
- SQLite插件适用于Mac和Windows,但不适用于手机上的Safari
- 画布上的自定义字体仅适用于safari
- JS适用于Firefox和Safari,但不适用于Chrome.此处'是我的网站
- 向下滚动时隐藏菜单,向上滚动时显示,适用于Chrome,不适用于Safari(手机)
- 支持 JavaScript 的检查例程适用于 Chrome/Opera/IE,但不适用于 Firefox/Safari
- jQuery放大版不适用于Chrome和Safari,但适用于Firefox
- AngularJS下拉菜单适用于Firefox,不适用于Chrome和Safari
- Javascript String to Date适用于Chrome,而不是FF或Safari
- html5 canvas 中的 OffsetX 适用于 IE、Safari、Chrome,但不适用于 Firefox
- 条件 CSS 仅适用于 Safari 和 IE
- jQuery - IE7 - 变量未定义(适用于Chrome,Safari,Firefox)
- 删除cookie(PHP,JS)适用于Firefox,Safari,Opera,但不适用于Chrome
- self.focus() 和 window.focus() 适用于 Safari,但不适用于 IE
- JavaScript脚本适用于Firefox,Chrome,Safari,Internet Explorer< 9,但不
- 为什么这适用于Safari和Firefox,而不是Chrome
- AngularJS不适用于Chrome(Mac和Windows),但适用于Safari
- 将文本字段限制为一个小数点输入(代码适用于Safari,但不适用于Firefox)
- FB.login弹出窗口不再适用于Safari mac
- createElement('canvas')代码适用于Safari,但不适用于Firefox, Chr