How to open the uploadList when adding files programatically

[AndreasHald]

As far as I know previously when using addFiles function we upload list automatically opened when we added files. However now using the addFileFromObject it doesn't how do I programatically open it?

I have attempted the following

<script>
    let uploaderContext: UploadCtxProvider;
    let dataOutput: DataOutput;
</script>
...

<lr-config ctx-name={context} ...  />
<lr-data-output ctx-name={context} bind:this={dataOutput} />
 <lr-upload-ctx-provider ctx-name={context} bind:this={uploaderContext} />

<button on:drop={(e) => {
            const files = [...(e.dataTransfer?.files || [])];
            for (const file of files) {
                uploaderContext.addFileFromObject(file);
            }
            dataOutput.$['*modalActive'] = true;
        }}>
Upload
</button>

I found the example here

Files are uploaded however the dialog showing progress is now shown

[nd0ut]

Hey @AndreasHald,

you need to call initFlow() on the context:

dataOutput.initFlow();

[barbalex]

This is not working in version 1 any more. How is it done now?

[nd0ut]

This is not working in version 1 any more. How is it done now?

Hey!

The lr-data-output component was removed, so you don’t need it anymore unless you’re working with plain HTML forms.

Also, the prefixes were changed from lr- to uc-.

And the API instance is getting using the getAPI method instead of using the raw DOM element instance.

So here's how it goes:

const onDrop = (e) => {
  const ctx = document.querySelector("uc-upload-ctx-provider"); // use ref
  const api = ctx.getAPI();
  const files = [...(e.dataTransfer?.files || [])]; 
  for (const file of files) {
    api.addFileFromObject(file); 
  }
  // option 1 - use those two methods to set current activity and show the dialog
  api.setCurrentActivity("upload-list"); 
  api.setModalState(true); 
  
  // option 2 - use `initFlow` which is doing the same thing when there are files in the list
  api.initFlow()
};

You can check out the API details here: https://uploadcare.com/docs/file-uploader/api/

[barbalex]

This is not working for me as there is no getAPI method on the reference:

[barbalex]

Hm. I am confused. I had just recently rebuilt following your docs but the docs you now linked to seem to be different. Following them seems to give me the correct api methods.

I have a feeling that your tools, docs and api's are in a rather fluid state.

I had waited with refactoring for a few months after the implemented version had started breaking. I am now not sure if it is worth putting any energy into this now.

Du you know if your products will soon enter a (more) stable phase? When would be the moment to invest in upgrading to newer versions?

[nd0ut]

Hey @barbalex,

It looks like you're using a version < 0.37.0. This can be identified by the updateCssData method, which was removed in version 0.38.0.

On the other hand, you're trying to use the getAPI method, which was only added in version 0.48.1.

Most likely, you forgot to update the version, and when you rebuilt the code following the new documentation, you upgraded the version, which is why everything started working for you.

Starting from version 1.x, the uploader has become stable, and we will no longer break backward compatibility within the documented API.

[barbalex]

I had updated in a branch. But what I had missed was the uc-upload-ctx-provider. I had used the ref from uc-config instead. Glad to hear that things are settling. Thanks for helping!