import Uppy from '@uppy/core' import Dashboard from '@uppy/dashboard' import GoldenRetriever from '@uppy/golden-retriever' import AwsS3 from '@uppy/aws-s3' // @see https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/uppy/s3-multipart.js const UppyHook = { mounted() { let live = this const element = live.el; // Get the value of the `data-endpoint` attribute // const endpoint = element.getAttribute('data-endpoint'); new Uppy() .use(Dashboard, { inline: true, target: '#uppy-dashboard', theme: 'dark', proudlyDisplayPoweredByUppy: false }) .use(AwsS3, { signPart(file, partData) { return new Promise((resolve) => { live.pushEvent('sign_part', partData, (reply, ref) => { // console.log(`We got a response from sign_part pushEvent. reply=${JSON.stringify(reply)}`) let { url, headers } = reply // console.log(`got url=${url} and headers=${headers} from reply`) resolve({ url, headers }) }) }) }, createMultipartUpload(file) { console.log(`createMultipartUpload with file ${JSON.stringify(file)}`) let { name, type } = file.meta let size = file.size let payload = { name, type, size } return new Promise((resolve) => { live.pushEvent('initiate_multipart_upload', payload, (reply, ref) => { console.log(`payload=${JSON.stringify(payload)}`) console.log(`initiate_multipart_upload pushEvent response callback.`) console.log(`got reply=${JSON.stringify(reply)}`) console.log(`got ref=${JSON.stringify(ref)}`) let output = { uploadId: reply?.upload_id, key: reply?.key } resolve(output) }) }) }, completeMultipartUpload(file, { key, uploadId, parts }) { // console.log(`completeMultipartUpload with file ${JSON.stringify(file)}, parts=${JSON.stringify(parts)}`) // parts = parts.map((part) => Object.assign({}, part, { etag: part.etag.replace(/^"|"$/, "") } )) parts = parts.map((part) => ({ etag: part.ETag.replace(/"/g, ""), part_number: part.PartNumber })); // console.log(parts) let payload = { key, uploadId, parts } return new Promise((resolve) => { live.pushEvent('complete_multipart_upload', payload, (reply, ref) => { // console.log(`payload=${JSON.stringify(payload)}`) // console.log(`complete_multipart_upload pushEvent response callback.`) // console.log(`got reply=${JSON.stringify(reply)}`) // console.log(`got ref=${JSON.stringify(ref)}`) let output = { location } resolve(output) }) }) }, getUploadParameters(file, options) { // console.log(`getUploadParameters with file=${JSON.stringify(file)}, options=${JSON.stringify(options)}`) return new Promise((resolve) => { let payload = { type: file.type, name: file.name } live.pushEvent('get_upload_parameters', payload, (reply, ref) => { // console.log(`reply=${JSON.stringify(reply)}`) let { type, method, url } = reply let output = { type, method, url } resolve(output) }) }) }, listParts(file, { uploadId, key }) { // console.log('pushing list_parts event') let payload = { uploadId, key } live.pushEvent('list_parts', payload, (reply) => { return reply }) }, shouldUseMultipart(file) { // Use multipart only for files larger than 100MiB. // return file.size > 100 * 2 ** 20; return file.size > 100 * 2; }, }); }, beforeUpdate() { }, updated() { // console.log("UppyHook updated"); }, destroyed() { }, disconnected() { }, reconnected() { } } export default UppyHook