Shift + Click doesn't work on multiple files in provider views

[mkabatek]

I used to be able to shift + click to select multiple files. However, for some reason that doesn't seem to work anymore. Maybe I'm doing something wrong, but I remember it used to work. If I want to select 100 files from a list I now need to click each one.

Can anyone else confirm this is an issue?

[Murderlon]

I assume you mean this happens in your OS browser picker for local files. If that's the case, we don't control the keyboard there at all, the OS does.

[mkabatek]

@Murderlon, no it happens in the uppy picker, using any integration/plugin - Google drive, Dropbox, or Onedrive.

I'm using macOS Monterey, and chrome Version 101.0.4951.64

Edit:

    "@uppy/aws-s3": "2.0.7",
    "@uppy/aws-s3-multipart": "2.2.0",
    "@uppy/companion": "3.1.5",
    "@uppy/core": "2.1.4",
    "@uppy/dashboard": "2.1.3",
    "@uppy/dropbox": "2.0.5",
    "@uppy/google-drive": "2.0.5",
    "@uppy/onedrive": "2.0.5",
    "@uppy/tus": "2.2.0",
    "@uppy/xhr-upload": "2.0.7",```
    

[Murderlon]

I see. I didn't know shift + click has ever worked there to be honest.

The logic is here. Would you be willing to contribute?

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

Lines 22 to 75 in 797e171

	/**
	* 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 && e.shiftKey) {
	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 validatedRestrictions = uppy.validateRestrictions(
	remoteFileObjToLocal(item),
	[...uppy.getFiles(), ...reducedCurrentSelection],
	)
	if (validatedRestrictions.result) {
	reducedCurrentSelection.push(item)
	} else {
	uppy.info({ message: validatedRestrictions.reason }, '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]),
	})
	}
	}

[mkabatek]

@Murderlon I can make an attempt to fix it, however I just noticed that it doesn't work anymore where in the past it did. This is the case on multiple different browsers, firefox, safari, etc.

[arturi]

@mkabatek I have a PR with the fix: #3768. Thanks for reporting!

[arturi]

npm release with the fix is out!