Appending a Blob to FormData fails when filename not included in append()
See original GitHub issueTo 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:
- Code creates new
FormData
injsdom
.append()
is called with 2 arguments (name
andvalue
), wherevalue
is a Blob created withnew Blob()
jsdom
callsnew File()
, usingvalue.name
as the filename- The constructor for
File
tries to callString.prototype.replace
onfileName
, which throws becausefileName
(which is optional for a manually constructedBlob
) 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:
- Created 7 years ago
- Reactions:4
- Comments:9 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks! Filed https://github.com/whatwg/xhr/issues/73; when we get some spec clarity here we can fix jsdom.
You beat me to it - thank you!