Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Images] Added new Direct Creator Upload v2 #3397

Merged
merged 7 commits into from
Feb 9, 2022
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -11,49 +11,92 @@ To request a one-time upload URL, simply have your back-end (or Worker script) c

```bash
curl --request POST \
--url https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v1/direct_upload \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer :token'
--url https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v2/direct_upload \
marciocloudflare marked this conversation as resolved.
Show resolved Hide resolved
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer :token' \
--form 'requireSignedURLs=true' \
marciocloudflare marked this conversation as resolved.
Show resolved Hide resolved
--form 'metadata={"key":"value"}'
```

You will receive a response similar to this:

```json
{
"result": {
"id": "2cdc28f0-017a-49c4-9ed7-87056c839c2",
"uploadURL": "https://upload.imagedelivery.net/2cdc28f0-017a-49c4-9ed7-87056c839c2"
},
"result_info": null,
"success": true,
"errors": [],
"messages": []
"result": {
marciocloudflare marked this conversation as resolved.
Show resolved Hide resolved
"id": "2cdc28f0-017a-49c4-9ed7-87056c83901",
"uploadURL": "https://upload.imagedelivery.net/2cdc28f0-017a-49c4-9ed7-87056c83901"
},
"result_info": null,
"success": true,
"errors": [],
"messages": []
}
```

Your back-end endpoint should return the `uploadURL` property to the client enabling it to upload the image without needing to pass any authentication information with it. Here is a simple HTML page that takes a one-time upload URL and uploads any selected image:
In the example above, `id` is a future image identifier that will be uploaded by a creator.

<Aside type="note" header="Note">

Previously, with `direct_upload` v1, the ID was an identifier of a request, not an image itself. Therefore, there was no way to know if an image had been really uploaded.
marciocloudflare marked this conversation as resolved.
Show resolved Hide resolved

</Aside>

With `direct_upload` v2, a new draft image record is created. It will not appear on a [list of images](https://api.cloudflare.com/#cloudflare-images-list-images ), but it is possible to fetch an image record with the provided ID to see its current status:
marciocloudflare marked this conversation as resolved.
Show resolved Hide resolved

```bash
curl --url https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v1/2cdc28f0-017a-49c4-9ed7-87056c83901 \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer :token'
```

You will receive a response similar to this:

```json
{
"result": {
marciocloudflare marked this conversation as resolved.
Show resolved Hide resolved
"id": "2cdc28f0-017a-49c4-9ed7-87056c83901",
"metadata": {
"key": "value":
},
"uploaded": "2022-01-31T16:39:28.458Z",
"requiredSignedURLs": true,
"variants": [
"https://imagedelivery.net/Vi7wi5KSItxGFsWRG2Us6Q/2cdc28f0-017a-49c4-9ed7-87056c83901/public",
"https://imagedelivery.net/Vi7wi5KSItxGFsWRG2Us6Q/2cdc28f0-017a-49c4-9ed7-87056c83901/thumbnail"
],
"draft": true
},
"success": true,
"errors": [],
"messages": []
}
```

Once the image data is uploaded, the `draft` property will change to `false` and will not be part of the response anymore.

Your back-end endpoint should return the `uploadURL` property to the client, enabling it to upload the image without needing to pass any authentication information with it. Here is an example of a simple HTML page that takes a one-time upload URL and uploads any image the user selects:

```html
<html>
<body>
<form
action="INSERT_UPLOAD_URL_HERE"
method="post"
enctype="multipart/form-data"
>
<input type="file" id="myFile" name="file" />
<input type="submit" />
</form>
</body>
<body>
<form
action="INSERT_UPLOAD_URL_HERE"
method="put"
enctype="multipart/form-data"
>
<input type="file" id="myFile" name="file" />
<input type="submit" />
</form>
</body>
</html>
```

By default, the `uploadURL` will expire after 30 minutes if unused.

If you want to override this option, add the following argument to the cURL command:
To override this option, add the following argument to the cURL command:

```bash
--data '{"expiry":"2021-09-14T16:00:00Z"}'
--data '{"expiry":"2021-09-14T16:00:00Z"}'
```

The expiry value must be a minimum of two minutes and maximum of six hours in the future.
4 changes: 4 additions & 0 deletions products/images/src/content/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,10 @@ Yes. Based on the `Accept` HTTP request header Cloudflare Images will be served

Refer to our [Plans](https://www.cloudflare.com/plans/) page for up-to-date information on pricing.

### Is there a limit on image size or file size for Image Resizing?

Yes. Maximum image size is 100 megapixels (for example, 10,000×10,000 pixels large). Maximum file size is 70 MB. GIF animations are limited to 100 megapixels total (sum of sizes of all frames).

### Resizing failed and I received an error response with a code. What does it mean?

Refer to [Troubleshoot Image Resizing problems](https://support.cloudflare.com/hc/articles/4412024022029) for more information on how to troubleshoot some of the more common issues, including error responses.
Expand Down