Unable to get filename or file body for vCard files with react-dropzone
See original GitHub issueTrying to set up a react-dropzone component to accept vCard files. Here’s the component declaration with JSX:
<Dropzone onDrop={this.onContactDrop} onDropAccepted={this.onDropAccepted} onDropRejected={this.onDropRejected} accept="text/vcard">
<p>Drop a contact</p>
</Dropzone>
When I run this, and drag a vCard file into the drop zone, I see onDrop being called as well as onDropAccepted. However, the accepted files array does not include the path to the file nor the body of the file text. And therefore it seems to be useless. I have a console.log statement showing the first element of the array provided to onDrop:
console.log('onDrop files[0]', files[0])
And what I see in the browser console is:
onDrop files[0] File { preview: "blob:http://eric.ourlifestories.loc…", name: "Test.vcf", lastModified: 1482930969000, lastModifiedDate: Date 2016-12-28T13:16:09.000Z, webkitRelativePath: "", size: 137092, type: "text/vcard" }
Since I get the file name, if webkitRelativePath was useful, I would expect to be able to read the file locally. As it is, I cannot understand how I could read the file. This behavior is on MacOS Sierra using both the current version of Firefox and Safari, so it doesn’t seem to be specific to a single browser. Any help you can provide would be appreciated.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:1
- Comments:5

Top Related StackOverflow Question
You would need to provide more details on what you’re trying to do, what your code looks like, and what issues you’re seeing.
Never mind, I passed the received file object into a reader, and it works. Apparently ignorance on my part on how the HTML drag and drop interface functions. I got thrown off that there is nothing in the console.log output that appears to provide a way to read the file.