responsive_breakpoints available in v1_1 upload?

Comments

12 comments

  • Avatar
    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
    Comment actions Permalink
  • Avatar
    Wayne McManus

    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
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    Wayne McManus

    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
    Comment actions Permalink
  • Avatar
    Erwin Lukas

    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
    Comment actions Permalink
  • Avatar
    Wayne McManus

    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
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    Wayne McManus

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

    0
    Comment actions Permalink
  • Avatar
    Erwin Lukas

    My pleasure :)

    0
    Comment actions Permalink

Please sign in to leave a comment.