responsive_breakpoints available in v1_1 upload?
Hi. I'm trying to upload images using the v1_1 endpoint, but when I include 'responsive_breakpoints' (https://cloudinary.com/documentation/responsive_images) JSON in my axios upload request, the upload fails. I'm unable to access data on why it fails.
Are 'responsive_breakpoints' available on the v1_1 upload endpoint, or are they a v2 feature? Is there anything similar on v1_1 (if I needed to continue to use that version)?
-
Hi Wayne,
In regard to v1_1, it is our current API endpoint and the only one, there is no v2 for API endpoint at this point. Perhaps, could you be referring to our SDK v2?
And to answer to your question, responsive breakpoints is an optional parameter in our Upload API. You can refer to the following documentation for more info.
Can you share your code and the response you are getting so I can take a look at it?
-
Thanks for replying, Erwin.
I might be getting confused with the versioning between products alright.
I'm trying to get the response but right now the interface I'm going through is failing silently. I'll update as/when I can get that info, but in the meantime here's how I'm attempting the upload (which is a base64-encoded upload... in case that's relevant):
let data = {
file: screenshot,
folder: dirname,
upload_preset: "abc123",
public_id: filename,
responsive_breakpoints: { create_derived: true, bytes_step: 20000, min_width: 200, max_width: 1000 }
}axios.post('https://api.cloudinary.com/v1_1/abc123/image/upload', data).then((response) => {
console.log('worked', response);
}, (error) => {
console.log('did not work', error);
}); -
Hi Wayne,
Thanks for the update.
That's interesting that you get a silent response since I see that you have logged the response.The only thing I see doesn't look right, but I assume this is just a copy-paste issue is to have a axios.post in the same line as closing bracket of the data.
It's supposed to look like:
responsive_breakpoints: { create_derived: true, bytes_step: 20000, min_width: 200, max_width: 1000 }
}
axios.post('https://api.cloudinary.com/v1_1/abc123/image/upload', data)....Can you reproduce it somewhere in JSFiddle or something similar so I can reproduce it?
-
Sorry; there was a copy and paste error above, and I've access to the debug console now to feed into this discussion. My code was constructed ok I think.
I get a 500 error when I include the responsive_breakpoints (it works without them and returns a 200). Here's an example of the JS being invoked: https://jsfiddle.net/coderkind/8gv6c2oz/2/
First bit of the error thrown is as such:
Mar 12 00:22:50 - INFO - did not work { Error: Request failed with status code 500
at createError (/var/task/node_modules/axios/lib/core/createError.js:16:15)
at settle (/var/task/node_modules/axios/lib/core/settle.js:17:12)
at IncomingMessage.handleStreamEnd (/var/task/node_modules/axios/lib/adapters/http.js:260:11)
at IncomingMessage.emit (events.js:203:15)
at endReadableNT (_stream_readable.js:1145:12)
at process._tickCallback (internal/process/next_tick.js:63:19) -
Great; thanks a lot for checking, Erwin.
I'm uploading to Cloudinary from Checkly - a testing environment that operates a strict allow-list as to which NPM modules you can use (see https://www.checklyhq.com/docs/browser-checks/runner-specification/). I'm not free to install anything outside of what they permit.
If you need any more info on my failed upload attempts then please let me know, and thanks again for following this up.
-
Hi Wayne,
Sorry for the delay and thanks for your patience on this.
You would need to pass this as a JSON string that would as follow:responsive_breakpoints: '[{"create_derived":true,"bytes_step":20000,"min_width":200,"max_width":1000}]'However, keep in mind, you have to signed your upload, because otherwise you would run into something similar to this error message:
X-Cld-Error: Responsive breakpoints parameter is not allowed when using unsigned upload. Only upload_preset,callback,public_id,folder,tags,context,metadata,face_coordinates,custom_coordinates,source,filename_override upload parameters are allowed., Upload preset must be whitelisted for unsigned uploads
Hope this helps and answer to your question.
Cheers,
Erwin Lukas -
Thanks; it does. I didn't sign my upload, so this was the error I eventually saw after scrolling through the feedback. So you can upload unsigned images to Cloudinary, but what's critical about this responsive breakpoint parameter that requires a signed upload? Is it because it generates multiple images based off of it?
-
Hi Cedric,
The basic parameters you need for a signed upload are file, api_key, timestamp, and the signature.
You can refer to the documentation: https://cloudinary.com/documentation/upload_images#uploading_with_a_direct_call_to_the_rest_apiRegards,
Francis
Post is closed for comments.
Comments
14 comments