Previews in react-dropzone work with files than images, The react-dropzone package is primarily built to handle file uploads, including photos, although it does not provide previews for non-image file types by default. You can still see previews for different file kinds by changing the dropzone component.
Here’s a general method for making previews work with files other than images
Set Accepted File Types: Use the accepted Files property to specify the file types that the drop-zone will accept. This prop accepts an array of file MIME types or file extensions.
Render Previews: You can customize how previews are rendered based on file type. Non-image file types can be shown with a default icon or a thumbnail, if available.
How to Previews in react-dropzone work with files than images?
import React, { useCallback } from 'react';<br>import { useDropzone } from 'react-dropzone';<br><br>const MyDropzone = () => {<br> const onDrop = useCallback(acceptedFiles => {<br> // Do something with the accepted files<br> console.log(acceptedFiles);<br> }, []);<br><br> const { getRootProps, getInputProps, isDragActive } = useDropzone({<br> onDrop,<br> acceptedFiles: ['.pdf', '.doc', '.docx', '.txt', '.csv'] // Specify accepted file types<br> });<br><br> return (<br> <div {...getRootProps()} style={dropzoneStyles}><br> <input {...getInputProps()} /><br> {<br> isDragActive ?<br> <p>Drop the files here...</p> :<br> <p>Drag 'n' drop some files here, or click to select files</p><br> }<br> </div><br> );<br>};<br><br>const dropzoneStyles = {<br> border: '2px dashed #cccccc',<br> borderRadius: '4px',<br> padding: '20px',<br> textAlign: 'center',<br> cursor: 'pointer'<br>};<br><br>export default MyDropzone;<br>The approved Files array specifies the file formats that the drop-zone should accept, which include PDFs, Word documents, text files, and CSVs.
You can use the onDrop callback function to take actions on accepted files, such as uploading them to a server.
Depending on your needs, you can adjust the appearance of previews for non-image file types by displaying relevant icons or thumbnails. You can accomplish this by presenting different content depending on the file type.
Similarly you can also use this method depending on what you want
const docs = [<br> { uri: "https://url-to-my-pdf.pdf" },<br> { uri: require("./example-files/pdf.pdf") }, // Local File<br>];<br>... <br><DocViewer documents={docs} />;If you don’t want to install a library and only need to show the file names, simply alter the section of the code that displays the selected files.
const thumbs = files.map(file => {<br> // Add other images types as needed<br> if(["image/png", "image/jpeg"].includes(file.type)){<br> return (<br> <div style={thumb} key={file.name}><br> <div style={thumbInner}><br> <img<br> src={file.preview}<br> style={img}<br> // Revoke data uri after image is loaded<br> onLoad={() => { URL.revokeObjectURL(file.preview) }}<br> /><br> </div><br> </div><br> );<br> }<br> // Handling other file types<br> return (<br> <div style={thumb} key={file.name}><br> <div style={thumbInner}><br> <p>{file.name}</p<br> </div><br> </div><br> );<br>});You can provide different requirements for various file mime types.
A complete list of file mime types can be found in the mdn documentation.
If you wish to append the data to the same list, you must update the onDrop() code because the Promise resolve part overwrites the list.
let fileNames = [...this.state.filenames, <br> ...completed.map(function(item) {<br> return item["filename"];<br>})];<br>this.setState({files: [...this.state.files, ...completed], fileNames: fileNames });This part should solve your problem leave us a comment if you did not get it
You can also contact stackoverflowon this problem
