question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to get filename or file body for vCard files with react-dropzone

See original GitHub issue

Trying 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:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:5

github_iconTop GitHub Comments

1reaction
ewittlecommented, Jan 30, 2017

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.

1reaction
ewittlecommented, Dec 29, 2016

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Display file name using react dropzone - Stack Overflow
You can do it like this: const onDrop = acceptedFiles => { setFiles(files => files. concat(... acceptedFiles)); };
Read more >
Accepting specific file types - react-dropzone
By providing accept prop you can make the dropzone accept specific file types and reject the others. The value must be an object...
Read more >
how to write file node Code Example - Code Grepper
function convertToJSON() { var firstname = document.getElementById('firstname').value; var lastname = document.getElementById('lastname').value; var email ...
Read more >
mn 0 01 05_1 1 10 100 10th 11 11_d0003 12 13 14 141a
... bodice bodied bodies bodiless bodily boding bodkin bodleian body bodyblow ... file filed filefish filename filenames filenfike filer filerman files ...
Read more >
https://huggingface.co/dbernsohn/roberta-php/commi...
diff --git a/vocab.json b/vocab.json new file mode 100644--- /dev/null +++ b/vocab.json @@ -0,0 +1 @@ +{"<s>":0,"<pad>":1,"</s>":2,"<unk>":3,"<mask>":4,"!
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found