Загрузка в хранилище Rails с использованием Javascript - PullRequest
Новая
       8

Загрузка в хранилище Rails с использованием Javascript

1 голос
/ 10 апреля 2020

Я пытаюсь загрузить изображение в активное хранилище на моем сервере Rails. В настоящее время у меня правильно настроен бэкэнд, но я пытаюсь понять FormData. Вот что у меня есть.

Функция изменения при включении прослушивает изменение на входе типа «файл». Когда я добавляю фотографию к входу, я могу получить информацию от e.target ... Однако я не знаю, что добавить в качестве URI здесь. Здесь e.target.value - это защищенный uri. Поэтому я не совсем понимаю, как это должно работать:

Кстати, setFile просто устанавливает 'file' для этого объекта. Я использую реагировать. 

const onChange = (e) => {
    console.log(e.target.files)
    setFile({
        uri: e.target.value,
        name: e.target.files[0].name,
        type: e.target.files[0].type
    })
}

const onSubmit = () => {
    console.log(file)

    let imageURI = file.uri
    let formdata = new FormData();

    formdata.append("image", { uri: imageURI, name: `${file.name}`, type: `${file.type}` })
    formdata.append("image", file)

    requests.postImageToCurriculum(66, formdata)
}

1 Ответ

0 голосов
/ 10 апреля 2020

если вы используете Активное хранилище, используйте js пакет 



import { DirectUpload } from "@rails/activestorage"

class Uploader {
  constructor(file, url) {
    this.upload = new DirectUpload(this.file, this.url, this)
  }

  upload(file) {
    this.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
      }
    })
  }

  directUploadWillStoreFileWithXHR(request) {
    request.upload.addEventListener("progress",
      event => this.directUploadDidProgress(event))
  }

  directUploadDidProgress(event) {
    // Use event.loaded and event.total to update the progress bar
  }
}

ссылка здесь

...