import React, { useState } from 'react';
const FileUpload: React.FC = () => {
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const files = event.target.files;
if (files) {
setSelectedFiles([...selectedFiles, ...Array.from(files)]);
}
};
const handleIconClick = () => {
if (fileInputRef.current) {
fileInputRef.current.click();
}
};
const handleRemoveFile = (index: number) => {
const updatedFiles = [...selectedFiles];
updatedFiles.splice(index, 1);
setSelectedFiles(updatedFiles);
};
const fileInputRef = React.createRef<HTMLInputElement>();
return (
<div>
<input
type="file"
multiple
style={{ display: 'none' }}
ref={fileInputRef}
onChange={handleFileChange}
/>
<button onClick={handleIconClick}>Upload Files</button>
<ul>
{selectedFiles.map((file, index) => (
<li key={index}>
{file.name}{' '}
<button onClick={() => handleRemoveFile(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
};
export default FileUpload;