update image uploader

src/components/ImageUploader.vue

@@ -1,8 +1,9 @@
 <template>
-  <q-card>
+  <q-card class="ImageUploader">
     <q-card-section>
-      <div>
-        ({{ value || file }})
+      <div class="address">
+        <q-input v-model="displayAddress"
+                 readonly />
       </div>
       <entity-create ref="entityCreate"
                      v-model:value="inputs"
@@ -26,6 +27,15 @@
           </div>
         </div>
       </div>
+      <q-separator class="q-my-md" />
+      <div>
+        <div>
+          آدرس عکس دلخواه
+          <br>
+          (در صورتی که قبلا عکس را آپلود کرده اید می توانید به جای آپلود مجدد، آدرس عکس را در این قسمت قرار دهید)
+        </div>
+        <q-input v-model="customUrl" />
+      </div>
     </q-card-section>
   </q-card>
 </template>
@@ -49,6 +59,7 @@ export default {
   },
   data: () => {
     return {
+      customUrl: null,
       entityLoading: false,
       api: APIGateway.media.APIAdresses.base,
       entityIdKeyInResponse: 'id',
@@ -56,12 +67,29 @@ export default {
       showRouteName: 'AdminPanel.Service.Show',
       indexRouteName: 'AdminPanel.Service.List',
       inputs: [
-        { type: 'file', name: 'file', responseKey: 'file', label: 'فایل تصویر', col: 'col-md-6 col-12' },
+        { type: 'file', name: 'file', responseKey: 'file', label: 'فایل تصویر', col: 'col-12' },
         { type: 'hidden', name: 'source_type', value: 'SETTING' },
         { type: 'hidden', name: 'type', value: 'VIDEO' }
       ]
     }
   },
+  computed: {
+    displayAddress: {
+      get () {
+        return this.value || this.file
+      }
+    }
+  },
+  watch: {
+    customUrl (newValue) {
+      if (!newValue) {
+        return
+      }
+
+      this.$emit('update:file', newValue)
+      this.$emit('update:value', "url('" + newValue + "')")
+    }
+  },
   methods: {
     create() {
       this.entityLoading = true
@@ -81,6 +109,10 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+.ImageUploader {
+  .address {
+    max-width: 100%;
+  }
+}
 </style>