Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

robgoodliffe's avatar

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

0 likes
3 replies
robgoodliffe's avatar

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?

robgoodliffe's avatar

it seems the page state is lost only after the uppy modal is closed meaning it has nothing to do with the xhr request itself. Somehow closing the modal cause the page to re-render.

robgoodliffe's avatar
robgoodliffe
OP
Best Answer
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.