direct upload using active storage in rails - input.dataset.directUploadUrl "undefined"

Question

Using rails 6 and trying to upload files using this drag and drop JS framework to local disk but am getting "Failed to load resource: the server responded with a status of 404 (Not Found)". This is due to the url variable not being defined.

Console error: ActionController::RoutingError (No route matches [POST] "/undefined".

I've followed all the steps from here: https://edgeguides.rubyonrails.org/active_storage_overview.html.

JS Code:

import { DirectUpload } from "@rails/activestorage"
function uploadFile(file) {

const input = document.querySelector('input[type=file]')
console.log(input)

  // your form needs the file_field direct_upload: true, which
  //  provides data-direct-upload-url
  const url = input.dataset.directUploadUrl <-- returns "undefined"
  console.log(url)
  const upload = new DirectUpload(file, url)

  upload.create((error, blob) => {
    if (error) {
      // Handle the error
    } else {
      // Add an appropriately-named hidden input to the form with a
      //  value of blob.signed_id so that the blob ids will be
      //  transmitted in the normal upload flow
      const hiddenField = document.createElement('input')
      hiddenField.setAttribute("type", "hidden");
      hiddenField.setAttribute("value", blob.signed_id);
      hiddenField.name = input.name
      document.querySelector('form').appendChild(hiddenField)
    }
  })

HTML:

    <div id="drop-area">
      <form class="my-form">
        <p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>
        <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)" data-direct-upload = "true">
        <label class="button" for="fileElem">Select some files</label>
      </form>
      <progress id="progress-bar" max=100 value=0></progress>
      <div id="gallery" /></div>
    </div>

        <%= javascript_pack_tag 'dropzone.js' %>

I'm wondering if active storage doesn't like form data that isn't neatly packaged in embedded ruby code like so:

<%= form.file_field :attachments, multiple: true, direct_upload: true %>

Method 2: If I try to send the file without using the active storage DirectUpload method I get "Failed to load resource: the server responded with a status of 400 (Bad Request)" with a console output of ActionController::ParameterMissing (param is missing or the value is empty: blob)

here's that JS code:

function uploadFile(file, i) {
  var url2 = 'rails/active_storage/direct_uploads'
  var xhr = new XMLHttpRequest()
  var formData = new FormData()
  xhr.open('POST', url2, true)
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')

   //Update progress (can be used to show progress indicator)
  xhr.upload.addEventListener("progress", function(e) {
    updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
  })

  xhr.addEventListener('readystatechange', function(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
      updateProgress(i, 100) // <- Add this
    }
    else if (xhr.readyState == 4 && xhr.status != 200) {
      // Error. Inform the user
    }
  })

  formData.append('upload_preset', 'ujpu6gyk')
  formData.append('file', file)
  xhr.send(formData)
}

after some research into what URL to use, 'rails/active_storage/direct_uploads' seemed to get past the 404 message and instead throw 400. I can't believe this has been so difficult just to upload a file to local disk. Please help!

Answer 1

so I haven't exactly furthered my understanding of active storage, but I did find a solution that worked. In method 1, I simply changed the URL that was returning "undefined" to manually 'rails/active_storage/direct_uploads'.

The JS code now looks like:

function uploadFile(file) {

// const input = document.querySelector('input[type=file]')
// console.log(input)

  // your form needs the file_field direct_upload: true, which
  //  provides data-direct-upload-url
  const url = 'rails/active_storage/direct_uploads' //input.dataset.directUploadUrl 
  console.log(url)
  const upload = new DirectUpload(file, url)

  upload.create((error, blob) => {
    if (error) {
      // Handle the error
    } else {
      // Add an appropriately-named hidden input to the form with a
      //  value of blob.signed_id so that the blob ids will be
      //  transmitted in the normal upload flow
      const hiddenField = document.createElement('input')
      hiddenField.setAttribute("type", "hidden");
      hiddenField.setAttribute("value", blob.signed_id);
      hiddenField.name = input.name
      document.querySelector('form').appendChild(hiddenField)
    }
  })

Once uploaded, I can do blob operations on the files like so (from within Ruby) without having to download them to temporary directories:

blob = ActiveStorage::Blob.first
        blob.open do |tempfile|
          puts tempfile.path  #do some processing
          puts blob.filename
        end