Dropzone occasionally returns broken image with GCS error "The specified key does not exist"

Hi everyone,

Over the past few days, many customers have been experiencing issues with our image dropzone. The page ends up with broken images leading to an error “The specified key does not exist”, such as here:
https://storage.googleapis.com/encheres-immo-public-assets/thumbnail-6841abbf-034c-4da0-be18-53ec38450215

This bug is giving me trouble because nobody in the team has been able to reproduce this bug, and our Dropzone (using Dropzone.js and GCS) was coded over three years ago by a former employee.

Currently, I have two leads.

1. Since the bug doesn’t affect the majority of my customers, maybe it’s related to the JavaScript hook running in their browser? Maybe the XMLHttpRequest can be blocked client side ?

Here is the hook :

import Dropzone from "dropzone"

export default {
  mounted() {
    let _this = this
    this.files = {}
    this.dropzone = new Dropzone(this.el, {
      url: ([file]) => file.signedUrl,
      method: "put",
      paramName: "asset",
      withCredentials: false,
      headers: {
        "Cache-Control": null,
        "X-Requested-With": null,
      },
      parallelUploads: 20,
      clickable: ".fileinput-button",
      thumbnailWidth: 600,
      thumbnailHeight: 450,
      thumbnailMethod: "contain",
      accept(file, done) {
        file.acceptCallback = done
        _this.files[file.upload.uuid] = file
        _this.pushEvent("added_file", {
          uuid: file.upload.uuid,
          name: file.name,
          type: file.type,
        })
      },
      thumbnail(file, url) {
        _this.el.querySelector(`img#asset-${file.upload.uuid}`).src = url
      },
      // Have to make this configuration to send raw files to GCS
      sending(file, xhr) {
        xhr.setRequestHeader("Content-Type", file.type)
        let _send = xhr.send
        xhr.send = function () {
          _send.call(xhr, file)
        }
      },
      success(file, response) {
        _this.pushEvent("upload_success", {
          upload_id: file.upload.uuid,
        })
      },
      uploadprogress(file, progress, bytesSent) {
        _this.pushEvent("upload_progress", {
          upload_id: file.upload.uuid,
          progress: progress,
        })
      },
    })
  },
  updated() {
    let _this = this
    this.el.querySelectorAll("img.new-asset").forEach((element) => {
      const uploadId = element.getAttribute("data-upload-uuid")
      let file = uploadId ? _this.files[uploadId] : null
      if (file && file.dataURL) {
        element.src = file.dataURL
      }
    })

    this.el.querySelectorAll(".file").forEach((element) => {
      const uploadId = element.getAttribute("data-upload-uuid")
      const signedUrl = element.getAttribute("data-upload-url")
      let file = uploadId ? _this.files[uploadId] : null

      if (file && file.status === "added") {
        file.signedUrl = signedUrl
        file.acceptCallback()
        _this.files[null]
      }
    })
  },
}

2. I got a warning in Dropzone.ex , at :

[details=“handle_event(“added_file”)”]

  def handle_event(
        "added_file",
        %{"uuid" => upload_id, "name" => name, "type" => type},
        %{assigns: %{assets: assets}} = socket
      ) do
    upload_url =
      Application.get_env(:goth, :json)
      |> Poison.decode!()
      |> GcsSigner.Client.from_keyfile()
      |> GcsSigner.sign_url(@gcs_bucket, upload_id, verb: "PUT", content_type: type)

    url =
      upload_url
      |> URI.parse()
      |> Map.put(:query, nil)
      |> URI.to_string()

    asset = %{
      id: UUID.uuid4(),
      url: url,
      name: name,
      content_type: type,
      provider: "gcs",
      upload_id: upload_id,
      upload_url: upload_url,
      uploaded: false,
      new: true,
      progress: 0
    }

    {:noreply, assign(socket, :assets, assets ++ [asset])}
  end

[/details]

|> GcsSigner.Client.from_keyfile() raise the warning :

The function call will not succeed.

GcsSigner.sign_url(
  %GcsSigner.Client{:client_email => _, :private_key => _},
  <<101, 110, 99, 104, 101, 114, 101, 115, 45, 105, 109, 109, 111, 45, 112, 117, 98, 108,
    105, 99, 45, 97, 115, 115, 101, 116, 115>>,
  _upload_id :: any(),
  [{:content_type, _} | {:verb, <<_::24>>}, ...]
)

breaks the contract
(
  %{:client_email => String.t(), :private_key => String.t()},
  String.t(),
  String.t(),
  sign_url_opts()
) :: String.t()

(3.) Finally, I wonder if I shouldn’t get rid of all this legacy and undocumented code and redo this part in a more modern way. What are the Elixir libraries commonly used for file upload? I heard of Waffle for example?

I take all the opinions, suggestions, leads, help, and advice that could save me time. Thank you all!