[HELP] How do I trigger file uploads programatically?

[ppshobi]

I have an Uppy component,

Now I want to display some images by default (like yo see in the picture) in which if the user clicks on any image, it should get uploaded,

I checked the Url, Plugin, But did not reached anywhere. Can anyone give some entry points?

[goto-bus-stop]

You can use the autoProceed option to start uploading as soon as files are added, or the upload() method to upload all newly selected files.

To add standard images, a way to do this is to create a Blob object for them which you can add using addFile():

function onImageClicked () {
  // assuming the image lives on a server somewhere
  return fetch('/path/to/image.jpg')
    .then((response) => response.blob()) // returns a Blob
    .then((blob) => {
      uppy.addFile({
        name: 'image.jpg',
        type: blob.type,
        data: blob
      })
   })
}

Of course that downloads the image first and then uploads it, which is not the most efficient.

When using the Url plugin you can do the kind of hacky:

uppy.getPlugin('Url')
  .addFile('/path/to/image.jpg')

That requires a working instance of Uppy Companion (previously Uppy Server), though.

Hope that helps! Sorry that there's not a clearer way to do this right now, our focus has been on uploads from the user device and imports from third parties.

[ppshobi]

I tried it and it worked, but a small tweak in the code,

function onImageClicked() {
    // assuming the image lives on a server somewhere
    return fetch('https://s3-eu-west-1.amazonaws.com/storat/register-covers/banner8.jpg')
        .then((response) => response.blob()) // returns a Blob
        .then((blob) => {
            uppy.addFile({
                name: 'image.jpg',
                type: blob.type,
                data: blob // changed blob -> data
            })
        })
})();

[goto-bus-stop]

Oops! yes that should've been data, sorry 😅 Glad that worked!

[OgenrwotAaron]

How would I add the blob to a transloadit plugin?

[arturi]

@OgenrwotAaron The Transloadit plugin will get it from Uppy automatically on upload. All plugins share Uppy’s state and files.