Direct signed uploads
Hello,
We are currently using AWS s3 to generate a signed url to upload assets to on our frontend. Based on s3 events, we either create or update the corresponding Cloudinary asset.
We would like to remove s3 from our upload flow and utilize signed uploads to Cloudinary from the browser.
I did see this guide https://cloudinary.com/documentation/upload_images#uploading_with_a_direct_call_to_the_rest_api, however, I am curious if there is a way to retrieve a single url which contains all of the necessary information to upload to Cloudinary with only the file data in the body, like s3?
If not, is there any plans to implement a feature such as this?
Thank you in advance!
-
Hi Nicole,
The documentation that you linked to is effectively the method you'd use to accomplish this, and how exactly to do it depends on what you need and which libraries you're using
When our upload API is called, either directly by your code or using one of our SDKs, there are two basic options for how the call is authenticated:
* A signed upload, where a signature is provided that is signed with your account's API secret and which validates the parameters that are sent in the API call
* An unsigned upload, where no signature is provided but you provide an upload_preset parameter which references an upload preset in your account settings, telling us how to store and process an incoming upload that uses the preset: https://cloudinary.com/documentation/upload_images#unsigned_upload
If you want to simplify how you're sending the upload so that effectively all the parameters are in the query string, other the file itself, either option will work for you, with the unsigned method being simpler because you don't need to create a signature, and the signed method being more powerful because it's authenticated and can do things that are not allowed in an unsigned call (like overwrite existing files)
To self-implement a signed upload, there's a guide here: https://cloudinary.com/documentation/upload_images#generating_authentication_signatures
The simplest implementation will create a signature just based on the timestamp though in reality I think you'll want to use and sign other parameters too like the public_id to assign to the newly uploaded file, any tags you want applied, etc.
Once you have the options and the corresponding signature, the upload is then a POST request to the upload API endpoint, including the parameters to use, and sending the file data in the body, or via a `file` parameter that's a URL from where we can retrieve the asset from.
Regards,
Stephen
0 -
Hi Stephen,
Thank you for the response! Based on what you described, I generated a signature using the Cloudinary Node.js SDK and tried sending the following request:
method: 'POST',
body: file,
});
where "file" is a byte array buffer but I got a 400 with the message: Missing required parameter - file. Did I miss something?
Thank you for the help!
Nicole
0 -
Hi Nicole,
Sorry, I see what you mean now and I wasn't completely correct in my previous answer.
You can't send the 'raw' file bytes in the POST body, it needs to be encoded the same way as if it was a HTML form post, so something like this should work given your example:
formData = new FormData()
formData.append("file", file);
fetch(url, {
method: "POST",
body: formData
})In that case, I'd recommend also adding the other parameters as separate fields in the formdata for ease of reading and maintenance, but it should work as part of the URL also.
Can you please try that and let me know if it works? If it's still not working for you, it may be best to create a support request so you can include the exact values, cloud_name, etc, and we can check the logs from our sideRegards,
Stephen0 -
Hi Stephen,
That worked! Thank you for all the help!
Nicole
0 -
Hi Nicole,
Thanks for the update- I'm glad it's working for you now.
Apologies again for my earlier mistake!Thanks,
Stephen
0
Post is closed for comments.
Comments
5 comments