How do I resize an image on upload via a signed URL?

andersr
andersr Member ✭
in Developer APIs

Hi, apologies if this question already has been asked but I searched the docs and did not find an answer or everything I tried resulted in an error.

I am currently generating a signed upload URL as follows on the server:

` const signature = cloudinary.utils.api_sign_request(

{ timestamp },

CLOUDINARY_API_SECRET

);`

Then, on the client, I am uploading the image as follows:

`const { signature, timestamp } = await response.json();

const form = new FormData();

form.append("file", file);

const res = await fetch(

`https://api.cloudinary.com/v1_1/${cloudinaryName}/image/upload?api_key=${cloudinaryApiKey}&timestamp=${timestamp}&signature=${signature}`,

{

method: "POST",

body: form,

}

);`

This is working fine, except I want to also do an eager resize of this image on upload. I have tried inserting resize values based on what I have seen in the docs but always get an unauthorized response. I also tried updating my default preset to include the resize but that did not help. How can I resize the image on upload? Can I use a preset, and if so how?

Thanks for any tips and advice!

Answers

  • Tamara
    Tamara Member, Cloudinary Staff Cloudinary Staff
    edited May 9

    Hi there,

    If you want to add eager transformation, you can add it in the upload preset in the upload manipulation

    Then, include the upload preset like that: form.append('upload_preset',upload_preset). Below I'm also including a sample JSFiddle of chunked uploads implemented within JS that you can use -

    https://jsfiddle.net/leptians/hLajmbpf/

    Can you try to do it from there and let me know if that works?

    Looking forward to your response,

    Best,

    Tamara

Categories