Problems with "external sources" on upload with XHR

Uppy
1

I have a backend endpoint to which files must be sent. This endpoint already works when sending files from local drive (using a form in my application). I was trying to use Uppy for upload from “external sources” such as Drive, Facebook, etc to this endpoint. But I’m facing an issue, where the upload does not complete.

My Uppy instance is the like the following:

const uppy = new Uppy()
            .use(Dashboard, {
                trigger: '.modal-upload-external',
            }).use(GoogleDrive, {
                target: Dashboard,
                companionUrl: 'http://localhost:3020',
                companionAllowedHosts: [
                    'http://localhost:3020',
                ],
            })
            .use(XHRUpload, {
                endpoint: `http://localhost:8001/upload`,
                headers: {
                    'X-XSRF-TOKEN': 'TOKEN',
                },
            })
            .use(Url, {
                target: Dashboard,
                companionUrl: 'http://localhost:3020',
                companionAllowedHosts: [
                    'http://localhost:3020',
                ]
            });

I’m running Companion as a standalone server in localhost:3020/. The problem is that the upload seems to stop at some point:

image
image658×503 15.2 KB

In the console where I’m starting the Dashboard no error is promped. If I use a very small file, the upload status show 100% but nothing happens (just like the image above). If I use Tus instead of XHRUpload the upload is successful, but since my server is HTTP this is not an option for me :frowning:.

2

@jeanchilger Did you ever figure this one out? I am experiencing the same issue…

I have this:

        const uppy = new Uppy()
        .use(Dashboard, {
            trigger: '#dropzone',
            proudlyDisplayPoweredByUppy: false,

        })
        .use(Dropbox, { companionUrl: companion_url })
        .use(GoogleDrive, { companionUrl: companion_url })
        .use(XHR, {
            endpoint: process_url,
            formData: true,
            fieldName: 'files',
            getResponseData: (xhr) => {
                return {
                    url: 'https://www.deliberately.com/faker',
                    html: xhr.responseText,
                };
            },
        });

Which works fine for local files but fails for Dropbox and GoogleDrive exactly as you say (stuck at some % uploading).

I also experience that the api call never reaches my server (fastapi) only for the remote sources. Local files get here fine.
Server code here:

@router.post("/case/{case_id}/document")
async def create_upload_file(
    request: Request,
    files: list[UploadFile],
... other stuff
):
    documents_raw = await handle_upload_files(files, case_id, db)
... other stuff