diff --git a/Gemfile b/Gemfile
index d1b9cae281ff09f01f04851583b66bad3e3b6274..d25f8a79ba950d5d185758d88438f35a93bc566a 100644
--- a/Gemfile
+++ b/Gemfile
@@ -46,7 +46,8 @@ gem 'jbuilder'
 gem 'kamifusen'#, path: '../kamifusen'
 gem 'bootstrap'
 gem 'sanitize'
-gem 'summernote-rails', git: 'https://github.com/noesya/summernote-rails.git'
+gem 'summernote-rails', git: 'https://github.com/noesya/summernote-rails.git', branch: 'activestorage'
+# gem 'summernote-rails', path: '../summernote-rails'
 
 group :development, :test do
   gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
diff --git a/Gemfile.lock b/Gemfile.lock
index ac8fc4ee3ae4c319853939e62bd43300f9a8100b..fdc1d814d2778f417019130d4a3fccc7b3f71e92 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,6 +1,7 @@
 GIT
   remote: https://github.com/noesya/summernote-rails.git
-  revision: 6dcff6c2a0e56492dbbcaf0a91ccc5898e6be922
+  revision: 3581d868bbe303377f37f6e26858176debae51a4
+  branch: activestorage
   specs:
     summernote-rails (0.8.20.1)
       railties (>= 3.1)
diff --git a/app/assets/javascripts/admin/commons/upload_file.js b/app/assets/javascripts/admin/commons/upload_file.js
deleted file mode 100644
index 4719456e74f7272d29feb1f792b97d9c087c845f..0000000000000000000000000000000000000000
--- a/app/assets/javascripts/admin/commons/upload_file.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const uploadFile = (file) => {
-  // TODO  should be data-direct-upload-url
-  const url = '/rails/active_storage/direct_uploads'
-  const upload = new ActiveStorage.DirectUpload(file, url)
-
-  upload.create((error, blob) => {
-    if (error) {
-      alert(error)
-    } else {
-        console.log(blob)
-      return blob
-    }
-  })
-}
diff --git a/app/assets/javascripts/admin/plugins/summernote.js b/app/assets/javascripts/admin/plugins/summernote.js
index 4d7aee2e24d5d4d755850da9bce4ecd263dfdde0..e6e2babbf78e0b11e73c186c6f662eaf854139f4 100644
--- a/app/assets/javascripts/admin/plugins/summernote.js
+++ b/app/assets/javascripts/admin/plugins/summernote.js
@@ -1,5 +1,5 @@
 /* eslint no-alert: 'off' */
-/*global $, FormData */
+/*global $, SummernoteAttachmentUpload */
 // window.osuny.summernote.sendFile = function (file, toSummernote) {
 //     'use strict';
 //     var data = new FormData();
@@ -26,10 +26,6 @@
 // };
 //
 
-//
-
-
-
 $(function () {
     'use strict';
 
@@ -58,10 +54,8 @@ $(function () {
             ],
             callbacks: {
                 onImageUpload: function (files) {
-                    var blob = uploadFile(files[0]);
-                    console.log(blob);
-                //     'use strict';
-                //     window.osuny.summernote.sendFile(files[0], $(this));
+                    var attachmentUpload = new SummernoteAttachmentUpload(this, files[0]);
+                    attachmentUpload.start();
                 }
             }
         });
diff --git a/app/assets/javascripts/admin/plugins/summernote_attachment_upload.js b/app/assets/javascripts/admin/plugins/summernote_attachment_upload.js
new file mode 100644
index 0000000000000000000000000000000000000000..26c8ec3e320ce4ed344d4c59d75e3d382a74f0d5
--- /dev/null
+++ b/app/assets/javascripts/admin/plugins/summernote_attachment_upload.js
@@ -0,0 +1,43 @@
+/*global ActiveStorage */
+var SummernoteAttachmentUpload = function (element, file) {
+    'use strict';
+    this.element = element;
+    this.file = file;
+    this.directUpload = new ActiveStorage.DirectUpload(file, this.getDirectUploadUrl(), this);
+};
+
+SummernoteAttachmentUpload.prototype.start = function () {
+    'use strict';
+    this.directUpload.create(this.directUploadDidComplete.bind(this));
+};
+
+SummernoteAttachmentUpload.prototype.directUploadDidComplete = function (error, attributes) {
+    'use strict';
+    if (error) {
+        throw new Error('Direct upload failed: ' + error);
+    }
+
+    // Insert Blob in Summernote
+    console.log(attributes);
+    console.log({
+        sgid: attributes.attachable_sgid,
+        url: this.createBlobUrl(attributes.signed_id, attributes.filename)
+    });
+};
+
+SummernoteAttachmentUpload.prototype.createBlobUrl = function (signedId, filename) {
+    'use strict';
+    return this.getBlobUrlTemplate()
+        .replace(':signed_id', signedId)
+        .replace(':filename', encodeURIComponent(filename));
+};
+
+SummernoteAttachmentUpload.prototype.getDirectUploadUrl = function () {
+    'use strict';
+    return this.element.dataset.directUploadUrl;
+};
+
+SummernoteAttachmentUpload.prototype.getBlobUrlTemplate = function () {
+    'use strict';
+    return this.element.dataset.blobUrlTemplate;
+};