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

andersr
andersr Member Posts: 1 ✭
edited June 2023 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!

Tagged:

Answers

  • Tamara
    Tamara Member, Cloudinary Staff Posts: 123
    edited May 2023

    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