Active Storage Direct Upload 正在使用简单表单的上传期间删除文件输入 - Rails 6

Question

I managed to get direct uploads working with simple_form gem, using an input options helper method. The issue I am having, is that starting a direct upload will cause the progress bar to show in place of the file input and I am unable to re-upload another file if that file input has the wrong file attached. Essentially, I am trying to replace files that may have been uploaded - after the fact. How can I stop direct upload from replacing the file input with the progress bar?

direct_upload_file_input.rb

class DirectUploadFileInput < SimpleForm::Inputs::FileInput 
 def input_html_options
  super.merge({direct_upload: true})
 end 
end

_form.html.erb

has_one :media_file

  <%= f.input :media_file, as: :file, input_html: {:onchange => "activate_progress_bar", direct_upload: true}, label: false %>

direct_upload.js

// direct_uploads.js

addEventListener("direct-upload:initialize", event => {
  const { target, detail } = event
  const { id, file } = detail
  target.insertAdjacentHTML("beforebegin", `
    <div id="direct-upload-${id}" class="direct-upload direct-upload--pending">
      <div id="direct-upload-progress-${id}" class="direct-upload__progress" style="width: 0%"></div>
      <span class="direct-upload__filename"></span>
    </div>
  `)
  target.previousElementSibling.querySelector(`.direct-upload__filename`).textContent = file.name
})

addEventListener("direct-upload:start", event => {
  const { id } = event.detail
  const element = document.getElementById(`direct-upload-${id}`)
  element.classList.remove("direct-upload--pending")
})

addEventListener("direct-upload:progress", event => {
  const { id, progress } = event.detail
  const progressElement = document.getElementById(`direct-upload-progress-${id}`)
  progressElement.style.width = `${progress}%`
})

addEventListener("direct-upload:error", event => {
  event.preventDefault()
  const { id, error } = event.detail
  const element = document.getElementById(`direct-upload-${id}`)
  element.classList.add("direct-upload--error")
  element.setAttribute("title", error)
})

addEventListener("direct-upload:end", event => {
  const { id } = event.detail
  const element = document.getElementById(`direct-upload-${id}`)
  element.classList.add("direct-upload--complete")
})

Answer 1

In your direct-upload:initialize method you're replacing the target with the progress bar div. The target in this case is set to the event.target which is your file input field. You need to replace or insert the progress bar on a different page element if you want to keep the file input but also display the progress bar. Something like...

let progress = document.getElementById('progress');
progress.innerHTML =
  `<div id="direct-upload-${id}" class="direct-upload direct-upload--pending">
    <div id="direct-upload-progress-${id}" class="direct-upload__progress" style="width: 0%"></div>
    <span class="direct-upload__filename"></span>
  </div>`