Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
张重言
rails
提交
6150eb04
R
rails
项目概览
张重言
/
rails
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
R
rails
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
6150eb04
编写于
10月 08, 2019
作者:
G
George Claghorn
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Document CORS configuration for direct uploads [ci skip]
上级
f4a04c3c
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
68 addition
and
2 deletion
+68
-2
guides/source/active_storage_overview.md
guides/source/active_storage_overview.md
+68
-2
未找到文件。
guides/source/active_storage_overview.md
浏览文件 @
6150eb04
...
@@ -477,7 +477,7 @@ Direct Uploads
...
@@ -477,7 +477,7 @@ Direct Uploads
Active Storage, with its included JavaScript library, supports uploading
Active Storage, with its included JavaScript library, supports uploading
directly from the client to the cloud.
directly from the client to the cloud.
###
Direct upload installation
###
Usage
1.
Include
`activestorage.js`
in your application's JavaScript bundle.
1.
Include
`activestorage.js`
in your application's JavaScript bundle.
...
@@ -499,7 +499,73 @@ directly from the client to the cloud.
...
@@ -499,7 +499,73 @@ directly from the client to the cloud.
```erb
```erb
<%= form.file_field :attachments, multiple: true, direct_upload: true %>
<%= form.file_field :attachments, multiple: true, direct_upload: true %>
```
```
3.
That's it! Uploads begin upon form submission.
3.
Configure CORS on third-party storage services to allow direct upload requests.
4.
That's it! Uploads begin upon form submission.
### Cross-Origin Resource Sharing (CORS) configuration
To make direct uploads to a third-party service work, you’ll need to configure the service to allow cross-origin requests from your app. Consult the CORS documentation for your service:
*
[
S3
](
https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors
)
*
[
Google Cloud Storage
](
https://cloud.google.com/storage/docs/configuring-cors
)
*
[
Azure Storage
](
https://docs.microsoft.com/en-us/rest/api/storageservices/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services
)
Take care to allow:
*
All origins from which your app is accessed
*
The
`PUT`
request method
*
The following headers:
*
`Origin`
*
`Content-Type`
*
`Content-MD5`
*
`Content-Disposition`
(except for Azure Storage)
*
`x-ms-blob-content-disposition`
(for Azure Storage only)
*
`x-ms-blob-type`
(for Azure Storage only)
#### Example: S3 CORS configuration
```
xml
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration
xmlns=
"http://s3.amazonaws.com/doc/2006-03-01/"
>
<CORSRule>
<AllowedOrigin>
https://www.example.com
</AllowedOrigin>
<AllowedMethod>
PUT
</AllowedMethod>
<AllowedHeader>
Origin
</AllowedHeader>
<AllowedHeader>
Content-Type
</AllowedHeader>
<AllowedHeader>
Content-MD5
</AllowedHeader>
<AllowedHeader>
Content-Disposition
</AllowedHeader>
<MaxAgeSeconds>
3600
</MaxAgeSeconds>
</CORSRule>
</CORSConfiguration>
```
#### Example: Google Cloud Storage CORS configuration
```
json
[
{
"origin"
:
[
"https://www.example.com"
],
"method"
:
[
"PUT"
],
"responseHeader"
:
[
"Origin"
,
"Content-Type"
,
"Content-MD5"
,
"Content-Disposition"
],
"maxAgeSeconds"
:
3600
}
]
```
#### Example: Azure Storage CORS configuration
```
xml
<Cors>
<CorsRule>
<AllowedOrigins>
https://www.example.com
</AllowedOrigins>
<AllowedMethods>
PUT
</AllowedMethods>
<AllowedHeaders>
Origin, Content-Type, Content-MD5, x-ms-blob-content-disposition, x-ms-blob-type
</AllowedHeaders>
<MaxAgeInSeconds>
3600
</MaxAgeInSeconds>
</CorsRule>
<Cors>
```
### Direct upload JavaScript events
### Direct upload JavaScript events
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录