JQuery File Upload, Amazon S3 and Shrine - rendering with a partial

_attachment.html.erb

<!-- app/views/attachments/_attachment.html.erb -->

<div class="attachment-image col-xs-6 col-sm-4 col-md-3" id="attachment_<%= @report.slug %><%= attachment.id %>elv1">
  <div class="row">
    <div class="attached-image-wrapper col-xs-12">
      <a class="attached-image" data-lightbox="report-attachment" style="background-image:url('<%= attachment.image_url(:preview) %>');" href="<%= attachment.image_url(:original) %>"></a>
    </div>
  </div>

  <div class="attachment-options-wrapper">
    <%= link_to '<i class="fa fa-download"></i> Download'.html_safe, attachment.image_url(:original), class: 'attachment-options'  %>
    <%= link_to '<i class="fa fa-trash-o"></i> Delete'.html_safe, [attachment.report, attachment], class: 'attachment-options', method: :delete, remote: true %>
  </div>
</div>

_attachment.json.jbuilder

# app/views/reports/_attachment.json.jbuilder

json.extract! attachment, :id, :report_id, :created_at, :updated_at
json.preview_image_url attachment.image_url(:preview)
json.original_image_url attachment.image_url(:original)
json.url report_attachment_url(@report, attachment, format: :json)
json.report_id  attachment.report_id
json.template render(partial: "attachments/attachment", locals: { attachment: attachment }, formats: [:html])

show.html.erb

<!-- app/views/reports/show.html.erb -->

...

  <div class="row" id="img-attachments">
    
    <div class="col-xs-12">
      <h3>Attachments</h3>
    </div>
    
    <div id="all-attachment-images">
      <%= render @report.attachments %>
    </div>
    
  </div>

  <div class="row">
    <%= render "attachments/form" %>
  </div>


...

show.json.jbuilder

# app/views/reports/show.json.jbuilder

json.partial! "attachments/attachment", attachment: @attachment

uploads.js

// app/assets/javascripts/uploads.js

$(document).on("turbolinks:load", function() {

  $("[type=file]").fileupload({
    add: function(e, data) {
      data.progressBar = $('<div class="progress" style="width: 300px"><div class="progress-bar"></div></div>').insertBefore(".new_attachment");
      var options      = {
        extension: data.files[0].name.match(/(\.\w+)?$/)[0], // set the file extension
        _: Date.now() // prevent caching
      };

      $.getJSON("/images/upload/cache/presign", options, function(result) {
        data.formData  = result.fields;
        data.url       = result.url;
        data.paramName = "file";
        data.submit();
      });

    },

    progress: function(e, data) {
      var progress   = parseInt(data.loaded / data.total * 100, 10);
      var percentage = progress.toString() + '%';
      data.progressBar.find(".progress-bar").css("width", percentage).html(percentage);
    },

    done: function(e, data) {
      data.progressBar.remove();
      console.log("done", data);

      var image = {
        id:       data.formData.key.match(/cache\/(.+)/)[1], // we have to remove the prefix part
        storage:  'cache',
        metadata: {
          size:      data.files[0].size,
          filename:  data.files[0].name.match(/[^\/\\]+$/)[0], // IE return full path
          mime_type: data.files[0].type
        }
      };

      var form = $(this).closest("form");
      var form_data = new FormData(form[0]);
      form_data.append($(this).attr("name"), JSON.stringify(image));

      console.log(image);

      $.ajax(form.attr("action"), {
        contentType: false,
        processData: false,
        data:        form_data,
        method:      form.attr("method"),
        dataType:    "json",
        success: function(response) {
          console.log("this is the response", response );
          
          // This renders the attachment image in the same style as the _attachment.html.erb partial - missing download an delete links tho
          $("#img-attachments").append(response.template);

        }
      });
    }
  });

});