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
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);
upload_entry.js in LiveView source code and inject my file-like object via it.
Option C: Talk to server side instead of LiveUploaders
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.