# code-snippets/4.0.0-beta.1/js/components/Import/FromFileUpload/hooks/useFileSelection.ts

Code Snippets, version 4.0.0-beta.1. 43 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/code/js/components/Import/FromFileUpload/hooks/useFileSelection.ts
- Raw: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/raw/js/components/Import/FromFileUpload/hooks/useFileSelection.ts
- Modified: 2026-01-16T19:28:10+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/code/js/components/Import/FromFileUpload/hooks/useFileSelection.ts#L10-L20`.

```typescript
import { useState, useRef } from 'react'
import { removeFileFromList } from '../utils/fileUtils'

export const useFileSelection = () => {
	const [selectedFiles, setSelectedFiles] = useState<FileList | null>(null)
	const fileInputRef = useRef<HTMLInputElement>(null)

	const handleFileSelect = (files: FileList | null) => {
		setSelectedFiles(files)
	}

	const removeFile = (index: number) => {
		if (!selectedFiles) return
		
		const newFiles = removeFileFromList(selectedFiles, index)
		setSelectedFiles(newFiles)
		
		if (fileInputRef.current) {
			fileInputRef.current.files = newFiles
		}
	}

	const clearFiles = () => {
		setSelectedFiles(null)
		if (fileInputRef.current) {
			fileInputRef.current.value = ''
		}
	}

	const triggerFileInput = () => {
		fileInputRef.current?.click()
	}

	return {
		selectedFiles,
		fileInputRef,
		handleFileSelect,
		removeFile,
		clearFiles,
		triggerFileInput
	}
}

```