Как выполнить запись AJAX для вложения Active Storage? - PullRequest
Новая
       19

Как выполнить запись AJAX для вложения Active Storage?

0 голосов
/ 21 сентября 2019

У меня есть модели инструментов и элементов, которые активно загружаются из хранилища.Инструмент может иметь вложение изображения (файл изображения), а элемент может иметь как вложения нот (изображения), так и записи (аудио).Все мои формы / представления работают нормально в rails-land, однако, когда я пытаюсь AJAXify эти объекты, изображения / аудио файлы не прикрепляются.Мой код:

Сериализаторы:

элементный сериализатор 

 class ElementSerializer < ActiveModel::Serializer
  include Rails.application.routes.url_helpers

  attributes :id, :e_name, :tempo, :key, :lyrics, :learned, :full_name, :sheet_music, :recording

  belongs_to :song
  belongs_to :instrument

  def sheet_music
    rails_blob_path(object.sheet_music, disposition: 'attachment', only_path: true) if object.sheet_music.attached?
  end

  def recording
    rails_blob_path(object.recording, only_path: true) if object.recording.attached?
  end
end

Инструментальный сериализатор 

class InstrumentSerializer < ActiveModel::Serializer
  include Rails.application.routes.url_helpers

  attributes :id, :i_name, :family, :range, :make, :model, :display_name, :picture

  has_many :songs
  has_many :elements

  def picture
    rails_blob_path(object.picture, disposition: 'attachment', only_path: true) if object.picture.attached?
   end
end

JS:

instruments.js: 

function postInstrument() {
  $("form#new_instrument").submit(function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: `http://localhost:3000/users/${userId}/instruments`,
      data: $(this).serialize(),
      dataType: "json",
      success: document.getElementById("new-instrument-form-div").innerHTML = 'Instrument Added!'
    })
  })

}

function patchInstrument(id) {
  $(`form#edit_instrument_${id}`).submit(function(e) {
    e.preventDefault();
    $.ajax({
      type: "Patch",
      url: `http://localhost:3000/users/${userId}/instruments/${id}`,
      data: $(this).serialize(),
      dataType: "json",
      success: document.getElementById("edit-instrument-form").innerHTML = 'Instrument Changed!'
    })
  })

}
Instrument.prototype.instrumentHTML = function() {
  let instrumentSongs = this.songs.map(song => {
    return (`
            <li>${song.title}</li>
        `)
  }).join('')
  let instrumentElements = this.elements.map(element => {
    return (`
      <li>${element.full_name}</li>
    `)
  }).join('')
  if (this.picture !== null) {
    return (`

            <p> Range: ${this.range}</p>
      <p> Family: ${this.family}</p>
      <img src= "${this.picture}" />
      <ul> Songs: ${instrumentSongs}</ul>
      <ul> Elements: ${instrumentElements} </ul>


    `)
  } else {
    return (`

      <p> Range: ${this.range}</p>
      <p> Family: ${this.family}</p>
      <ul> Songs: ${instrumentSongs}</ul>
      <ul> Elements: ${instrumentElements} </ul>


  `)
  }
}

elements.js 

function patchElement(id) {
  $(`form#edit_element_${id}`).submit(function(e) {
    e.preventDefault();
    $.ajax({
      type: "Patch",
      url: `http://localhost:3000/elements/${id}`,
      data: $(this).serialize(),
      dataType: "json",
      success: document.getElementById("edit-element-form").innerHTML = 'Element Changed!'
    })
  })

}


function postElement() {
  $("form#new_element").submit(function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: `http://localhost:3000/users/${userId}/elements`,
      data: $(this).serialize(),
      dataType: "json",
      success: document.getElementById("new-element-form-div").innerHTML = 'Element Added!'
    })
  })
}
Element.prototype.elementHTML = function() {
  return (`
        <p> Tempo: ${this.tempo} </p>
        <p> key: ${this.key} </p>
        <p> Learned: ${this.learned} </p>
    <img src="${this.sheet_music}"/>
    <audio controls> < source = "${this.recording}"></audio>
        <p> Lyrics: ${this.lyrics} </p>
        `)
}

Как я могу получить их для отправки, когда я отправляю свои формы через AJAX?

...