How to generate Previews on files other than Image files?

[faddah]

#helpwanted

Do you want to request a feature or report a bug?

• I found a bug
• [✅] I want to propose a feature — ... maybe? i'm not quite sure here. more of a help question to ask because it's not in your docs.

What is the current behavior?

Currently, when I use Dropzone for uploading accompanying files on a web form, if I Upload an Image file (*.png, *.jpg, etc.), the Preview we have set up shows just fine with a small thumbnail of the Uploaded file. (see pic below)

However, if I upload another type of file, say an MS-Outlook *.docx, *.xlsx, or say an Adobe Acrobat *.pdf, it just gives me a blank box with a broken file image and whatever alt="..." text I had put in there, in this case, "Uploaded File Preview." (see pic below)

The code we are using was copied nearly verbatim from your Preview example on the React Dropzon Web Site, so I'm wondering if I missed something here?

If the current behavior is a bug, please provide the steps to reproduce.

1. Create a react-dropzone <Dropzone> page, with have it set to accept any file type, and giving it the ability to do Previews with the code from https://react-dropzone.js.org/#previews, having the "Preview" <aside> at the bottom of the <Dropzone> section of the code.
2. Drag and Drop any sort of Image file (*.png, *.jpg or *.jpeg, *.gif, etc.).
3. Look at the Preview that appears (should be ok, a thumbnail of the image file).
4. Now Drag and Drop any other sort of file (.doc, .xls, *.pdf, etc.) onto the <Dropzone>.
5. Look at the Preview that appears for that file (should be blank w/ a "broken file" image and whatever alt="..." text you have in there to describe the file).

What is the expected behavior?

I would prefer all file types to generate a correct preview.

If this is a feature request, what is motivation or use case for changing the behavior?

I feel all files should generate previews.

Please mention other relevant information such as the browser version, Operating System and react-dropzone version.

Set-up —

• MacBook Pro 13-Inch 2018
• 2.7 GHz Intel Core i7 processor
• 16 GB 2133 MHz LPDDR3 RAM memory
• MacOS version 10.14.4
• React & React-DOM versions 16.5.2
• Node.JS version 10.15.2
• yarn version 1.15.2
• React Dropzone version 10.1.4
• Google Chrome for Mac OS Browser version 74.0.3729.131 (Official Build) (64-bit)
• Upload to an AWS EC2 instance container server.

... So, am I doing something wrong so that previews on other files besides Images aren't working? Is this not a feature for anything but Image files? Please advise.

A couple other questions —

1. If Previews are not able to be generated for files other than Image files with react-dropzone, is there a way to have Image Files generate Previews, but all other files just list the File name being uploaded and such, as in the some of the other examples on your React Dropzone Web Site? If so, how do you switch between the two to have both as you drag & drop files onto the <Dropzone>?
2. In our code, which, again, we copied nearly verbatim from your examples at the React Dropzone Web Site, we have noticed that when you drag and drop on set of files onto the <Dropzone>, and then attempt to drag and drop a second time, that wipes the first set of files from being uploaded and replaces them with the new files just dropped on the <Dropzone>. Is there a way to have the <Dropzone> cumulatively add files on each time they are dropped there, not just wipe out the previous files and replace with the new? If so, what are the steps to do that, please?
3. Is there a way, in the case of having the blank box File Preview for all other files, to get rid of the "Broken File" icon?

I will await your reply, please. Thank you in advance.

[rolandjitsu]

@faddah this is not really an issue and it's out of the scope of this lib. Please refer to SO for such inquiries.

Our previews example is just that, an example. It's up to you to implement the logic to preview other types of files.

[faddah]

@rolandjitsu - ok, i've posted on stack over flow, my question is now here.