[Uploader] Unable to re-add an individual file that has been cancelled.

[silent-e]

Environment:

• Elements version: 25.4.0

Desktop (please complete the following information):

• OS: macOS Sequoia
• Browser: Safari, Firefox, Chrome

Steps to reproduce the problem:

1. Visit the uploader doc page. It even happens here. Easier than coming up with a demo app.
2. Drop two files on the uploader area. Do not start an upload.
3. Cancel one of them.
4. Drop the same file you just cancelled
5. Scratch your head wondering why the file didn't show up in the list

What is the expected behavior? (Screenshots can be helpful here)

The cancelled file should reappear as a item in the item list.

What went wrong? (Screenshots, console logs, or HAR files can be helpful here)

The state.itemIds object keys (stored here in the code) for the cancelled file were not removed. If a file with a name that matches a key in the itemIds object then that file will not be accepted. You can delete the key matching the filename from state.itemIds, ignoring the longer file id key for the same file, and it will accept the file into the file list again.

The only way to drop the cancelled file again is to remove all files from the list. This resets the itemIds object and so no key collision happens, thus accepting the cancelled file again.

Link to application or sample code:

Link to application? How about the docs. :) https://developer.box.com/guides/embed/ui-elements/uploader/

[silent-e]

The solution I'm using right now is attaching a callback to the row removal and running the following code in my Stimulus controller.

// options for the uploader.show() function called in my controller connect() method.
const options = {
  onClickCancel: this.#handleClearFileRow.bind(this),
};

// callback function handing a row that is cleared.  `this.uploader` is an instance of the uploader.
#handleClearFileRow(file) {
  // console.log(`handleClearFileRow.  file: ${file.name}`);
  const keys_matching_filename = Object.keys(this.uploader.component.state.itemIds).filter((element) => {
    return element.startsWith(file.name);
  });
  keys_matching_filename.forEach((key) => delete this.uploader.component.state.itemIds[key]);
}

This code clears all matching keys from the itemIds object including the longer one with id and timestamp. This allows cleared files to be dropped again without clearing the entire list.

Obviously it'd be nice if the Box code handled clearing the keys properly after the removal of a row. Thanks.

(e)