the docs state that a making a classic form submission with inertia causes a full page reload, so perhaps the plugin does this, causing the page to reload?
Jul 20, 2023
3
Level 9
Preventing the partial page reload when uploading with uppy xhr
onMounted(() => {
uppy.value = new Uppy({
id: 'uppyWizard',
autoProceed: true,
debug: true,
allowMultipleUploadBatches: true,
restrictions: {
maxFileSize: false,
allowedFileTypes: ['image/*', '.pdf', '.eps', '.ai', '.svg', '.dxf']
}
});
let dashboardSettings = {
inline: false,
target: '#dashboard_container',
replaceTargetContent: true,
showProgressDetails: true,
proudlyDisplayPoweredByUppy: false,
showLinkToFileUploadResult: false,
showSelectedFiles: false,
trigger: '#open_uppy_modal',
closeAfterFinish: true,
browserBackButtonClose: true,
closeModalOnClickOutside: true,
};
uppy.value.use(Dashboard, dashboardSettings);
uppy.value.use(XHRUpload, {
endpoint: '/api/artwork',
headers: {
'X-CSRF-TOKEN': props.token
},
fieldName: 'file',
});
uppy.value.on('upload-success', (file, body) => {
uploadedArtwork.value.push({ name: file.name, s3Path: body.body.path });
});
})
I'm using uppy to upload a file using the xhr plugin. Is there anyway to prevent the plugin from reloading the data? Equivalent to if we were performing a manual visit and setting the options to preserveState: true
Thanks
Level 9
Closing uppy's modal seemed to be manipulating the DOM in a way that's causing Vue to re-render the component, interfering with Vue's virtual DOM in some way, so had nothing to do with inertia or the xhr request. Solution is to wrap the initialization and modal handling in a separate Vue component...or just use the uppy/vue dashboard component.
Please or to participate in this conversation.