Theo's Typesafe Cult•17mo ago

R2 Presigned URL

I'm trying to figure out how or if I can somehow have the Object thats put in the presigned URL to have a expiration time as well and not only the url.

37 Replies

elpupperOP•17mo ago

@jacobmgevans

JacobMGEvans•17mo ago

Huh... Is that something you can do with S3?

elpupperOP•17mo ago

i dont even know 😂 i mean doesnt this feature make sense? cause you can PUT a object that EXPIRES after x amount of time but not with a presigned url?

JacobMGEvans•17mo ago

@markr is this something you can do with S3 and would it be useful for R2, asking for future reasons 😆

elpupperOP•17mo ago

realisticly how would it not be useful for r2 or even s3

markr•17mo ago

Yeah, we do plan to have this functionality, but I haven't gotten around to implementing it yet.

elpupperOP•17mo ago

damn so what do i do now 😭 cause my main issue right now is that i cant pass a lot of images at once through my amplify i get a 405 error (tRPC)

JacobMGEvans•17mo ago

Let me know if I can help with anything. (at least ill try again 🥲)

markr•17mo ago

@elpupper To clarify, do you mean that you want to adjust how long the presigned URL is good for, or do you want to set an expiry on the files uploaded?

elpupperOP•17mo ago

Expiry on the file uploaded

Lopen•17mo ago

Side note Use regular next api for file related stuff for your own mental health

elpupperOP•17mo ago

amplify has 3.5 mb limit any more mental health side notes u want to give me to improve it i need atleast 5mb

Lopen•17mo ago

You can check file size before upload then compress with sharp

elpupperOP•17mo ago

is that so currently what im doing is converting the image to base64 then sending it through trpc

Lopen•17mo ago

That seems straightforward What else you need?

elpupperOP•17mo ago

the thing is it seems straightforward but there is a minimum of 5 images and a maximum of 10 set by me is there a way to compress base64 or something

Lopen•17mo ago

You can compress then change to base64

elpupperOP•17mo ago

ok gonna have a go at it how well does it compress?

Lopen•17mo ago

But make sure you expand your function with lot's fo if/else/switch To check if size after compression if it's still more then try a different percentage till you reach 80% or so to find the right fit but they is still possibilities of it passing but its narrow

elpupperOP•17mo ago

to be honest a human isnt going to see these images as long as you can recognize the images

Lopen•17mo ago

It's very good 5mb file ends upto 150kb -200kb on 50% compression with sharp

elpupperOP•17mo ago

oh nice yeah thats nice really dont know why i didnt think of that thanks i dont think sharp really helps me here you need to have the dir of the image i found something else tho https://www.npmjs.com/package/compressorjs

Lopen•17mo ago

You can use fs to fix that Or you can convert to base64 or buffer then feed that to sharp They are so many approaches

elpupperOP•17mo ago

im using what i linked its doing all of that for me but now the issue is it doesnt work with pngs 😂

Lopen•17mo ago

🤣🤣back to sharp then

elpupperOP•17mo ago

nope im the goat

file.arrayBuffer().then((buffer) => {
                                                        const blob = new Blob([buffer], { type: "image/jpeg" });
                                                        const newFile = new File([blob], file.name, { type: "image/jpeg" });
                                                        console.log(newFile);


                                                        new Compressor(newFile, {
                                                            quality: 0.4,
                                                            success: async (compressedResult: File) => {
                                                                const base64 = await getBase64(compressedResult);
                                                                setImages((prevImages) => [...prevImages, {
                                                                    name: compressedResult.name,
                                                                    type: compressedResult.type,
                                                                    size: compressedResult.size,
                                                                    base64: base64 as string
                                                                }]);
                                                            },
                                                            error: (err) => {
                                                                console.log(err.message);
                                                            },
                                                        });
                                                    });

file.arrayBuffer().then((buffer) => {
                                                        const blob = new Blob([buffer], { type: "image/jpeg" });
                                                        const newFile = new File([blob], file.name, { type: "image/jpeg" });
                                                        console.log(newFile);


                                                        new Compressor(newFile, {
                                                            quality: 0.4,
                                                            success: async (compressedResult: File) => {
                                                                const base64 = await getBase64(compressedResult);
                                                                setImages((prevImages) => [...prevImages, {
                                                                    name: compressedResult.name,
                                                                    type: compressedResult.type,
                                                                    size: compressedResult.size,
                                                                    base64: base64 as string
                                                                }]);
                                                            },
                                                            error: (err) => {
                                                                console.log(err.message);
                                                            },
                                                        });
                                                    });

this is so sick have a look at this one 😄

Lopen•17mo ago

What if a different file type is provided?

elpupperOP•17mo ago

its only images the input can only be images

elpupperOP•17mo ago

Lopen•17mo ago

Devices regularly Screenshot is .png Camera pictures. Jpg

elpupperOP•17mo ago

i mean i dont see what needs to be changed

Lopen•17mo ago

Here the buffer is jpeg

elpupperOP•17mo ago

what do u see

Sturlen•17mo ago

A potential problem I'm seeing is that you're always creating a JPEG file, regardless of the input:

const newFile = new File([blob], file.name, { type: "image/jpeg" });

const newFile = new File([blob], file.name, { type: "image/jpeg" });

unless you convert all images to JPEG beforehand, you could end up with PNG in JPEG file

elpupperOP•17mo ago

i made it so that you can only put in jpeg/jpg but how would you convert png to jpeg properly without sharp all ud have to do is remove the alpha right?

Sturlen•17mo ago

these are two completely differenty file formats, so you'd need a library to handle that. sticking to only one format is a lot easier

elpupperOP•17mo ago

the main difference that i know of is the alpha value also when passing a png image it still gets compressed a nice amount just not as much as jpg/jpeg

Gaming

Programming

R2 Presigned URL