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 listener for rhino-attachment-add that uploads the file to your endpoint, then complete the attachment add process with the appropriate calls to event.attachment
document.addEventListener(`rhino-attachment-add`, async function(event) {
  const { attachment, target } = event;

  // Grab the `data-direct-upload` string for uploading to Shrine.
  const url =

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

  // If you have CSRF checks enabled for this endpoint, you may need a library like
  // request.js or mrujs to fetch with the proper CSRF headers / tokens.
  let response = await fetch(url, {
    method: 'POST',
    body: formData,
    headers: {"Accept": "application/json"}

  let result = await response.json();

    url: result.url,


Do note, because we are using the fetch() API, there’s no way to properly show a progress bar for upload progress. If you want to implement upload progress, you can use the XMLHttpRequest API which does support upload progress.