nuxt migration -file upload - WIP (#271)

Co-authored-by: Julien Nahum <julien@nahum.net>

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',
+              body: {
                 type: 'files',
                 url: file.name.split('.').slice(0, -1).join('.') + '_' + response.uuid + '.' + response.extension
+              }
             }).then(moveFileResponseData => {
               this.files.push({
                 file: file,

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',
+          body: {
             url: this.file.name.split('.').slice(0, -1).join('.') + '_' + response.uuid + '.' + response.extension
+          }
         }).then(moveFileResponseData => {
           if (!this.multiple) {
             this.files = []

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
+}