Image InputComponent add file size

composer.json

@@ -2,7 +2,10 @@
     "name": "laravel/laravel",
     "type": "project",
     "description": "The Laravel Framework.",
-    "keywords": ["framework", "laravel"],
+    "keywords": [
+        "framework",
+        "laravel"
+    ],
     "license": "MIT",
     "require": {
         "php": "^7.3|^8.0",
@@ -18,7 +21,6 @@
         "laravel/tinker": "^2.5",
         "laravel/ui": "^3.4",
         "mews/purifier": "^3.3",
-        "slevomat/coding-standard": "^7.2",
         "spatie/laravel-mix-preload": "^1.3"
     },
     "require-dev": {
@@ -27,7 +29,8 @@
         "laravel/sail": "^1.0.1",
         "mockery/mockery": "^1.4.4",
         "nunomaduro/collision": "^5.10",
-        "phpunit/phpunit": "^9.5.10"
+        "phpunit/phpunit": "^9.5.10",
+        "slevomat/coding-standard": "^7.2"
     },
     "autoload": {
         "psr-4": {

resources/ts/back/CkUploadAdaptater.ts

@@ -0,0 +1,82 @@
+import axios, { CancelTokenSource } from "axios";
+import route from "../modules/route";
+
+class CKUploadAdaptater {
+    route: string | null = "";
+    cancel: CancelTokenSource | null = null;
+
+    // @ts-ignore
+    constructor(loader) {
+        // The file loader instance to use during the upload.
+        // @ts-ignore
+        this.loader = loader;
+        this.cancel = axios.CancelToken.source();
+    }
+
+    // Starts the upload process.
+    upload() {
+        // @ts-ignore
+        return this.loader.file.then(
+            (file: File) =>
+                new Promise((resolve, reject) => {
+                    this._initRequest();
+                    this._sendRequest(file, resolve, reject);
+                })
+        );
+    }
+
+    // Aborts the upload process.
+    abort() {
+        if (this.cancel) {
+            this.cancel.cancel();
+        }
+    }
+
+    // Initializes the XMLHttpRequest object using the URL passed to the constructor.
+    _initRequest() {
+        this.route = route.methods.route("crud-policies.upload");
+    }
+
+    // Prepares the data and sends the request.
+    _sendRequest(
+        file: File,
+        resolve: (value: unknown) => void,
+        reject: (reason?: any) => void
+    ) {
+        // Prepare the form data.
+        const data = new FormData();
+        data.append("upload", file);
+        const headers = Object.assign(
+            {},
+            window.axios ? window.axios.defaults.headers.common : {}
+        );
+        headers["Content-Type"] = "multipart/form-data";
+
+        if (!this.route) {
+            throw new Error("Route is not set");
+        }
+
+        axios
+            .post(this.route, data, {
+                withCredentials: true,
+                headers: headers,
+                onUploadProgress: (evt) => {
+                    // @ts-ignore
+                    this.loader.uploadTotal = evt.total;
+                    // @ts-ignore
+                    this.loader.uploaded = evt.loaded;
+                },
+            })
+            .then((response) => {
+                resolve({
+                    default: response.data.url,
+                });
+            })
+            .catch((error) => {
+                console.error(error);
+                reject("Le fichier à été marbré");
+            });
+    }
+}
+
+export { CKUploadAdaptater };

resources/ts/components/bo/CkEditorBoComponent.vue

@@ -17,6 +17,7 @@
 import { defineComponent, ref } from "vue";
 import trans from "../../modules/trans";
 import "./../../../js/vendor/ckeditor/build/ckeditor";
+import { CKUploadAdaptater } from "../../back/CkUploadAdaptater";
 
 export default defineComponent({
   mixins: [trans],
@@ -71,6 +72,16 @@ export default defineComponent({
         wordCounter = this.$refs.wordCounter as HTMLElement;
       // @ts-ignore
       ClassicEditor.create(ckeditor, {
+        extraPlugins: [
+          // @ts-ignore
+          (editor) => {
+            // @ts-ignore
+            editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
+              // Configure the URL to the upload script in your back-end here!
+              return new CKUploadAdaptater(loader);
+            };
+          },
+        ],
         wordCount: {
           container: wordCounter,
           // @ts-ignore
@@ -125,7 +136,7 @@ export default defineComponent({
             "undo",
             "redo",
             "|",
-            "laravelFileManager",
+            "insertImage",
             "mediaEmbed",
             "blockQuote",
             "|",

resources/ts/components/bo/ImageInputComponent.vue

@@ -89,7 +89,10 @@
           v-if="_value"
           :id="`PreviewHelp${_id}`"
           class="form-text text-muted d-block"
-          >{{ __("Prévisualisation de l'image") }}</small
+          >{{ __("Prévisualisation de l'image")
+          }}<span v-if="_originalFile" class="fw-bold"
+            >&nbsp;{{ humanFileSize(_originalFile.size) }}&nbsp;</span
+          ></small
         >
         <img
           v-if="_value"
@@ -336,6 +339,9 @@ import Cropper from "cropperjs";
 import { Tooltip } from "bootstrap";
 import trans from "../../modules/trans";
 
+const UNITS = ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"];
+const BYTES_PER_KB = 1024;
+
 export default defineComponent({
   mixins: [trans],
   emits: ["browseFile"],
@@ -446,7 +452,7 @@ export default defineComponent({
     _hasModdedImage: boolean;
     _cropper: Cropper | null;
 
-    _originalFile: null;
+    _originalFile: File | null;
     _originalFileName: string;
     _previewStyle: string;
   } {
@@ -617,6 +623,7 @@ export default defineComponent({
         false
       );
       if (el.files[0]) {
+        self._originalFile = el.files[0];
         reader.readAsDataURL(el.files[0]);
         this._valueFileName = el.files[0].name;
       }
@@ -636,6 +643,7 @@ export default defineComponent({
         if (!actualImage || !actualImage.files) {
           throw new Error("actualImage is not defined");
         }
+        self._originalFile = actualImage.files[0];
         self._originalFileName = actualImage.files[0].name;
         imgEditor.src = URL.createObjectURL(actualImage.files[0]);
 
@@ -702,9 +710,26 @@ export default defineComponent({
         type: "image/png",
         lastModified: new Date().getTime(),
       });
+      this._originalFile = file;
       container.items.add(file);
       actualImage.files = container.files;
     },
+    humanFileSize(sizeBytes: number | bigint): string {
+      let size = Math.abs(Number(sizeBytes));
+
+      let u = 0;
+      while (size >= BYTES_PER_KB && u < UNITS.length - 1) {
+        size /= BYTES_PER_KB;
+        ++u;
+      }
+
+      return new Intl.NumberFormat([], {
+        style: "unit",
+        unit: UNITS[u],
+        unitDisplay: "short",
+        maximumFractionDigits: 1,
+      }).format(size);
+    },
   },
 });
 </script>
@@ -743,12 +768,6 @@ export default defineComponent({
       left: 50%;
       transform: translateX(-50%) translateY(-50%);
     }
-
-    @include media-breakpoint-up(md) {
-      & > div {
-        position: absolute;
-      }
-    }
   }
   input.rightAligned {
     direction: ltr !important;

resources/ts/index.d.ts

@@ -26,7 +26,7 @@ type Model = Record<
 interface NestedModelInterface extends Model {}
 
 type NestedStringList = NestedStringListInterface | StringList | string;
-type NestedNumberList = NestedStringListInterface | NumberList | number;
+type NestedNumberList = NestedNumberListInterface | NumberList | number;
 type ModelList = Array<Model>;
 
 declare global {

webpack.mix.js

@@ -4,8 +4,8 @@ const mix = require('laravel-mix')
 require('laravel-mix-polyfill')
 require('laravel-mix-clean')
 
-let assetDir = 'assets'
-let polyfill = {
+const assetDir = 'assets'
+const polyfill = {
     enabled: true,
     bugfixes: true,
     useBuiltIns: "usage",