Active Storage - Direct Uploader с синтаксической ошибкой - PullRequest
0 голосов
/ 14 мая 2019

Моя цель - использовать Active Storage для загрузки файлов с:

1 - начинает загрузку в облако после того, как оно прикреплено на стороне клиента (перед нажатием кнопки «обновить»)

2 - Интеграция представления выгрузки с js-библиотекой другого стороннего производителя (как uppy )

Из документация по рельсам прямой загрузки

Если вы хотите использовать функцию прямой загрузки из среды JavaScript или интегрировать настраиваемые решения для перетаскивания, вы можете использовать для этого класс DirectUpload.Получив файл из выбранной вами библиотеки, создайте экземпляр DirectUpload и вызовите его метод create.Create принимает обратный вызов для вызова после завершения загрузки.

import { DirectUpload } from "@rails/activestorage"

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

// Bind to file drop - use the ondrop on a parent element or use a
//  library like Dropzone
const onDrop = (event) => {
  event.preventDefault()
  const files = event.dataTransfer.files;
  Array.from(files).forEach(file => uploadFile(file))
}

// Bind to normal file selection
input.addEventListener('change', (event) => {
  Array.from(input.files).forEach(file => uploadFile(file))
  // you might clear the selected files from the input
  input.value = null
})

const uploadFile = (file) => {
  // your form needs the file_field direct_upload: true, which
  //  provides data-direct-upload-url
  const url = input.dataset.directUploadUrl
  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)
    }
  })
}

Я получаю это сообщение об ошибке:

enter image description here

enter image description here

с "!"на этой линии:

   var upload = new !(function webpackMissingModule() { var e = new Error("Cannot find module '@rails/activestorage'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())(file, url);
...