add button to open files and folders

src/components/MediaList/MediaList.js

@@ -3,14 +3,21 @@ import { useDropzone } from 'react-dropzone';
 import './MediaList.css'
 
 function MediaList({ files, selectedFile, onFileSelect, onDropNewFiles }) {
-    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    const { getRootProps, getInputProps, isDragActive, open: openFileDialog } = useDropzone({
         onDrop: onDropNewFiles,
+        multiple: true,
     });
+    const { getRootProps: getFolderRootProps, getInputProps: getFolderInputProps, open: openFolderDialog } = useDropzone({
+        onDrop: onDropNewFiles,
+        multiple: true
+    });
+
+
     const [filteredFiles, setFilteredFiles] = useState(files);
 
-    useEffect(()=>{
+    useEffect(() => {
         setFilteredFiles(files);
-    },[files])
+    }, [files])
 
 
     const handleInputChange = (e) => {
@@ -22,7 +29,13 @@ function MediaList({ files, selectedFile, onFileSelect, onDropNewFiles }) {
     return (
         <div className='explorer'>
             <h3 className='menu-title' >Files</h3>
-            <input className='file-filter' type='text' placeholder='Filename' onChange={handleInputChange}/>
+            <button type="button" onClick={openFileDialog}>
+                Open File
+            </button>
+            <button type="button" onClick={openFolderDialog}>
+                Open Folder
+            </button>
+            <input className='file-filter' type='text' placeholder='Filename' onChange={handleInputChange} />
             <ul className='file-list-group' >
                 {filteredFiles.map((file) => (
                     <li
@@ -39,6 +52,9 @@ function MediaList({ files, selectedFile, onFileSelect, onDropNewFiles }) {
             </ul>
             <div className='file-input-block' {...getRootProps()} >
                 <input {...getInputProps()} />
+                <div style={{ display: 'none' }}>
+                    <input {...getFolderInputProps()} webkitdirectory="true" mozdirectory="true" />
+                </div>
                 {isDragActive ? (
                     <p className='label' >Drop here</p>
                 ) : (