Access list of added files via Dialog API or similar

Hello,

I have a custom Media Library tab and I would like to prevent the same media from being added more then once to the “Preview” tab. Media is added by passing it with the dialogApi.addFiles method.

I explored the dialogApi.fileColl collection and found an __items array but I am unsure how to interact with it.

Curious if there is a recommendation for how to compare a file to be added via dialogApi.addFiles([uploadcare.fileFrom('uploaded', uuid, settings)]);
with a list of files that has already been added.

best,
Owen

Hi Owen,

Alex here from Uploadcare support. Thanks for the question!

The __items array contains instances of files loaded to the widget (the same list that you can see on the preview tab). A file instance is a promise-like object, and you can use its done method to get file information. For example,

dialog.fileColl.__items[0].done(fileInfo => {
  console.log(fileInfo)
})

The uploadcare.fileFrom('uploaded', uuid, settings) method returns a file instance as well. From the fileInfo object, you can get UUID of the file and use it to compare files to find if they are the same.

Does this answer your question?

That answers my question, thanks! With code like Promise.all(dialogApi.fileColl.__items).then(...) I can check if the uuid already exists and not add the item a second time.

But this leads me to a design problem: The intent is to allow the user to unselect previously selected items within the custom tab, which would require a removeFiles method, but I don’t believe one exists. Unless I am wrong there isn’t a way to remove files from the Preview tab / filesColl array programmatically?

And another question, I would need to deselect items in my Media Library state when they are removed from the Preview tab. Could you provide an example of how I would subscribe to an event like dialogApi.fileColl.onRemove?

Thanks again for the response, looking forward to your reply!

Best,
O

@owenhoskins the dialog API has the remove method that takes a file instance as an argument and removes it from the collection (it’s not documented yet).

dialogApi.fileColl.remove(file)

The onRemove event exists as well:

dialogApi.fileColl.onRemove.add(function(file) {
  // some actions here
});

Hope that helps. Let me know if you need any additional assistance with this.

1 Like

That helped, many thanks!

1 Like

@owenhoskins glad to help :raised_hands: