petebytes · October 20, 2019 18:24 · Feb 6, 2018
diff --git a/_photo.json.jbuilder b/_photo.json.jbuilder
@@ -0,0 +1,3 @@
+json.extract! photo, :id, :image_data, :created_at, :updated_at
+json.url photo_url(photo, format: :html)
+json.image_url image_url_photo_url(photo)
diff --git a/photos_controller.rb b/photos_controller.rb
@@ -0,0 +1,8 @@
+class PhotosController < ApplicationController
+  before_action :set_photo, only: [:show, :edit, :update, :destroy, :image_url]
+  ...
+  def image_url
+    redirect_to @photo.image.url
+  end
+  ...
+end
diff --git a/routes.rb b/routes.rb
@@ -0,0 +1,7 @@
+Rails.application.routes.draw do
+...
+  resources :photos do
+    get "image_url", on: :member
+  end
+...
+end
diff --git a/trix_uploads.js b/trix_uploads.js
@@ -0,0 +1,71 @@
+// Turn off the default Trix captions
+Trix.config.attachments.preview.caption = {
+  name: false,
+  size: false
+};
+
+function uploadAttachment(attachment) {
+  var options = {
+    extension: attachment.file.name.match(/(\.\w+)?$/)[0],                        //Set the file extension
+    _: Date.now()                                                                 //Prevent Caching
+  };
+  $.getJSON("/images/upload/cache/presign", options, function(result) {
+    // Create our form data to submit
+    var file = attachment.file;
+    var form = new FormData;
+    form.append("key", result['fields']['key']);
+    form.append("policy", result['fields']['policy']);
+    form.append("x-amz-credential", result['fields']['x-amz-credential']);
+    form.append("x-amz-algorithm", result['fields']['x-amz-algorithm']);
+    form.append("x-amz-date", result['fields']['x-amz-date']);
+    form.append("x-amz-signature", result['fields']['x-amz-signature']);
+    form.append("file", file);
+    // Create our XHR request
+    var xhr = new XMLHttpRequest;
+    xhr.open("POST", result['url'], true);
+
+    // Report file uploads back to Trix
+    xhr.upload.onprogress = function (event) {
+      var progress = event.loaded / event.total * 100;
+      attachment.setUploadProgress(progress);
+    }
+
+    // Tell Trix what url and href to use on successful upload
+    xhr.onload = function () {
+      if (xhr.status === 204) {
+        var image = {
+          id: result['fields']['key'].match(/cache\/(.+)/)[1],
+          storage: "cache",
+          metadata: {
+            size: attachment.filesize,
+            filename: attachment.filename,
+            mime_type: attachment.contentType
+          }
+        };
+        rails_form = new FormData;
+        rails_form.append("photo[image]", JSON.stringify(image));
+        $.ajax("/photos", {
+          contentType: false,
+          processData: false,
+          data: rails_form,
+          method: 'POST',
+          dataType: 'json'
+        }).done(function(data){
+          return attachment.setAttributes({
+            url: data.image_url,
+            href: data.url
+          })
+        });
+      }
+    }
+    return xhr.send(form);
+  });
+}
+
+// Listen for the Trix attachment event to trigger upload
+document.addEventListener("trix-attachment-add", function(event) {
+  var attachment = event.attachment;
+  if (attachment.file) {
+    return uploadAttachment(attachment);
+  }
+});
No results found