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.
- 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 :
assets/js/dropzone-live.js
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]
}
})
},
}
- I got a warning in
Dropzone.ex
, at :
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
|> 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!