I have created a file uploader that works between our Toddle app and Supabase. Our initial approach was to handle file uploads with an edge function, but we encountered issues with Supabase throttling our upload speed and limiting the maximum file size to 4MB.
As a result, we opted for a somewhat unconventional solution by managing the file upload logic within Toddle itself. Here, we handle a series of calls to complete our upload process.
The basic flow of our upload functionality:
1. First, we call a function that returns a signed URL to our bucket.
2. Then, we call a PUT function, which uploads our file to the bucket using the signed URL.
3. Next, we make a call to retrieve file info for the uploaded file.
4. Finally, we call a function that creates a record in a table, containing the file info from the bucket, which we can reference later.
This solution works fine overall, although the logic becomes a bit messy in the upload functionality within the component. There are many calls to manage, and we need to handle error handling and maintain the correct sequence of scheduling. This becomes especially tricky when handling multiple files, as we loop through this sequence of calls for each item
However, I’ve noticed that we can’t directly access or manipulate the file object returned from the input, as it’s a JavaScript object. To solve this, I created a custom function that converts the file object into a JSON object, allowing us to manipulate it.
My main challenge is figuring out how to make better use of the built-in logic of the web platform for file uploads, without relying too heavily on custom functions. For example, I’d like to use functions such as FileReaderSync.readAsDataURL() to add a preview of the file in an image element if the file is an image. However, I'm unsure of the best way to organize and manage the FileList in Toddle, or if I’m forced to implement my own handling, as I currently do to manage the underlying file object.
.jpeg/public)