From ff7e1ac7c3e9c5cd94dc0498245315d38375ce93 Mon Sep 17 00:00:00 2001
From: formsdev <136701234+formsdev@users.noreply.github.com>
Date: Sat, 13 Jan 2024 19:04:50 +0530
Subject: [PATCH] nuxt migration -file upload - WIP (#271)

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/components/forms/FileInput.vue  |  9 ++--
 client/components/forms/ImageInput.vue |  7 +++-
 client/lib/file-uploads.js             | 57 ++++++++++++++++++++++++++
 3 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 client/lib/file-uploads.js

diff --git a/client/components/forms/FileInput.vue b/client/components/forms/FileInput.vue
index f5eeaf2..4d904dc 100644
--- a/client/components/forms/FileInput.vue
+++ b/client/components/forms/FileInput.vue
@@ -79,6 +79,7 @@
 import { inputProps, useFormInput } from './useFormInput.js'
 import InputWrapper from './components/InputWrapper.vue'
 import UploadedFile from './components/UploadedFile.vue'
+import {storeFile} from "~/lib/file-uploads.js"
 
 export default {
   name: 'FileInput',
@@ -186,7 +187,7 @@ export default {
     uploadFileToServer (file) {
       if (this.disabled) return
       this.loading = true
-      this.storeFile(file)
+      storeFile(file)
         .then((response) => {
           if (!this.multiple) {
             this.files = []
@@ -195,8 +196,10 @@ export default {
             // Move file to permanent storage for form assets
             opnFetch('/open/forms/assets/upload', {
               method: 'POST',
-              type: 'files',
-              url: file.name.split('.').slice(0, -1).join('.') + '_' + response.uuid + '.' + response.extension
+              body: {
+                type: 'files',
+                url: file.name.split('.').slice(0, -1).join('.') + '_' + response.uuid + '.' + response.extension
+              }
             }).then(moveFileResponseData => {
               this.files.push({
                 file: file,
diff --git a/client/components/forms/ImageInput.vue b/client/components/forms/ImageInput.vue
index ff90b5c..5245944 100644
--- a/client/components/forms/ImageInput.vue
+++ b/client/components/forms/ImageInput.vue
@@ -110,6 +110,7 @@
 import { inputProps, useFormInput } from './useFormInput.js'
 import InputWrapper from './components/InputWrapper.vue'
 import Modal from '../global/Modal.vue'
+import {storeFile} from "~/lib/file-uploads.js"
 
 export default {
   name: 'ImageInput',
@@ -187,11 +188,13 @@ export default {
     uploadFileToServer () {
       this.loading = true
       // Store file in s3
-      this.storeFile(this.file).then(response => {
+      storeFile(this.file).then(response => {
         // Move file to permanent storage for form assets
         opnFetch('/open/forms/assets/upload', {
           method: 'POST',
-          url: this.file.name.split('.').slice(0, -1).join('.') + '_' + response.uuid + '.' + response.extension
+          body: {
+            url: this.file.name.split('.').slice(0, -1).join('.') + '_' + response.uuid + '.' + response.extension
+          }
         }).then(moveFileResponseData => {
           if (!this.multiple) {
             this.files = []
diff --git a/client/lib/file-uploads.js b/client/lib/file-uploads.js
new file mode 100644
index 0000000..5fb813e
--- /dev/null
+++ b/client/lib/file-uploads.js
@@ -0,0 +1,57 @@
+import opnformConfig from "~/opnform.config.js";
+
+export const storeFile = async (file, options = {}) => {
+  if(!opnformConfig.s3_enabled) { // If not s3 then upload to local temp
+    let formData = new FormData()
+    formData.append('file', file)
+    const response = await useOpnApi('/upload-file', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+      body: formData
+    })
+    response.data.extension = file.name.split('.').pop()
+    return response.data
+  }
+
+  const response = await useOpnApi(options.signedStorageUrl ? options.signedStorageUrl : '/vapor/signed-storage-url', {
+    method: 'POST',
+    body: options.data,
+    bucket: options.bucket || '',
+    content_type: options.contentType || file.type,
+    expires: options.expires || '',
+    visibility: options.visibility || '',
+    baseURL: options.baseURL || null,
+    headers: options.headers || {},
+    ...options.options
+  })
+  console.log("response.data",response.data)
+
+  const headers = response.data.headers
+
+  if ('Host' in headers) {
+    delete headers.Host
+  }
+
+  if (typeof options.progress === 'undefined') {
+    options.progress = () => {}
+  }
+
+  const cancelToken = options.cancelToken || ''
+
+  // Remove authorization headers
+  const cleanAxios = axios.create()
+  cleanAxios.defaults.headers.common = {}
+  await cleanAxios.put(response.data.url, file, {
+    cancelToken: cancelToken,
+    headers: headers,
+    onUploadProgress: (progressEvent) => {
+      options.progress(progressEvent.loaded / progressEvent.total)
+    }
+  })
+
+  response.data.extension = file.name.split('.').pop()
+
+  return response.data
+}
\ No newline at end of file