File uploads - Allow users of my app to upload assets (PDF or images) through a file picker.

I never knew how difficult file uploads could be. My goal is to allow users of my app to upload assets (PDF or images) through a file picker. I want to upload the file to sanity, return the file URL and name in the response, and save the file name and URL into my database so that they can be downloaded or deleted in the future. Is there a tutorial to follow? I’ve read https://www.sanity.io/docs/http-api-assets over and over again, but I do not see a use case where it would work because of the following line of code:
File path is not available with a file picker. Any direction or ideas would be great.

Hey , as a workaround/temp solution you can upload your asset to a 3rd party service like Firebase, get back a URL then upload that to Sanity.io

Is that what you ended up doing?

It is, but just re-reading the docs this might help: https://www.sanity.io/docs/js-client#examples-uploading-assets-from-the-browser

Thanks for linking those examples. The flow makes sense, but it sucks having to learn Firebase just to do this.

I assume that you’re doing this outside of the studio,

@sanity/client

works in the browser so you can do something like this:

File picker return a File object which is a fancy blob so you should be able to pass it straight to the client

I’ll try this tomorrow. Thank you!

Worked like a charm. Thank you.

How are you handling not sharing your token from the frontend? If I were to use a lambda function (netlify), I am limited to a 10 seconds, which may not allow file uploads on slower connections. It seems this is solved with uploading to an S3 bucket with a signed URL. I don’t think sanity does this.