External uploads with just a blob using LiveView?

artem · October 17, 2023, 10:29pm

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.

mcrumm · October 18, 2023, 1:06am

You can use the upload() method on a client-side hook to enqueue a File-like object to a live_file_upload. This works for external uploads to S3 as well. Here is an example hook:

github.com

mcrumm/live_upload_example/blob/main/assets/js/media_recorder_demo.js

// This hook demonstrates a way for a user to record media
// directly in their browser and upload it to the web server (or
// external source) via LiveView.

function SimpleRecorder(stream, mimeType, callback) {
  let chunks = [];
  let recorder = new MediaRecorder(stream, { type: mimeType })

  recorder.addEventListener("dataavailable", event => {
    if (typeof event.data === "undefined") return
    if (event.data.size === 0) return
    chunks.push(event.data)
  })

  recorder.addEventListener("stop", () => {
    let recording = new Blob(chunks, { type: mimeType })
    callback(recording)
    chunks = []
  })

This file has been truncated. show original

…and its corresponding LiveView example:

github.com

mcrumm/live_upload_example/blob/main/lib/drops_web/live/uploads_live/media_recorder.ex

defmodule DropsWeb.UploadsLive.MediaRecorder do
  use DropsWeb, :live_view

  @impl Phoenix.LiveView
  def mount(_params, _session, socket) do
    socket =
      socket
      |> assign(:media_error, nil)
      |> assign(:media_ready, false)
      |> assign(:record_action, :record)
      |> assign(:uploaded_files, [])
      |> allow_upload(:clips,
        accept: ~w(audio/*),
        max_size: 100_000_000,
        auto_upload: true,
        progress: &handle_progress/3
      )

    {:ok, socket}
  end

This file has been truncated. show original

artem · October 23, 2023, 9:15pm

Ah, I didn’t realize there’s an upload() method available to the hook! It worked, thank you!