Theo's Typesafe Cult•2y 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•2y ago

@jacobmgevans

JacobMGEvans•2y ago

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

elpupperOP•2y 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•2y ago

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

elpupperOP•2y ago

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

markr•2y ago

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

elpupperOP•2y 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•2y ago

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

markr•2y 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•2y ago

Expiry on the file uploaded

Lopen•2y ago

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

elpupperOP•2y 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•2y ago

You can check file size before upload then compress with sharp

elpupperOP•2y ago

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

Lopen•2y ago

That seems straightforward What else you need?

elpupperOP•2y 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•2y ago

You can compress then change to base64

elpupperOP•2y ago

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

Lopen•2y 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•2y ago

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

Lopen•2y ago

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

elpupperOP•2y 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•2y 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•2y ago

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

Lopen•2y ago

🤣🤣back to sharp then

elpupperOP•2y 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•2y ago

What if a different file type is provided?

elpupperOP•2y ago

its only images the input can only be images

elpupperOP•2y ago

Lopen•2y ago

Devices regularly Screenshot is .png Camera pictures. Jpg

elpupperOP•2y ago

i mean i dont see what needs to be changed

Lopen•2y ago

Here the buffer is jpeg

elpupperOP•2y ago

what do u see

Sturlen•2y 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•2y 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•2y 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•2y 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