Using shift+click to select multiple files in the dropbox plugin disables checkboxes in other dropbox folders

[garyescudero]

Initial checklist

• I understand this is a bug report and questions should be posted in the Community Forum
• I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

No response

Steps to reproduce

It's possible to reproduce this on the uppy demo page (https://uppy.io/examples/dashboard/).

1. Click dropbox
2. Sign in
3. Navigate to a subfolder
4. Select multiple files by clicking on one file, then shift+clicking on another file
5. Navigate to a different folder
6. Some of the files in this folder cannot be selected.

Expected behavior

User should be able to select files.

Actual behavior

User is not able to select files.

Video attached is zipped for file size restriction.

Dashboard — Uppy - Google Chrome 2023-02-17 11-24-34.zip

[tcgj]

This is also happening with other providers. I've tried to use Google Drive, and the issue far extends beyond this problem.

After a range selection (click 1 file, shift-click another file to select all files in range) is made, the first file selected is permanently set, and clicking (not shift-click) any other file will create a range selection from that first file to the clicked file. Even if you click cancel to reset selection, the first file will be remembered and will still make a range selection. And once you navigate to a different folder, files become un-selectable.

[Murderlon]

Good catch! Are you interested in making a PR?

It should only be confined to this function:

uppy/packages/@uppy/provider-views/src/View.js

Lines 112 to 165 in cc5b015

	/**
	* Toggles file/folder checkbox to on/off state while updating files list.
	*
	* Note that some extra complexity comes from supporting shift+click to
	* toggle multiple checkboxes at once, which is done by getting all files
	* in between last checked file and current one.
	*/
	toggleCheckbox = (e, file) => {
	e.stopPropagation()
	e.preventDefault()
	e.currentTarget.focus()
	const { folders, files } = this.plugin.getPluginState()
	const items = this.filterItems(folders.concat(files))
	// Shift-clicking selects a single consecutive list of items
	// starting at the previous click and deselects everything else.
	if (this.lastCheckbox && this.isShiftKeyPressed) {
	const prevIndex = items.indexOf(this.lastCheckbox)
	const currentIndex = items.indexOf(file)
	const currentSelection = (prevIndex < currentIndex)
	? items.slice(prevIndex, currentIndex + 1)
	: items.slice(currentIndex, prevIndex + 1)
	const reducedCurrentSelection = []
	// Check restrictions on each file in currentSelection,
	// reduce it to only contain files that pass restrictions
	for (const item of currentSelection) {
	const { uppy } = this.plugin
	const restrictionError = uppy.validateRestrictions(
	remoteFileObjToLocal(item),
	[...uppy.getFiles(), ...reducedCurrentSelection],
	)
	if (!restrictionError) {
	reducedCurrentSelection.push(item)
	} else {
	uppy.info({ message: restrictionError.message }, 'error', uppy.opts.infoTimeout)
	}
	}
	this.plugin.setPluginState({ currentSelection: reducedCurrentSelection })
	return
	}
	this.lastCheckbox = file
	const { currentSelection } = this.plugin.getPluginState()
	if (this.isChecked(file)) {
	this.plugin.setPluginState({
	currentSelection: currentSelection.filter((item) => item.id !== file.id),
	})
	} else {
	this.plugin.setPluginState({
	currentSelection: currentSelection.concat([file]),
	})
	}
	}

[tcgj]

It isn't only that function that needs some modifications, but i'll make a PR after I've gotten things working right!