Add (v1)

resources/js/vue/NativeImageBlock.vue

@@ -9,7 +9,7 @@
         <div
           class="position-absolute w-100 h-100 d-flex justify-content-center text-center"
         >
-          <div v-if="isUploading" class="align-self-center">
+          <div v-if="isUploading || !isLoaded" class="align-self-center">
             <div class="spinner-border text-light" role="status">
               <span class="visually-hidden">Loading...</span>
             </div>
@@ -34,16 +34,18 @@
 
 <script>
 import axios from "axios";
+import route from "ziggy-js/src/js/index";
 
 export default {
   name: "NativeImageBlock",
   props: {
-    apiUrl: {
+    inputImage: {
       type: String,
-      default: "https://productalert.test/api/admin/image/upload",
+      default: null,
     },
   },
   data: () => ({
+    isLoaded: false,
     isUploading: false,
     imgSrc: null,
     placeholderSrc: "https://placekitten.com/g/2100/900",
@@ -91,7 +93,7 @@ export default {
       formData.append("file", file);
 
       axios
-        .post(this.apiUrl, formData, {
+        .post(route("api.admin.upload.cloud.image"), formData, {
           headers: {
             "Content-Type": "multipart/form-data",
           },
@@ -115,9 +117,23 @@ export default {
           this.isUploading = false;
         });
     },
+    setInputImage() {
+      if (this.inputImage != null && this.inputImage?.length > 0) {
+        this.imgSrc = this.inputImage;
+      }
+      this.isLoaded = true;
+    },
   },
   mounted() {
     this.isUploading = false;
+
+    setTimeout(
+      function () {
+        this.setInputImage();
+        this.isLoaded = true;
+      }.bind(this),
+      3000
+    );
   },
 };
 </script>