Uploading files with dynamic S3 presigned URLs

[johnbonds]

I'm writing a react native app with file upload capability. Not sure if I'm just missing a basic concept here but it seems like the context is configured to upload for a single destination URL. If I have a different URL for each file being uploaded and I'm developing my own UI, how do I use the uploady context API to upload files? Currently using axios directly.

[yoavniran]

Hey @johnbonds you can easily do this using useRequestPreSend.

This guide explains the concept in detail - Dynamic Parameters

This post may also be useful for you: https://dev.to/danstanhope/react-file-upload-using-s3-pre-signed-urls-1a6d

Hope these are helpful. If you have more questions please let me know

[CanRau]

Though there's currently no way of using chunked sender to upload large files to a presigned url right?

Would have to adapt existing senders and make my own?

Edit: hmm giving it a try in a moment, maybe it just works & I just misunderstood the URL uploading part 🤔

Chunked uploading doesn't support grouped uploads (in single XHR request) or URL uploading. These will be handed over to the default @rpldy/sender

Update: So looks like it should be possible with useChunkStartListener, reporting back 🖖🏼

[yoavniran]

You can most certainly set/update the Upload URL at runtime. The best place to do that is by using useRequestPreSend hook (as I mentioned before ☝️).

URL Uploading refers to sending a URL as the upload (instead of a file). For example when working with Cloudinary & fetch URLs. Facilitated by the UploadUrlInput component

[CanRau]

Interestingly get CORS errors trying to use a R2 signed url, though when I intercept and use fetch within useRequestPreSend it works fine, tried passing some settings but haven't yet figured it out, could share some code tomorrow but maybe someone's got a hint? 😇

[mbopp]

Hi @yoavniran Can this strategy be used with chunked uploads, where each chunk would need a unique pre-signed URL?

[yoavniran]

hi @mbopp for chunked uploads, you have the CHUNK_START event. see here.