Vue image uploader : wip

app/assets/javascripts/admin.js

 //= require activestorage
-//= require actiontext
 //= require jquery3
 //= require jquery_ujs
 //= require notyf/notyf.min
@@ -9,7 +8,6 @@
 //= require jquery-cropper/dist/jquery-cropper
 //= require appstack/app
 //= require gdpr/cookie_consent
-//= require trix
 //= require sortablejs/Sortable
 //= require summernote/summernote-lite
 //= require summernote-rails

app/assets/javascripts/admin/plugins/trix.js

-/*global Trix */
-Trix.config.blockAttributes.heading1.tagName = 'h2';

app/assets/javascripts/admin/vue/blobUploader.js

+
+
+Vue.component('button-counter', {
+    data: function () {
+      return {
+        count: 0
+      }
+    },
+    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
+});
\ No newline at end of file

app/views/admin/communication/website/blocks/edit.html.erb

@@ -24,10 +24,16 @@
       draggable: VueDraggableNext.VueDraggableNext,
     },
     data() {
-      return { data: <%= @block.data.to_json.html_safe %> }
+      return { 
+        directUpload: {
+          url: "<%= rails_direct_uploads_url.html_safe %>",
+          blobUrlTemplate: "<%= rails_service_blob_url(":signed_id", ":filename").html_safe %>"
+        },
+        data: <%= @block.data.to_json.html_safe %>
+      }
     },
     methods: {
-      // TODO : replace by real image upload
+      // TODO : create a uploader vue3 component
       onFileImageChange(event, object, key) {
         var files = event.target.files || event.dataTransfer.files;
         if (!files.length)
@@ -35,14 +41,21 @@
         this.assignImage(files[0], object, key);
       },
       assignImage(file, object, key) {
-        var image = new Image();
-        var reader = new FileReader();
-
-        reader.onload = function(event){
-          object[key] = event.target.result;
-        }.bind(this);
-
-        reader.readAsDataURL(file);
+        this.uploadFile(file, object, key);
+      },
+      uploadFile(file, object, key) {
+        var url = this.directUpload.url;
+        var upload = new ActiveStorage.DirectUpload(file, url);
+        upload.create((error, blob) => {
+          if (error) {
+            console.log(error);
+          } else {
+            object[key] = this.getFileUrl(blob.signed_id, blob.filename);
+          }
+        });
+      },
+      getFileUrl(signed_id, filename) {
+        return this.directUpload.blobUrlTemplate.replace(':signed_id', signed_id).replace(':filename', filename);
       }
     }
   });

app/views/admin/communication/website/blocks/templates/partners/_edit.html.erb

@@ -65,7 +65,6 @@
                         :id="'category-' + categoryIndex + '-partner-url-' + partnerIndex">
                 </div>
                 <div class="offset-lg-0 col-lg-4 offset-sm-1 col-sm-10">
-                  <%# TODO : Replace by real image upload %>
                   <label  class="form-label"
                           :for="'category-' + categoryIndex + '-partner-logo-' + partnerIndex">
                     Logo