1

Is there a way to send base64 encoded data using uppy.io? I already have it working for 'soft-copy' document uploads using the Dashboard component, but cant seem to work out a way where I can pass the file bytes and not use an input file tag to provide the data to be uploaded.

Context: I have a page that uses a JavaScript component to access local scanner hardware. It scans, shows a preview, all working. The user then hits an upload button to push it to the server, the scanning component outputs the scan as base64 encoded data. I can send this up to the server using XMLHttpRequest like so:

    var req = new XMLHttpRequest();
    var formData = new FormData();
    formData.append('fileName', uploadFileName);
    formData.append('imageFileAsBase64String', imageFileAsBase64String);
    req.open("POST", uploadFormUrl);
    req.onreadystatechange = __uploadImages_readyStateChanged;
    req.send(formData);

but I would really like to use uppy because scan files can be quite large and I get the resumable uploads, nice progress bar etc, and I already have tusdotnet on the back setup and ready to receive it.

All the examples rely on input tags so I dont really know what approach to take. thanks for any pointers.

Phil Thompson
  • 21
  • 2

1 Answers1

1

I eventually figured this out. here in case its useful to anyone else. you can use fetch to convert the base64 string, then turn it into a blob and finally add it to uppy files via the addFile api.

I referenced this article: https://ionicframework.com/blog/converting-a-base64-string-to-a-blob-in-javascript/

code below works with my setup with tusdotnet handling the tus service server side.

    var uppy = new Uppy.Core({
        autoProceed: true,
        debug: true
    })
        .use(Uppy.Tus, { endpoint: 'https://localhost:44302/files/' })
        .use(Uppy.ProgressBar, {
            target: '.UppyInput-Progress',
            hideAfterFinish: false,
        })

    uppy.on('upload', (data) => {
        uppy.setMeta({ md:'value' })
    })

    uppy.on('complete', (result) => {
         // do completion stuff
    })

    fetch(`data:image/jpeg;base64,${imageFileAsBase64String}`)
        .then((response) => response.blob()) 
        .then((blob) => {
            uppy.addFile({
                name: 'image.jpg',
                type: 'image/jpeg',
                data: blob
            })
        });
Phil Thompson
  • 21
  • 2