nuxt migration -file upload - WIP (#271)

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
formsdev 2024-01-13 19:04:50 +05:30 committed by GitHub
parent 57ce0e6114
commit ff7e1ac7c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 68 additions and 5 deletions

View File

@ -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,

View File

@ -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 = []

57
client/lib/file-uploads.js vendored Normal file
View File

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