Fix file submissions preview

client/components/open/forms/OpenCompleteForm.vue

@@ -117,6 +117,7 @@ import VButton from '~/components/global/VButton.vue'
 import FormCleanings from '../../pages/forms/show/FormCleanings.vue'
 import VTransition from '~/components/global/transitions/VTransition.vue'
 import {pendingSubmission} from "~/composables/forms/pendingSubmission.js";
+import clonedeep from "clone-deep";
 
 export default {
   components: { VTransition, VButton, OpenFormButton, OpenForm, FormCleanings },
@@ -176,29 +177,24 @@ export default {
       this.loading = true
       // this.closeAlert()
       form.post('/forms/' + this.form.slug + '/answer').then((data) => {
-        this.$logEvent('form_submission', {
+        useAmplitude().logEvent('form_submission', {
           workspace_id: this.form.workspace_id,
           form_id: this.form.id
         })
 
-        if (this.isIframe) {
-          window.parent.postMessage({
-            type: 'form-submitted',
-            form: {
-              slug: this.form.slug,
-              id: this.form.id
-            },
-            submission_data: form.data()
-          }, '*')
-        }
-        window.postMessage({
+        const payload = clonedeep({
           type: 'form-submitted',
           form: {
             slug: this.form.slug,
             id: this.form.id
           },
           submission_data: form.data()
-        }, '*')
+        })
+
+        if (this.isIframe) {
+          window.parent.postMessage(payload, '*')
+        }
+        window.postMessage(payload, '*')
 
         try {
           this.pendingSubmission.remove()
@@ -221,7 +217,7 @@ export default {
           this.confetti.play()
         }
       }).catch((error) => {
-        console.log('here')
+        console.error(error)
         if (error.response && error.data && error.data.message) {
           useAlert().error(error.data.message)
         }

client/components/open/tables/components/OpenFile.vue

@@ -1,20 +1,20 @@
 <template>
   <p class="text-xs">
-    <span v-for="file in value" :key="file.file_url"
+    <span v-for="file in parsedFiles" :key="file.file_url"
           class="whitespace-nowrap rounded-md transition-colors hover:decoration-none"
-          :class="{'open-file text-gray-700 dark:text-gray-300 truncate':!isImage(file.file_url), 'open-file-img':isImage(file.file_url)}"
+          :class="{'open-file text-gray-700 dark:text-gray-300 truncate':!file.is_image, 'open-file-img':file.is_image}"
     >
       <a class="text-gray-700 dark:text-gray-300" :href="file.file_url" target="_blank"
          rel="nofollow"
       >
-  <div v-if="isImage(file.file_url)" class="w-8 h-8">
-    <img class="object-cover h-full w-full rounded" :src="file.file_url"/>
+  <div v-if="file.is_image" class="w-8 h-8">
+    <img class="object-cover h-full w-full rounded" :src="file.file_url" @error="failedImages.push(file.file_url)"/>
   </div>
   <span v-else
         class="py-1 px-2"
   >
-          <a :href="file.file_url" target="_blank" download>{{ displayedFileName(file.file_name) }}</a>
-        </span>
+      <a :href="file.file_url" target="_blank" download>{{ file.displayed_file_name }}</a>
+    </span>
   </a>
   </span>
   </p>
@@ -31,25 +31,36 @@ export default {
   },
 
   data() {
-    return {}
+    return {
+      failedImages: []
+    }
   },
 
-  computed: {},
-  mounted() {
+  computed: {
+    parsedFiles() {
+      return this.value.map((file) => {
+        return {
+          file_name: file.file_name,
+          file_url: file.file_url,
+          displayed_file_name: this.displayedFileName(file.file_name),
+          is_image: !this.failedImages.includes(file.file_url) && this.isImage(file.file_name)
+        }
+      })
+    }
   },
 
   methods: {
-    isImage(url) {
+    isImage(fileName) {
       return ['png', 'gif', 'jpg', 'jpeg', 'tif'].some((suffix) => {
-        return url && url.endsWith(suffix)
+        return fileName && fileName.endsWith(suffix)
       })
     },
     displayedFileName(fileName) {
       const extension = fileName.substr(fileName.lastIndexOf(".") + 1)
       const filename = fileName.substr(0, fileName.lastIndexOf("."))
 
-      if (filename.length > 12) {
-        return filename.substr(0, 12) + '(...).' + extension
+      if (filename.length > 10) {
+        return filename.substr(0, 10) + '[...].' + extension
       }
       return filename + '.' + extension
     }