Skip to main content

responsive_breakpoints available in v1_1 upload?

Wayne McManus

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)?

0

Comments

14 comments

Date Votes
  • Erwin Lukas

    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?

    0
  • Wayne McManus
    Edited

    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);
    });
    0
  • Erwin Lukas

    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?

    0
  • Wayne McManus
    Edited

    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)
    0
  • Erwin Lukas
    Edited

    Hi Wayne,

    Apologize for the delay on the response. I'm able to reproduce the issue, but unsure why that would failed.
    Let me check on this internally and will get back to you.

    On a side-note, is there any reason you are not using our SDK for this purpose?

    0
  • Wayne McManus
    Edited

    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.

     

    0
  • Wayne McManus

    Hi Erwin. Did you hear anything back? If it's a bug and the fix timescales are long then no worries; will park it for a while.

    0
  • Erwin Lukas

    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

    0
  • Wayne McManus

    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?

    0
  • Erwin Lukas

    Hi Wayne,

    That's correct, because you can define a very minute breakpoints, it could potentially drive-up your usage.
    Unsigned upload is meant to be very limited due to its nature. We always recommend to do signed upload whenever possible.

    Cheers,
    Erwin Lukas

    0
  • Wayne McManus

    Thanks Erwin; all makes sense. Thanks for the help.

    0
  • Erwin Lukas

    My pleasure :)

    0
  • Cédric Waxweiler

    Hello !
    Can you tell me how can I have to do to signed upload, please ?

    What are the required parameters for the signed upload, please ?

    Thank you very much :-)

    0
  • Francis Tagbo

    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_api

    Regards,
    Francis

    0

Post is closed for comments.

Didn't find what you were looking for?

New post