Hi all

Context
I am making a small voice note sharing service in LiveView: record a voice note in the web page, it gets uploaded to S3 and then LiveView provides a player page that could be shared to twitter with nice and interactive look.

I managed to record mp3 audio with pretty cool visualization (right now could be seen at https://voicepen.fly.dev/ ) as just a blob, can generate a file-like object via URL.createObjectURL(mp3Blob) and I am trying to upload it to S3 via external uploads (why to pass file through the server side if I need just a link to the final object on S3) and.. I can’t figure how to do it

External uploads
LiveView has great external uploaders that work just fine with real file inputs, but how could I use them with something generated dynamically in javascript?

My understanding is that in JavaScripts it is not easy (maybe even not possible in older browsers) to replace real file input with dynamic objects, but external uploads are anyway going through the JavaScript-side HTTP requests. I’d just like to piggy back on LiveView mechanics for easy error reporting, progress information, consume_uploaded_entries in handle_event.

Options
I can see several options of possible research and would appreciate comments on which of these could be more promising. Hopefully somebody has done something similar or possibly have contributed to implementing support for external uploads

Option A: Try replacing or adding a file input to the existing LiveView form with external uploads

// something like this:
const formElement = document.forms.namedItem("upload-form");
const formData = new FormData(formElement);
formData.append("audio_file", mp3Blob);

Option B: Dive into JavaScript side of LiveView uploaders and plug into them
I.e. study live_uploader.js, upload_entry.js in LiveView source code and inject my file-like object via it.

Option C: Talk to server side instead of LiveUploaders
Study same live_uploader.js and related files, figure which messages they send to live socket and do the same.. essentially replicating these, maybe it’s simpler than it sounds

Option D: Forget the whole thing as too complex and just do client-side upload
The biggest reason to go via external liveview uploads for me is my not too high knowledge of the whole Phoenix (I am new to elixir), so by utilizing standard(ish) mechanisms I hope to avoid the unexpected issues and get standard benefits (standard callbacks, error messaging, progress indicators), but maybe it’s not worth the effort needed for workaround.

Option E: Something very different
Do I miss something else that could be much similar

What would you do? I’ll appreciate any advice and pointers to where to look further.