Using Shrine For Attachments

Shrine is a great toolkit for file attachments; and with some modifications, you can use it instead of ActiveStorage!

For this example, we’re using Shrine’s Upload Endpoint plugin on the server.

The process is:

  1. Setup the endpoint on your server that will accept the attachment
  2. Add the data-direct-upload-url attribute, which points to the endpont
  3. Add an event listner for rhino-attachment-add that uploads the file to your endpoint, then complete the attachment add process with the appropriate calls to event.attachment
JavaScript 
this.addEventListener(`rhino-attachment-add`, async function(event) {
  event.preventDefault()
  const { attachment, target } = event;

  const url = event.target.dataset.directUploadUrl

  let formData = new FormData()
  formData.append('file', attachment.file, attachment.file.name)

  let response = await window.mrujs.fetch(url, {
    method: 'POST',
    body: formData,
    headers: {"Accept": "application/json"}
  });

  let result = await response.json();

  attachment.setAttributes({
    url: result.url,
  });

  attachment.setUploadProgress(100)
})
Previous Page Add Additional Attributes onto the Editor