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.

Appending a Blob to FormData fails when filename not included in append()

See original GitHub issue

To start with, thanks to all the maintainers for the amazing job on this lib!

Cannot read property 'replace' of undefined
TypeError: Cannot read property 'replace' of undefined
    at new File (/Users/alevine/planner-ui/node_modules/jsdom/lib/jsdom/living/file.js:14:40)
    at FormData.append (/Users/alevine/planner-ui/node_modules/jsdom/lib/jsdom/living/form-data.js:30:17)

Quick summary of what is happening:

  1. Code creates new FormData in jsdom
  2. .append() is called with 2 arguments (name and value), where value is a Blob created with new Blob()
  3. jsdom calls new File(), using value.name as the filename
  4. The constructor for File tries to call String.prototype.replace on fileName, which throws because fileName (which is optional for a manually constructed Blob) is undefined

I was able to address this in my own code for the time being by supplying the 3rd argument (filename) to append().

Here is some quick sample code that can be used to replicate:

var formData = new FormData();
var file = new Blob([
   JSON.stringify({})
], { type: 'application/json' });
formData.append('somename', file);

I’d be willing to contribute a fix, but I’m not 100% on what the correct fix is. I can try and dig into the spec once I’m outside of work hours, but any hints to send me in the right direction would be appreciated 😃

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:4
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
domeniccommented, Jun 26, 2016

Thanks! Filed https://github.com/whatwg/xhr/issues/73; when we get some spec clarity here we can fix jsdom.

0reactions
DrewMLcommented, Jul 2, 2016

You beat me to it - thank you!

Read more comments on GitHub >

github_iconTop Results From Across the Web

FormData.append() - Web APIs | MDN
The append() method of the FormData interface appends a new value onto an existing key inside a FormData object, or adds the key...
Read more >
ERROR TypeError: Failed to execute 'append' on 'FormData ...
The issue appears to be that the uploaded file was not converted to a Blob. onImagePicked(event: Event) { const file = (event.target as ......
Read more >
fd.append(fileName, blobFile); --> Why doesn't this need a $ in ...
Why doesn't it require this syntax? –> $(fd). append(fileName, blobFile); Or is the case of sending the FormData object an exception?
Read more >
Upload files in ASP.NET Core - Microsoft Learn
Use a safe file name determined by the app. Don't use a file name provided by the user or the untrusted file name...
Read more >
FormData - The Modern JavaScript Tutorial
formData.append(name, blob, fileName) – add a field as if it were <input type="file"> , the third ...
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