import React, { useState } from 'react'; import { Card, Col, Row, Container } from 'react-bootstrap'; import Dropzone from "react-dropzone"; import BreadCrumb from '../../../Components/Common/BreadCrumb'; // Import React FilePond import { FilePond, registerPlugin } from 'react-filepond'; // Import FilePond styles 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'; import { Head, Link } from '@inertiajs/react'; import Layout from '../../../Layouts'; // Register the plugins registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview); const FileUpload = () => { const [selectedFiles, setselectedFiles] = useState([]); const [files, setFiles] = useState([]); function handleAcceptedFiles(files : any) { files.map((file: any) => Object.assign(file, { preview: URL.createObjectURL(file), formattedSize: formatBytes(file.size), }) ); setselectedFiles(files); } /** * Formats the size */ function formatBytes(bytes : any, decimals = 2) { if (bytes === 0) return "0 Bytes"; const k = 1024; const dm = decimals < 0 ? 0 : decimals; const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i]; } return (

Dropzone

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

{ handleAcceptedFiles(acceptedFiles); }} > {({ getRootProps, getInputProps }) => (

Drop files here or click to upload.

)}
{selectedFiles.map((f : any, i : any) => { return (
{f.name}
{f.formattedSize}

); })}

Filepond

Multiple File Upload

FilePond is a JavaScript library that optimizes multiple images for faster uploads and offers a great, accessible, silky smooth user experience.

); }; FileUpload.layout = (page:any) => export default FileUpload;