diff --git a/resources/ts/bo/components/ImageInputComponent.vue b/resources/ts/bo/components/ImageInputComponent.vue
index 9fe06fe..db59008 100644
--- a/resources/ts/bo/components/ImageInputComponent.vue
+++ b/resources/ts/bo/components/ImageInputComponent.vue
@@ -1,389 +1,388 @@
 <template>
-    <div class="container ImageInput p-0">
-      <div class="row">
-        <div :class="`col-12 ${inTpreview ? 'col-md-6' : ''} form-group`">
-          <label
-            v-if="inTpreview && showLabels"
-            :for="inTId"
-            class="col-form-label"
-          >
-            <b>{{ __("Choisir un fichier") }}</b>
-          </label>
-          <div class="input-group">
-            <button
-              @click.prevent="chooseAFile"
-              class="btn btn-outline-secondary"
-              type="button"
-              data-bs-toggle="tooltip"
-              :title="__('Modifier l\'image source')"
-            >
-              <FontAwesomeIcon icon="fa-solid fa-folder-open" />
-            </button>
-            <input
-              :id="inTId"
-              ref="actualImage"
-              @change="changedImage"
-              type="file"
-              class="d-none"
-              :name="inTname"
-              accept=".jpg,.jpeg,.gif,.png"
-              :aria-describedby="`Help${inTId}`"
-            >
-            <input
-              v-if="inTvalue.indexOf('data:image/png;base64') !== 0"
-              class="d-none"
-              :name="inTname"
-              type="text"
-              :value="inTvalue"
-            >
-            <input
-              @click.prevent="chooseAFile"
-              type="text"
-              :value="inTvalueFileName"
-              class="form-control rightAligned"
-              data-bs-toggle="tooltip"
-              :title="__('Modifier l\'image source')"
-              :aria-describedby="`Help${inTId}`"
-              readonly
-            >
-            <button
-              v-if="!inTrequired && inThasImage"
-              @click.prevent="removeFile"
-              class="btn btn-outline-danger"
-              type="button"
-            >
-              <FontAwesomeIcon icon="fa-solid fa-eraser" />
-            </button>
-            <button
-              v-if="!inTpreview && inTvalue"
-              class="btn btn-warning"
-              type="button"
-              data-bs-toggle="modal"
-              :data-bs-target="`#ModalPreview${inTId}`"
-            >
-              <span
-                data-bs-toggle="tooltip"
-                :title="__('Visualiser l\'image')"
-              >
-                <FontAwesomeIcon icon="fa-solid fa-eye" />
-              </span>
-            </button>
-            <button
-              @click.prevent="prepareImageEditor($event)"
-              :disabled="!inThasImage"
-              :class="`btn ${!inThasModdedImage ? 'btn-primary' : 'btn-success'}`"
-              type="button"
-              data-bs-toggle="modal"
-              :data-bs-target="`#Modal${inTId}`"
-            >
-              <span
-                data-bs-toggle="tooltip"
-                :title="__('Redimensionner l\'image')"
-              >
-                <FontAwesomeIcon icon="fa-solid fa-crop" />
-              </span>
-            </button>
-            <span
-              v-if="inThasModdedImage"
-              class="input-group-text text-success"
-              data-bs-toggle="tooltip"
-              :title="__('Image redimensionée')"
-            >
-              <FontAwesomeIcon icon="fa-solid fa-wand-magic" />
-            </span>
-          </div>
-          <small
-            :id="`Help${inTId}`"
-            class="form-text text-muted"
-          >{{
-            inThelper
-          }}</small>
-        </div>
-        <div
-          v-if="inTpreview"
-          :class="`col-12 ${inTpreview ? 'col-md-6' : ''} form-group`"
+  <div class="container image-input-vue p-0">
+    <div class="row">
+      <div :class="`col-12 ${inTpreview ? 'col-md-6' : ''} form-group`">
+        <label
+          v-if="inTpreview && showLabels"
+          :for="inTId"
+          class="col-form-label"
         >
-          <small
-            v-if="inTvalue && showLabels"
-            :id="`PreviewHelp${inTId}`"
-            class="form-text text-muted d-block"
-          >{{ __("Prévisualisation de l'image") }}
-            <span
-              v-if="inToriginalFile"
-              class="fw-bold"
-            >
-              {{ humanFileSize(inToriginalFile.size) }}
-              {{ `hauteur ${inToriginalFileDimensions.height}px` }}
-              {{ `largeur ${inToriginalFileDimensions.width}px` }}
-            </span>
-          </small>
-          <img
-            v-if="inTvalue"
-            class="img-fluid"
-            :src="inTvalue"
-            :alt="__('Image placeholder')"
-            :aria-describedby="`PreviewHelp${inTId}`"
+          <b>{{ __("Choisir un fichier") }}</b>
+        </label>
+        <div class="input-group">
+          <button
+            @click.prevent="chooseAFile"
+            class="btn btn-outline-secondary"
+            type="button"
+            data-bs-toggle="tooltip"
+            :title="__('Modifier l\'image source')"
           >
+            <FontAwesomeIcon icon="fa-solid fa-folder-open" />
+          </button>
+          <input
+            :id="inTId"
+            ref="actualImage"
+            @change="changedImage"
+            type="file"
+            class="d-none"
+            :name="inTname"
+            accept=".jpg,.jpeg,.gif,.png"
+            :aria-describedby="`Help${inTId}`"
+          >
+          <input
+            v-if="inTvalue.indexOf('data:image/png;base64') !== 0"
+            class="d-none"
+            :name="inTname"
+            type="text"
+            :value="inTvalue"
+          >
+          <input
+            @click.prevent="chooseAFile"
+            type="text"
+            :value="inTvalueFileName"
+            class="form-control right-aligned"
+            data-bs-toggle="tooltip"
+            :title="__('Modifier l\'image source')"
+            :aria-describedby="`Help${inTId}`"
+            readonly
+          >
+          <button
+            v-if="!inTrequired && inThasImage"
+            @click.prevent="removeFile"
+            class="btn btn-outline-danger"
+            type="button"
+          >
+            <FontAwesomeIcon icon="fa-solid fa-eraser" />
+          </button>
+          <button
+            v-if="!inTpreview && inTvalue"
+            class="btn btn-warning"
+            type="button"
+            data-bs-toggle="modal"
+            :data-bs-target="`#ModalPreview${inTId}`"
+          >
+            <span
+              data-bs-toggle="tooltip"
+              :title="__('Visualiser l\'image')"
+            >
+              <FontAwesomeIcon icon="fa-solid fa-eye" />
+            </span>
+          </button>
+          <button
+            @click.prevent="prepareImageEditor($event)"
+            :disabled="!inThasImage"
+            :class="`btn ${!inThasModdedImage ? 'btn-primary' : 'btn-success'}`"
+            type="button"
+            data-bs-toggle="modal"
+            :data-bs-target="`#Modal${inTId}`"
+          >
+            <span
+              data-bs-toggle="tooltip"
+              :title="__('Redimensionner l\'image')"
+            >
+              <FontAwesomeIcon icon="fa-solid fa-crop" />
+            </span>
+          </button>
+          <span
+            v-if="inThasModdedImage"
+            class="input-group-text text-success"
+            data-bs-toggle="tooltip"
+            :title="__('Image redimensionée')"
+          >
+            <FontAwesomeIcon icon="fa-solid fa-wand-magic" />
+          </span>
         </div>
+        <small
+          :id="`Help${inTId}`"
+          class="form-text text-muted"
+        >{{
+          inThelper
+        }}</small>
       </div>
       <div
-        :id="`Modal${inTId}`"
-        class="modal"
-        tabindex="-1"
-        role="dialog"
-        data-bs-backdrop="static"
-        data-bs-keyboard="false"
-        @mousedown="preventMouseDown"
-        @dragstart.prevent="() => false"
-        @ondrop.prevent="() => false"
-        @dragover.prevent="() => false"
+        v-if="inTpreview"
+        :class="`col-12 ${inTpreview ? 'col-md-6' : ''} form-group`"
       >
-        <div
-          class="modal-dialog modal-xl"
-          role="document"
+        <small
+          v-if="inTvalue && showLabels"
+          :id="`PreviewHelp${inTId}`"
+          class="form-text text-muted d-block"
+        >{{ __("Prévisualisation de l'image") }}
+          <span
+            v-if="inToriginalFile"
+            class="fw-bold"
+          >
+            {{ humanFileSize(inToriginalFile.size) }}
+            {{ `hauteur ${inToriginalFileDimensions.height}px` }}
+            {{ `largeur ${inToriginalFileDimensions.width}px` }}
+          </span>
+        </small>
+        <img
+          v-if="inTvalue"
+          class="img-fluid"
+          :src="inTvalue"
+          :alt="__('Image placeholder')"
+          :aria-describedby="`PreviewHelp${inTId}`"
         >
-          <div class="modal-content">
-            <div class="modal-header">
-              <h5 class="modal-title">
-                {{ __("Modification d'image avant import") }}
-              </h5>
-              <button
-                type="button"
-                class="btn-close"
-                data-bs-dismiss="modal"
-                :aria-label="__('Fermer la fenêtre')"
-                data-bs-toggle="tooltip"
-                :title="__('Fermer la fenêtre sans valider le contenu')"
-              />
-            </div>
-            <div class="modal-body">
-              <div class="container">
-                <div class="row">
-                  <div class="col text-center">
-                    <div class="btn-group me-4 mt-2">
-                      <button
-                        class="btn btn-warning"
-                        data-bs-toggle="tooltip"
-                        :title="__('Réinitialiser l\'image')"
-                        @click.prevent="reset()"
-                      >
-                        <FontAwesomeIcon icon="fa-solid fa-sync-alt" />
-                      </button>
-                    </div>
-                    <div class="btn-group me-4 mt-2">
-                      <button
-                        class="btn btn-primary"
-                        data-bs-toggle="tooltip"
-                        :title="__('Zoom avant')"
-                        @click.prevent="zoom(0.1)"
-                      >
-                        <FontAwesomeIcon icon="fa-solid fa-search-plus" />
-                      </button>
-                      <a
-                        class="btn btn-primary"
-                        data-bs-toggle="tooltip"
-                        :title="__('Zoom arrière')"
-                        @click.prevent="zoom(-0.1)"
-                      >
-                        <FontAwesomeIcon icon="fa-solid fa-search-minus" />
-                      </a>
-                    </div>
-                    <div class="btn-group me-4 mt-2">
-                      <a
-                        class="btn btn-primary"
-                        data-bs-toggle="tooltip"
-                        :title="__('Déplacer vers la gauche')"
-                        @click.prevent="move(-10, 0)"
-                      >
-                        <FontAwesomeIcon icon="fa-solid fa-arrow-left" />
-                      </a>
-                      <a
-                        class="btn btn-primary"
-                        data-bs-toggle="tooltip"
-                        :title="__('Déplacer vers la droite')"
-                        @click.prevent="move(10, 0)"
-                      >
-                        <FontAwesomeIcon icon="fa-solid fa-arrow-right" />
-                      </a>
-                      <a
-                        class="btn btn-primary"
-                        data-bs-toggle="tooltip"
-                        :title="__('Déplacer vers le haut')"
-                        @click.prevent="move(0, -10)"
-                      >
-                        <FontAwesomeIcon icon="fa-solid fa-arrow-up" />
-                      </a>
-                      <a
-                        class="btn btn-primary"
-                        data-bs-toggle="tooltip"
-                        :title="__('Déplacer vers le bas')"
-                        @click.prevent="move(0, 10)"
-                      >
-                        <FontAwesomeIcon icon="fa-solid fa-arrow-down" />
-                      </a>
-                    </div>
-                    <div class="btn-group me-4 mt-2">
-                      <a
-                        class="btn btn-primary"
-                        data-bs-toggle="tooltip"
-                        :title="__('Mirroir Horizontal')"
-                        @click.prevent="scale(true)"
-                      >
-                        <FontAwesomeIcon icon="fa-solid fa-arrows-alt-h" />
-                      </a>
-                      <a
-                        class="btn btn-primary"
-                        data-bs-toggle="tooltip"
-                        :title="__('Mirroir Vertical')"
-                        @click.prevent="scale(false)"
-                      >
-                        <FontAwesomeIcon icon="fa-solid fa-arrows-alt-v" />
-                      </a>
-                    </div>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="col">
-                    <div class="form-group d-flex flex-row">
-                      <div class="rotateButton">
-                        <span class="text-dark">{{ __("Rotation") }}&nbsp;:</span>
-                        <div class="btn-group mt-1">
-                          <a
-                            class="btn btn-primary"
-                            data-bs-toggle="tooltip"
-                            :title="__('Rotation sens anti-horaire')"
-                            @click.prevent="rotate(-45)"
-                          >
-                            <FontAwesomeIcon icon="fa-solid fa-undo-alt" />
-                          </a>
-                          <a
-                            class="btn btn-primary"
-                            data-bs-toggle="tooltip"
-                            :title="__('Rotation sens horaire')"
-                            @click.prevent="rotate(45)"
-                          >
-                            <FontAwesomeIcon icon="fa-solid fa-redo-alt" />
-                          </a>
-                        </div>
-                      </div>
-                      <div class="mt-1 ms-4 rotateDrag">
-                        <label
-                          for="range"
-                          class="form-label me-4"
-                        >{{
-                          __(":deg degrès", {
-                            deg: String(inTrotationText),
-                          })
-                        }}
-                        </label>
-                        <input
-                          ref="rotationSlider"
-                          @input.stop="rotationChange"
-                          @change.stop="
-                            rotateTo(
-                              Number.parseInt(
-                                ($event.target as HTMLInputElement).value
-                              )
-                            )
-                          "
-                          type="range"
-                          class="form-range"
-                          id="range"
-                          min="0"
-                          max="360"
-                          value="0"
-                        >
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="row mt-3">
-                  <div class="col-12 col-md-6 p-0 mb-3">
-                    <img
-                      class="imageModification"
-                      ref="imgEditor"
-                      src=""
+      </div>
+    </div>
+    <div
+      :id="`Modal${inTId}`"
+      class="modal"
+      tabindex="-1"
+      role="dialog"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+      @mousedown="preventMouseDown"
+      @dragstart.prevent="() => false"
+      @ondrop.prevent="() => false"
+      @dragover.prevent="() => false"
+    >
+      <div
+        class="modal-dialog modal-xl"
+        role="document"
+      >
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">
+              {{ __("Modification d'image avant import") }}
+            </h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              :aria-label="__('Fermer la fenêtre')"
+              data-bs-toggle="tooltip"
+              :title="__('Fermer la fenêtre sans valider le contenu')"
+            />
+          </div>
+          <div class="modal-body">
+            <div class="container">
+              <div class="row">
+                <div class="col text-center">
+                  <div class="btn-group me-4 mt-2">
+                    <button
+                      class="btn btn-warning"
+                      data-bs-toggle="tooltip"
+                      :title="__('Réinitialiser l\'image')"
+                      @click.prevent="reset()"
                     >
+                      <FontAwesomeIcon icon="fa-solid fa-sync-alt" />
+                    </button>
                   </div>
-                  <div
-                    ref="previewBox"
-                    class="col-12 col-md-6 p-0 bg-light previewIMG"
-                  >
-                    <div
-                      :id="`Preview${inTId}`"
-                      :style="inTpreviewStyle"
-                    />
+                  <div class="btn-group me-4 mt-2">
+                    <button
+                      class="btn btn-primary"
+                      data-bs-toggle="tooltip"
+                      :title="__('Zoom avant')"
+                      @click.prevent="zoom(0.1)"
+                    >
+                      <FontAwesomeIcon icon="fa-solid fa-search-plus" />
+                    </button>
+                    <a
+                      class="btn btn-primary"
+                      data-bs-toggle="tooltip"
+                      :title="__('Zoom arrière')"
+                      @click.prevent="zoom(-0.1)"
+                    >
+                      <FontAwesomeIcon icon="fa-solid fa-search-minus" />
+                    </a>
+                  </div>
+                  <div class="btn-group me-4 mt-2">
+                    <a
+                      class="btn btn-primary"
+                      data-bs-toggle="tooltip"
+                      :title="__('Déplacer vers la gauche')"
+                      @click.prevent="move(-10, 0)"
+                    >
+                      <FontAwesomeIcon icon="fa-solid fa-arrow-left" />
+                    </a>
+                    <a
+                      class="btn btn-primary"
+                      data-bs-toggle="tooltip"
+                      :title="__('Déplacer vers la droite')"
+                      @click.prevent="move(10, 0)"
+                    >
+                      <FontAwesomeIcon icon="fa-solid fa-arrow-right" />
+                    </a>
+                    <a
+                      class="btn btn-primary"
+                      data-bs-toggle="tooltip"
+                      :title="__('Déplacer vers le haut')"
+                      @click.prevent="move(0, -10)"
+                    >
+                      <FontAwesomeIcon icon="fa-solid fa-arrow-up" />
+                    </a>
+                    <a
+                      class="btn btn-primary"
+                      data-bs-toggle="tooltip"
+                      :title="__('Déplacer vers le bas')"
+                      @click.prevent="move(0, 10)"
+                    >
+                      <FontAwesomeIcon icon="fa-solid fa-arrow-down" />
+                    </a>
+                  </div>
+                  <div class="btn-group me-4 mt-2">
+                    <a
+                      class="btn btn-primary"
+                      data-bs-toggle="tooltip"
+                      :title="__('Mirroir Horizontal')"
+                      @click.prevent="scale(true)"
+                    >
+                      <FontAwesomeIcon icon="fa-solid fa-arrows-alt-h" />
+                    </a>
+                    <a
+                      class="btn btn-primary"
+                      data-bs-toggle="tooltip"
+                      :title="__('Mirroir Vertical')"
+                      @click.prevent="scale(false)"
+                    >
+                      <FontAwesomeIcon icon="fa-solid fa-arrows-alt-v" />
+                    </a>
                   </div>
                 </div>
               </div>
+              <div class="row">
+                <div class="col">
+                  <div class="form-group d-flex flex-row">
+                    <div class="rotate-button">
+                      <span class="text-dark">{{ __("Rotation") }}&nbsp;:</span>
+                      <div class="btn-group mt-1">
+                        <a
+                          class="btn btn-primary"
+                          data-bs-toggle="tooltip"
+                          :title="__('Rotation sens anti-horaire')"
+                          @click.prevent="rotate(-45)"
+                        >
+                          <FontAwesomeIcon icon="fa-solid fa-undo-alt" />
+                        </a>
+                        <a
+                          class="btn btn-primary"
+                          data-bs-toggle="tooltip"
+                          :title="__('Rotation sens horaire')"
+                          @click.prevent="rotate(45)"
+                        >
+                          <FontAwesomeIcon icon="fa-solid fa-redo-alt" />
+                        </a>
+                      </div>
+                    </div>
+                    <div class="mt-1 ms-4 rotate-drag">
+                      <label
+                        for="range"
+                        class="form-label me-4"
+                      >{{
+                        __(":deg degrès", {
+                          deg: String(inTrotationText),
+                        })
+                      }}
+                      </label>
+                      <input
+                        ref="rotationSlider"
+                        @input.stop="rotationChange"
+                        @change.stop="
+                          rotateTo(
+                            Number.parseInt(
+                              ($event.target as HTMLInputElement).value
+                            )
+                          )
+                        "
+                        type="range"
+                        class="form-range"
+                        id="range"
+                        min="0"
+                        max="360"
+                        value="0"
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="row mt-3">
+                <div class="col-12 col-md-6 p-0 mb-3">
+                  <img
+                    class="image-modification"
+                    ref="imgEditor"
+                    src=""
+                  >
+                </div>
+                <div
+                  ref="previewBox"
+                  class="col-12 col-md-6 p-0 bg-light preview-img"
+                >
+                  <div
+                    :id="`Preview${inTId}`"
+                    :style="inTpreviewStyle"
+                  />
+                </div>
+              </div>
             </div>
-            <div class="modal-footer">
-              <button
-                type="button"
-                class="btn btn-secondary"
-                data-bs-dismiss="modal"
-                :aria-label="__('Fermer la fenêtre sans valider le contenu')"
-                data-bs-toggle="tooltip"
-                :title="__('Fermer la fenêtre sans valider le contenu')"
-              >
-                {{ __("Fermer") }}
-              </button>
-              <button
-                @click.prevent="exportCropperFile"
-                type="button"
-                class="btn btn-primary"
-                data-bs-toggle="tooltip"
-                data-bs-dismiss="modal"
-                :title="__('Valider le contenu et fermer la fenêtre')"
-              >
-                {{ __("Valider") }}
-              </button>
-            </div>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-bs-dismiss="modal"
+              :aria-label="__('Fermer la fenêtre sans valider le contenu')"
+              data-bs-toggle="tooltip"
+              :title="__('Fermer la fenêtre sans valider le contenu')"
+            >
+              {{ __("Fermer") }}
+            </button>
+            <button
+              @click.prevent="exportCropperFile"
+              type="button"
+              class="btn btn-primary"
+              data-bs-toggle="tooltip"
+              data-bs-dismiss="modal"
+              :title="__('Valider le contenu et fermer la fenêtre')"
+            >
+              {{ __("Valider") }}
+            </button>
           </div>
         </div>
       </div>
+    </div>
+    <div
+      v-if="!inTpreview && inTvalue"
+      :id="`ModalPreview${inTId}`"
+      class="modal"
+      tabindex="-1"
+      role="dialog"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+    >
       <div
-        v-if="!inTpreview && inTvalue"
-        :id="`ModalPreview${inTId}`"
-        class="modal"
-        tabindex="-1"
-        role="dialog"
-        data-bs-backdrop="static"
-        data-bs-keyboard="false"
+        class="modal-dialog modal-xl"
+        role="document"
       >
-        <div
-          class="modal-dialog modal-xl"
-          role="document"
-        >
-          <div class="modal-content">
-            <div class="modal-header">
-              <h5 class="modal-title">
-                {{ __("Prévisualisation") }}
-              </h5>
-              <button
-                type="button"
-                class="btn-close"
-                data-bs-dismiss="modal"
-                :aria-label="__('Fermer la fenêtre')"
-                data-bs-toggle="tooltip"
-                :title="__('Fermer la fenêtre sans valider le contenu')"
-              />
-            </div>
-            <div class="modal-body">
-              <div class="container">
-                <div class="row">
-                  <div class="col-12 text-center">
-                    <small
-                      :id="`PreviewHelp${inTId}`"
-                      class="form-text text-muted d-block"
-                    >{{ __("Prévisualisation de l'image") }}</small>
-                    <img
-                      class="img-fluid"
-                      :src="inTvalue"
-                      :alt="__('Image placeholder')"
-                      :aria-describedby="`PreviewHelp${inTId}`"
-                    >
-                  </div>
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">
+              {{ __("Prévisualisation") }}
+            </h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              :aria-label="__('Fermer la fenêtre')"
+              data-bs-toggle="tooltip"
+              :title="__('Fermer la fenêtre sans valider le contenu')"
+            />
+          </div>
+          <div class="modal-body">
+            <div class="container">
+              <div class="row">
+                <div class="col-12 text-center">
+                  <small
+                    :id="`PreviewHelp${inTId}`"
+                    class="form-text text-muted d-block"
+                  >{{ __("Prévisualisation de l'image") }}</small>
+                  <img
+                    class="img-fluid"
+                    :src="inTvalue"
+                    :alt="__('Image placeholder')"
+                    :aria-describedby="`PreviewHelp${inTId}`"
+                  >
                 </div>
               </div>
             </div>
@@ -391,567 +390,569 @@
         </div>
       </div>
     </div>
-  </template>
+  </div>
+</template>
 
-  <script lang="ts">
-  import { defineComponent } from "vue";
-  import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-  import Cropper from "cropperjs";
-  import trans from "../../modules/trans";
-  import bsTooltips from "../../modules/bsTooltips";
+<script lang="ts">
+import { defineComponent } from "vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import Cropper from "cropperjs";
+import trans from "../modules/trans";
+import bsTooltips from "../modules/bsTooltips";
 
-  const UNITS = [
-    "byte",
-    "kilobyte",
-    "megabyte",
-    "gigabyte",
-    "terabyte",
-    "petabyte",
-  ];
-  const BYTES_PER_KB = 1024;
+const UNITS = [
+  "byte",
+  "kilobyte",
+  "megabyte",
+  "gigabyte",
+  "terabyte",
+  "petabyte",
+];
+const BYTES_PER_KB = 1024;
 
-  export default defineComponent({
-    components: {
-      FontAwesomeIcon,
+export default defineComponent({
+  components: {
+    FontAwesomeIcon,
+  },
+  mixins: [trans, bsTooltips],
+  emits: {
+    browseFile: (inTId: string) => {
+      inTId;
+      return true;
     },
-    mixins: [trans, bsTooltips],
-    emits: {
-      browseFile: (inTId: string) => {
-        inTId;
-        return true;
-      },
-      imageFile: (file: File | null) => {
-        file;
-        return true;
-      },
+    imageFile: (file: File | null) => {
+      file;
+      return true;
     },
-    mounted() {
-      const json = String(this.$attrs.json ?? "");
-      // * INIT Bootstrap tooltips
-      this.initTooltips();
-
-      if (json.length) {
-        // * Init uppon Laravel Blade
-        const data = JSON.parse(json);
-        this.inTId = data.id;
-        this.inTname = data.name;
-        this.inThelper = data.helper ?? "";
-        this.inTwidth = Number.parseInt(String(data.width));
-        this.inTheight = Number.parseInt(String(data.height));
-        this.inTvalue = String(data.value);
-        if (this.inTvalue.length) {
-          this.inTvalueFileName = this.inTvalue;
-          this.inTvalue = this.inTvalue.replace(/^\/|^/, "/");
-        }
-        if (data.preview !== undefined) {
-          this.inTpreview = data.preview ? true : false;
-        }
-        if (data.required !== undefined) {
-          this.inTrequired = data.required ? true : false;
-        }
-        if (data.browseEvent !== undefined) {
-          this.inTbrowseEvent = data.browseEvent ? true : false;
-        }
-      } else {
-        // * Init Uppon Vue component
-        this.inTId = this.id;
-        this.inTname = this.name;
-        this.inThelper = this.helper;
-        this.inTwidth = this.width;
-        this.inTheight = this.height;
-        this.inTvalue = this.value;
-        if (this.inTvalue.length) {
-          this.inTvalueFileName = this.inTvalue;
-          this.inTvalue = this.inTvalue.replace(/^\/|^/, "/");
-        }
-        this.inTpreview = this.preview;
-        this.inTrequired = this.required;
-        this.inTbrowseEvent = this.browseEvent;
+  },
+  mounted() {
+    const json = String(this.$attrs.json ?? "");
+    this.initTooltips();
+    if (json.length) {
+      // * Init uppon Laravel Blade
+      const data = JSON.parse(json);
+      this.inTId = data.id;
+      this.inTname = data.name;
+      this.inThelper = data.helper ?? "";
+      this.inTwidth = Number.parseInt(String(data.width));
+      this.inTheight = Number.parseInt(String(data.height));
+      this.inTvalue = String(data.value);
+      if (this.inTvalue.length) {
+        this.inTvalueFileName = this.inTvalue;
+        this.inTvalue = this.inTvalue.replace(/^\/|^/, "/");
       }
-      this.inThasImage = false;
+      if (data.preview !== undefined) {
+        this.inTpreview = data.preview ? true : false;
+      }
+      if (data.required !== undefined) {
+        this.inTrequired = data.required ? true : false;
+      }
+      if (data.browseEvent !== undefined) {
+        this.inTbrowseEvent = data.browseEvent ? true : false;
+      }
+    } else {
+      // * Init Uppon Vue component
+      this.inTId = this.id;
+      this.inTname = this.name;
+      this.inThelper = this.helper;
+      this.inTwidth = this.width;
+      this.inTheight = this.height;
+      this.inTvalue = this.value;
+      if (this.inTvalue.length) {
+        this.inTvalueFileName = this.inTvalue;
+        this.inTvalue = this.inTvalue.replace(/^\/|^/, "/");
+      }
+      this.inTpreview = this.preview;
+      this.inTrequired = this.required;
+      this.inTbrowseEvent = this.browseEvent;
+    }
+    this.inThasImage = false;
+  },
+  props: {
+    id: {
+      type: String,
+      default: String(Math.pow(10, 16) / Math.random()),
     },
-    props: {
-      id: {
-        type: String,
-        default: String(Math.pow(10, 16) / Math.random()),
-      },
-      required: {
-        type: Boolean,
-        default: false,
-      },
-      showLabels: {
-        type: Boolean,
-        default: true,
-      },
-      name: {
-        type: String,
-        default: "",
-      },
-      helper: {
-        type: String,
-        default: "",
-      },
-      width: {
-        type: Number,
-        default: 0,
-      },
-      height: {
-        type: Number,
-        default: 0,
-      },
-      value: {
-        type: String,
-        default: "",
-      },
-      preview: {
-        type: Boolean,
-        default: true,
-      },
-      browseEvent: {
-        type: Boolean,
-        default: false,
-      },
+    required: {
+      type: Boolean,
+      default: false,
     },
-    data(): {
-      inTId: string;
-      inTvalue: string;
-      inTvalueFileName: string;
-      inThelper: string;
-      inTname: string;
-      inTrequired: boolean;
-      inTwidth: number;
-      inTheight: number;
-      inTpreview: boolean;
+    showLabels: {
+      type: Boolean,
+      default: true,
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+    helper: {
+      type: String,
+      default: "",
+    },
+    width: {
+      type: Number,
+      default: 0,
+    },
+    height: {
+      type: Number,
+      default: 0,
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    preview: {
+      type: Boolean,
+      default: true,
+    },
+    browseEvent: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data(): {
+    inTId: string;
+    inTvalue: string;
+    inTvalueFileName: string;
+    inThelper: string;
+    inTname: string;
+    inTrequired: boolean;
+    inTwidth: number;
+    inTheight: number;
+    inTpreview: boolean;
 
-      inTbrowseEvent: boolean;
+    inTbrowseEvent: boolean;
 
-      inTrotationText: number;
-      inTrotationValue: number;
-      inTscaleX: number;
-      inTscaleY: number;
-      inThasImage: boolean;
-      inThasModdedImage: boolean;
-      inTcropper: Cropper | null;
+    inTrotationText: number;
+    inTrotationValue: number;
+    inTscaleX: number;
+    inTscaleY: number;
+    inThasImage: boolean;
+    inThasModdedImage: boolean;
+    inTcropper: Cropper | null;
 
-      inToriginalFile: File | null;
+    inToriginalFile: File | null;
+    inToriginalFileDimensions: {
+      height: number;
+      width: number;
+    };
+    inToriginalFileName: string;
+    inTpreviewStyle: string;
+  } {
+    return {
+      inTId: "",
+      inTvalue: "",
+      inTvalueFileName: this.__("Sélectionnez une image"),
+      inThelper: "",
+      inTname: "",
+      inTrequired: true,
+      inTwidth: 0,
+      inTheight: 0,
+      inTpreview: true,
+
+      inTbrowseEvent: false,
+
+      inTrotationText: 0,
+      inTrotationValue: 0,
+      inTscaleX: 1,
+      inTscaleY: 1,
+      inThasImage: false,
+      inThasModdedImage: false,
+      inTcropper: null,
+
+      inToriginalFile: null,
       inToriginalFileDimensions: {
-        height: number;
-        width: number;
-      };
-      inToriginalFileName: string;
-      inTpreviewStyle: string;
-    } {
+        height: 0,
+        width: 0,
+      },
+      inToriginalFileName: "",
+      inTpreviewStyle: "",
+    };
+  },
+  computed: {
+    imageRatio() {
+      return this.inTwidth / this.inTheight;
+    },
+    cropperOption(): Cropper.Options {
       return {
-        inTId: "",
-        inTvalue: "",
-        inTvalueFileName: this.__("Sélectionnez une image"),
-        inThelper: "",
-        inTname: "",
-        inTrequired: true,
-        inTwidth: 0,
-        inTheight: 0,
-        inTpreview: true,
-
-        inTbrowseEvent: false,
-
-        inTrotationText: 0,
-        inTrotationValue: 0,
-        inTscaleX: 1,
-        inTscaleY: 1,
-        inThasImage: false,
-        inThasModdedImage: false,
-        inTcropper: null,
-
-        inToriginalFile: null,
-        inToriginalFileDimensions: {
-          height: 0,
-          width: 0,
-        },
-        inToriginalFileName: "",
-        inTpreviewStyle: "",
+        autoCrop: true,
+        background: true,
+        autoCropArea: 1,
+        // * full crop box
+        viewMode: 0,
+        dragMode: "move",
+        movable: true,
+        rotatable: true,
+        scalable: true,
+        zoomable: true,
+        zoomOnTouch: false,
+        zoomOnWheel: false,
+        cropBoxMovable: true,
+        cropBoxResizable: false,
+        toggleDragModeOnDblclick: false,
+        aspectRatio: this.inTwidth / this.inTheight,
+        preview: `#Preview${this.inTId}`,
       };
     },
-    computed: {
-      imageRatio() {
-        return this.inTwidth / this.inTheight;
-      },
-      cropperOption(): Cropper.Options {
-        return {
-          autoCrop: true,
-          background: true,
-          autoCropArea: 1,
-          // * full crop box
-          viewMode: 0,
-          dragMode: "move",
-          movable: true,
-          rotatable: true,
-          scalable: true,
-          zoomable: true,
-          zoomOnTouch: false,
-          zoomOnWheel: false,
-          cropBoxMovable: true,
-          cropBoxResizable: false,
-          toggleDragModeOnDblclick: false,
-          aspectRatio: this.inTwidth / this.inTheight,
-          preview: `#Preview${this.inTId}`,
-        };
-      },
+  },
+  watch: {
+    inTrotationValue(value) {
+      if (!this.inTcropper) {
+        return;
+      }
+      this.inTcropper.rotateTo(value);
     },
-    watch: {
-      inTrotationValue(value) {
-        if (!this.inTcropper) {
+    inTvalue() {
+      if (this.inTbrowseEvent) {
+        this.inThasImage = true;
+      }
+    },
+    value: {
+      deep: true,
+      immediate: true,
+      handler(value: string) {
+        // * Ignore non prop usage.
+        if (String(this.$attrs.json ?? "").length) {
           return;
         }
-        this.inTcropper.rotateTo(value);
-      },
-      inTvalue() {
-        if (this.inTbrowseEvent) {
+        if (!value.length) {
+          this.$nextTick(() => {
+            this.removeFile();
+          });
+          return;
+        } else {
           this.inThasImage = true;
         }
-      },
-      value: {
-        deep: true,
-        immediate: true,
-        handler(value: string) {
-          if (!value.length) {
-            this.$nextTick(() => {
-              this.removeFile();
-            });
-            return;
-          } else {
-            this.inThasImage = true;
-          }
-          // * Using browse event, If user changed imagem recompile blob (File Upload storage strategy)
-          if (this.inTbrowseEvent && this.inThasImage) {
-            const self = this,
-                  actualImage = this.$refs.actualImage as HTMLInputElement,
-                  container = new DataTransfer();
-            this.$nextTick(() => {
-              this.inTvalue = value.replace(/^\/|^/, "/");
-              this.inTvalueFileName = value;
-              fetch(this.inTvalue)
-                .then((response) => {
-                  self.inToriginalFileName = response.url.substring(
-                    response.url.lastIndexOf("/") + 1
-                  );
-                  return response.blob();
-                })
-                .then((blob: Blob) => {
-                  if (!actualImage.files) {
-                    throw new Error("3- missing files list");
-                  }
-                  this.fetchDataUrlImageSizes(self.inTvalue);
-                  const file = new File([blob], this.inTvalueFileName, {
-                    type: "image/png",
-                    lastModified: new Date().getTime(),
-                  });
-                  this.inThasImage = true;
-                  this.inToriginalFile = file;
-                  this.$emit("imageFile", file);
-                  container.items.add(file);
-                  actualImage.files = container.files;
-                  this.changedImage();
+        // * Using browse event, If user changed imagem recompile blob (File Upload storage strategy)
+        if (this.inTbrowseEvent && this.inThasImage) {
+          const self = this,
+                actualImage = this.$refs.actualImage as HTMLInputElement,
+                container = new DataTransfer();
+          this.$nextTick(() => {
+            this.inTvalue = value.replace(/^\/|^/, "/");
+            this.inTvalueFileName = value;
+            fetch(this.inTvalue)
+              .then((response) => {
+                self.inToriginalFileName = response.url.substring(
+                  response.url.lastIndexOf("/") + 1
+                );
+                return response.blob();
+              })
+              .then((blob: Blob) => {
+                if (!actualImage.files) {
+                  throw new Error("3- missing files list");
+                }
+                this.fetchDataUrlImageSizes(self.inTvalue);
+                const file = new File([blob], this.inTvalueFileName, {
+                  type: "image/png",
+                  lastModified: new Date().getTime(),
                 });
-            });
-          }
-        },
+                this.inThasImage = true;
+                this.inToriginalFile = file;
+                this.$emit("imageFile", file);
+                container.items.add(file);
+                actualImage.files = container.files;
+                this.changedImage();
+              });
+          });
+        }
       },
     },
-    methods: {
-      preventMouseDown(e: MouseEvent) {
-        if ((e.target as HTMLElement)?.id !== "range") {
-          e.preventDefault();
-          return false;
-        }
-      },
-      previewStyleCompute() {
-        const previewBox = this.$refs.previewBox as HTMLElement,
-              style = window.getComputedStyle(previewBox),
-              targetWidth = Number.parseFloat(style.width) / 1.2,
-              targetHeight =
-                (this.inTheight * Number.parseFloat(style.width)) /
-                this.inTwidth /
-                1.2;
-        this.inTpreviewStyle = `width: ${targetWidth.toFixed(
-          3
-        )}px;height:${targetHeight.toFixed(3)}px;`;
-      },
-      reset() {
-        if (!this.inTcropper) {
-          return;
-        }
-        this.inTcropper.reset();
-      },
-      zoom(v: number) {
-        if (!this.inTcropper) {
-          return;
-        }
-        this.inTcropper.zoom(v);
-      },
-      move(x: number, y: number) {
-        if (!this.inTcropper) {
-          return;
-        }
-        this.inTcropper.move(x, y);
-      },
-      scale(horizontal: boolean) {
-        if (!this.inTcropper) {
-          return;
-        }
-        if (horizontal) {
-          this.inTscaleX = -1 / this.inTscaleX;
-          this.inTcropper.scaleX(this.inTscaleX);
-        } else {
-          this.inTscaleY = -1 / this.inTscaleY;
-          this.inTcropper.scaleY(this.inTscaleY);
-        }
-      },
-      rotate(value: number) {
-        const rotationSlider = this.$refs.rotationSlider as HTMLInputElement;
-        let res = this.inTrotationValue + value;
-        res = res < 0 ? 0 : res;
-        res = res > 360 ? 360 : res;
-        this.inTrotationValue = res;
-        this.inTrotationText = this.inTrotationValue;
-        rotationSlider.value = String(this.inTrotationValue);
-      },
-      rotateTo(value: number) {
-        value = value < 0 ? 0 : value;
-        value = value > 360 ? 360 : value;
-        this.inTrotationValue = value;
-        this.inTrotationText = this.inTrotationValue;
-      },
-      rotationChange(e: Event) {
-        const el = e.target;
-        if (!el || !(el instanceof HTMLInputElement)) {
-          throw new Error("target element is not an input");
-        }
-        this.rotateTo(Number.parseFloat(el.value));
-      },
-      chooseAFile() {
-        const actualImage = this.$refs.actualImage as HTMLInputElement;
-        if (this.inTbrowseEvent) {
-          this.$emit("browseFile", this.inTId);
-          return;
-        }
-        actualImage.click();
-      },
-      removeFile() {
-        const actualImage = this.$refs.actualImage as HTMLInputElement;
-        actualImage.value = "";
-        this.inTvalueFileName = this.__("Sélectionnez une image");
-        this.inTvalue = "";
-        this.inToriginalFileName = "";
-        this.inToriginalFile = null;
-        this.inThasModdedImage = false;
-        this.inToriginalFileDimensions = {
-          height: 0,
-          width: 0,
-        };
-        // * To overload watcher for inTvalue
-        this.$nextTick(() => (this.inThasImage = false));
-        this.$emit("imageFile", null);
-      },
-      changedImage() {
-        const self = this,
-              reader = new FileReader(),
-              actualImage = this.$refs.actualImage as HTMLInputElement;
-        if (!actualImage.files) {
-          throw new Error("missing files list");
-        }
-        self.inThasImage = true;
-        reader.addEventListener(
-          "load",
-          () => {
-            // On convertit l'image en une chaîne de caractères base64.
-            self.inTvalue = String(reader.result);
-          },
-          false
-        );
-
-        if (actualImage.files[0]) {
-          self.inToriginalFile = actualImage.files[0];
-          self.inToriginalFileName = actualImage.files[0].name;
-          reader.readAsDataURL(actualImage.files[0]);
-          reader.onloadend = () => {
-            this.fetchDataUrlImageSizes(String(reader.result));
-            this.exportToBlob();
-          };
-          this.inTvalueFileName = actualImage.files[0].name;
-        }
-      },
-      prepareImageEditor(e: Event) {
-        const actualImage = this.$refs.actualImage as HTMLInputElement,
-              imgEditor = this.$refs.imgEditor as HTMLImageElement,
-              self = this,
-              createCropper = () => {
-                if (self.inTcropper) {
-                  self.inTcropper.destroy();
-                }
-                self.inTcropper = new Cropper(imgEditor, self.cropperOption);
-              };
-
-        if (!this.browseEvent) {
-          if (!actualImage || !actualImage.files) {
-            throw new Error("actualImage is not defined");
-          }
-          this.inToriginalFile = actualImage.files[0];
-          this.inToriginalFileName = actualImage.files[0].name;
-          imgEditor.src = URL.createObjectURL(actualImage.files[0]);
-
-          this.previewStyleCompute();
-          this.$nextTick(() => createCropper());
-          return;
-        }
-
+  },
+  methods: {
+    preventMouseDown(e: MouseEvent) {
+      if ((e.target as HTMLElement)?.id !== "range") {
         e.preventDefault();
-        this.$nextTick(() => {
-          fetch(this.value.replace(/^\/|^/, "/"))
-            .then((response) => {
-              this.inToriginalFileName = response.url.substring(
-                response.url.lastIndexOf("/") + 1
-              );
-              return response.blob();
-            })
-            .then((blob: Blob) => {
-              imgEditor.src = URL.createObjectURL(blob);
+        return false;
+      }
+    },
+    previewStyleCompute() {
+      const previewBox = this.$refs.previewBox as HTMLElement,
+            style = window.getComputedStyle(previewBox),
+            targetWidth = Number.parseFloat(style.width) / 1.2,
+            targetHeight =
+              (this.inTheight * Number.parseFloat(style.width)) /
+              this.inTwidth /
+              1.2;
+      this.inTpreviewStyle = `width: ${targetWidth.toFixed(
+        3
+      )}px;height:${targetHeight.toFixed(3)}px;`;
+    },
+    reset() {
+      if (!this.inTcropper) {
+        return;
+      }
+      this.inTcropper.reset();
+    },
+    zoom(v: number) {
+      if (!this.inTcropper) {
+        return;
+      }
+      this.inTcropper.zoom(v);
+    },
+    move(x: number, y: number) {
+      if (!this.inTcropper) {
+        return;
+      }
+      this.inTcropper.move(x, y);
+    },
+    scale(horizontal: boolean) {
+      if (!this.inTcropper) {
+        return;
+      }
+      if (horizontal) {
+        this.inTscaleX = -1 / this.inTscaleX;
+        this.inTcropper.scaleX(this.inTscaleX);
+      } else {
+        this.inTscaleY = -1 / this.inTscaleY;
+        this.inTcropper.scaleY(this.inTscaleY);
+      }
+    },
+    rotate(value: number) {
+      const rotationSlider = this.$refs.rotationSlider as HTMLInputElement;
+      let res = this.inTrotationValue + value;
+      res = res < 0 ? 0 : res;
+      res = res > 360 ? 360 : res;
+      this.inTrotationValue = res;
+      this.inTrotationText = this.inTrotationValue;
+      rotationSlider.value = String(this.inTrotationValue);
+    },
+    rotateTo(value: number) {
+      value = value < 0 ? 0 : value;
+      value = value > 360 ? 360 : value;
+      this.inTrotationValue = value;
+      this.inTrotationText = this.inTrotationValue;
+    },
+    rotationChange(e: Event) {
+      const el = e.target;
+      if (!el || !(el instanceof HTMLInputElement)) {
+        throw new Error("target element is not an input");
+      }
+      this.rotateTo(Number.parseFloat(el.value));
+    },
+    chooseAFile() {
+      const actualImage = this.$refs.actualImage as HTMLInputElement;
+      if (this.inTbrowseEvent) {
+        this.$emit("browseFile", this.inTId);
+        return;
+      }
+      actualImage.click();
+    },
+    removeFile() {
+      const actualImage = this.$refs.actualImage as HTMLInputElement;
+      actualImage.value = "";
+      this.inTvalueFileName = this.__("Sélectionnez une image");
+      this.inTvalue = "";
+      this.inToriginalFileName = "";
+      this.inToriginalFile = null;
+      this.inThasModdedImage = false;
+      this.inToriginalFileDimensions = {
+        height: 0,
+        width: 0,
+      };
+      // * To overload watcher for inTvalue
+      this.$nextTick(() => (this.inThasImage = false));
+      this.$emit("imageFile", null);
+    },
+    changedImage() {
+      const self = this,
+            reader = new FileReader(),
+            actualImage = this.$refs.actualImage as HTMLInputElement;
+      if (!actualImage.files) {
+        throw new Error("missing files list");
+      }
+      self.inThasImage = true;
+      reader.addEventListener(
+        "load",
+        () => {
+          // On convertit l'image en une chaîne de caractères base64.
+          self.inTvalue = String(reader.result);
+        },
+        false
+      );
 
-              this.previewStyleCompute();
-              this.$nextTick(createCropper);
-            });
-        });
-      },
-      dataURLtoBlob(dataUrl: string) {
-        const arr = dataUrl.split(",");
-        if (!arr[0] || !arr[1]) {
-          throw new Error("invalid data url");
+      if (actualImage.files[0]) {
+        self.inToriginalFile = actualImage.files[0];
+        self.inToriginalFileName = actualImage.files[0].name;
+        reader.readAsDataURL(actualImage.files[0]);
+        reader.onloadend = () => {
+          this.fetchDataUrlImageSizes(String(reader.result));
+          this.exportToBlob();
+        };
+        this.inTvalueFileName = actualImage.files[0].name;
+      }
+    },
+    prepareImageEditor(e: Event) {
+      const actualImage = this.$refs.actualImage as HTMLInputElement,
+            imgEditor = this.$refs.imgEditor as HTMLImageElement,
+            self = this,
+            createCropper = () => {
+              if (self.inTcropper) {
+                self.inTcropper.destroy();
+              }
+              self.inTcropper = new Cropper(imgEditor, self.cropperOption);
+            };
+
+      if (!this.browseEvent) {
+        if (!actualImage || !actualImage.files) {
+          throw new Error("actualImage is not defined");
         }
-        const mime = arr[0].match(/:(.*?);/);
-        if (!mime || mime.length < 2) {
-          throw new Error("invalid mime");
-        }
-        const bstr = window.atob(arr[1]);
-        let n = bstr.length;
-        const u8arr = new Uint8Array(n);
-        while (n--) {
-          u8arr[n] = bstr.charCodeAt(n);
-        }
-        return new Blob([u8arr], { type: mime[1] });
-      },
-      fetchDataUrlImageSizes(dataUrl: string) {
-        const img = new Image(),
-              self = this;
-        try {
-          img.onload = () => {
-            self.inToriginalFileDimensions.width = img.width;
-            self.inToriginalFileDimensions.height = img.height;
-          };
-          img.src = dataUrl;
-        } catch (e) {
+        this.inToriginalFile = actualImage.files[0];
+        this.inToriginalFileName = actualImage.files[0].name;
+        imgEditor.src = URL.createObjectURL(actualImage.files[0]);
+
+        this.previewStyleCompute();
+        this.$nextTick(() => createCropper());
+        return;
+      }
+
+      e.preventDefault();
+      this.$nextTick(() => {
+        fetch(this.value.replace(/^\/|^/, "/"))
+          .then((response) => {
+            this.inToriginalFileName = response.url.substring(
+              response.url.lastIndexOf("/") + 1
+            );
+            return response.blob();
+          })
+          .then((blob: Blob) => {
+            imgEditor.src = URL.createObjectURL(blob);
+
+            this.previewStyleCompute();
+            this.$nextTick(createCropper);
+          });
+      });
+    },
+    dataURLtoBlob(dataUrl: string) {
+      const arr = dataUrl.split(",");
+      if (!arr[0] || !arr[1]) {
+        throw new Error("invalid data url");
+      }
+      const mime = arr[0].match(/:(.*?);/);
+      if (!mime || mime.length < 2) {
+        throw new Error("invalid mime");
+      }
+      const bstr = window.atob(arr[1]);
+      let n = bstr.length;
+      const u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new Blob([u8arr], { type: mime[1] });
+    },
+    fetchDataUrlImageSizes(dataUrl: string) {
+      const img = new Image(),
+            self = this;
+      try {
+        img.onload = () => {
           self.inToriginalFileDimensions.width = img.width;
           self.inToriginalFileDimensions.height = img.height;
-        }
-      },
-      exportCropperFile() {
-        this.inThasModdedImage = true;
-        if (!this.inTcropper) {
-          return;
-        }
-        this.inTvalue = this.inTcropper
-          .getCroppedCanvas({
-            fillColor: "rgba(0, 0, 0, 0)",
-            width: this.inTwidth,
-            height: this.inTheight,
-            imageSmoothingEnabled: true,
-            imageSmoothingQuality: "high",
-          })
-          .toDataURL("image/png");
-        this.exportToBlob();
-      },
-      exportToBlob() {
-        const self = this,
-              actualImage = this.$refs.actualImage as HTMLInputElement,
-              container = new DataTransfer();
-        if (!actualImage.files) {
-          throw new Error("2- missing files list");
-        }
-        this.fetchDataUrlImageSizes(self.inTvalue);
-        const file = new File(
-          [self.dataURLtoBlob(self.inTvalue)],
-          self.inToriginalFileName,
-          {
-            type: "image/png",
-            lastModified: new Date().getTime(),
-          }
-        );
-        this.inToriginalFile = file;
-        this.$emit("imageFile", 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);
-      },
+        };
+        img.src = dataUrl;
+      } catch (e) {
+        self.inToriginalFileDimensions.width = img.width;
+        self.inToriginalFileDimensions.height = img.height;
+      }
     },
-  });
-  </script>
+    exportCropperFile() {
+      this.inThasModdedImage = true;
+      if (!this.inTcropper) {
+        return;
+      }
+      this.inTvalue = this.inTcropper
+        .getCroppedCanvas({
+          fillColor: "rgba(0, 0, 0, 0)",
+          width: this.inTwidth,
+          height: this.inTheight,
+          imageSmoothingEnabled: true,
+          imageSmoothingQuality: "high",
+        })
+        .toDataURL("image/png");
+      this.exportToBlob();
+    },
+    exportToBlob() {
+      const self = this,
+            actualImage = this.$refs.actualImage as HTMLInputElement,
+            container = new DataTransfer();
+      if (!actualImage.files) {
+        throw new Error("2- missing files list");
+      }
+      this.fetchDataUrlImageSizes(self.inTvalue);
+      const file = new File(
+        [self.dataURLtoBlob(self.inTvalue)],
+        self.inToriginalFileName,
+        {
+          type: "image/png",
+          lastModified: new Date().getTime(),
+        }
+      );
+      this.inToriginalFile = file;
+      this.$emit("imageFile", file);
+      container.items.add(file);
+      actualImage.files = container.files;
+    },
+    humanFileSize(sizeBytes: number | bigint): string {
+      let size = Math.abs(Number(sizeBytes));
 
-  <style lang="scss" scopped>
-  @import "~cropperjs/dist/cropper.css";
-  @import "../../../../node_modules/bootstrap/scss/bootstrap-utilities.scss";
+      let u = 0;
+      while (size >= BYTES_PER_KB && u < UNITS.length - 1) {
+        size /= BYTES_PER_KB;
+        ++u;
+      }
 
-  .ImageInput {
-    /* Ensure the size of the image fit the container perfectly */
-    .imageModification {
-      display: block;
+      return new Intl.NumberFormat([], {
+        style: "unit",
+        unit: UNITS[u],
+        unitDisplay: "short",
+        maximumFractionDigits: 1,
+      }).format(size);
+    },
+  },
+});
+</script>
 
-      /* This rule is very important, please don't ignore this */
-      max-width: 100%;
-    }
-    .rotateButton {
-      display: flex;
-      flex-direction: column;
-    }
-    .rotateDrag {
-      display: flex;
-      flex-direction: column-reverse;
+<style lang="scss" scopped>
+@import "~cropperjs/dist/cropper.css";
+
+.image-input-vue {
+  /* Ensure the size of the image fit the container perfectly */
+  .image-modification {
+    display: block;
+
+    /* This rule is very important, please don't ignore this */
+    max-width: 100%;
+  }
+  .rotateButton {
+    display: flex;
+    flex-direction: column;
+  }
+  .rotate-drag {
+    display: flex;
+    flex-direction: column-reverse;
+    width: 100%;
+    & > input {
       width: 100%;
-      & > input {
-        width: 100%;
-      }
-    }
-    .previewIMG {
-      position: relative;
-      & > div {
-        position: relative;
-        overflow: hidden;
-        border: 1px solid black;
-        top: 50%;
-        left: 50%;
-        transform: translateX(-50%) translateY(-50%);
-      }
-    }
-    input.rightAligned {
-      direction: ltr !important;
-      overflow: hidden !important;
-    }
-    input.rightAligned:not(:focus) {
-      direction: rtl !important;
-      text-align: left !important;
-      text-overflow: ellipsis !important;
     }
   }
-  </style>
+  .preview-img {
+    position: relative;
+    & > div {
+      position: relative;
+      overflow: hidden;
+      border: 1px solid black;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+  }
+  input.right-aligned {
+    direction: ltr !important;
+    overflow: hidden !important;
+  }
+  input.right-aligned:not(:focus) {
+    direction: rtl !important;
+    text-align: left !important;
+    text-overflow: ellipsis !important;
+  }
+}
+</style>