react-filepond

import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import { FilePond, registerPlugin } from 'react-filepond'; import 'filepond/dist/filepond.min.css'; import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation'; import FilePondPluginImagePreview from 'filepond-plugin-image-preview'; import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'; // Register the plugins (ensure they are installed via npm) registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview); function App() { const [files, setFiles] = useState([]); // Example of a dummy server endpoint for demonstration. // In a real app, this would point to your backend upload API. const serverEndpoint = process.env.REACT_APP_UPLOAD_API || '/api/upload'; return ( <div className="App" style={{ maxWidth: '500px', margin: '50px auto' }}> <h1>Upload Files</h1> <FilePond files={files} onupdatefiles={setFiles} allowMultiple={true} maxFiles={3} server={serverEndpoint} name="files" labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>' /> {files.length > 0 && ( <div style={{ marginTop: '20px' }}> <h3>Current Files:</h3> <ul> {files.map((fileItem, index) => ( <li key={index}>{fileItem.file.name}</li> ))} </ul> </div> )} </div> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);