How to mock File in javascript?
Solution 1
Chrome will let you create a new file:
var f = new File([""], "filename", { type: 'text/html' });
However IE11 (and other browsers?) will not.
Here's is my (poor?) fake File:
var blob = new Blob([""], { type: 'text/html' });
blob["lastModifiedDate"] = "";
blob["name"] = "filename";
var fakeF = blob;
You can fill in the values as you see fit. You can fill the blob with whatever you need. (See the other answer for how to use an image).
I've tested this in IE11, Chrome and Firefox. So far I seems to work, at least for my unit testing purposes.
Bonus: Here it is in typescript:
let blob = new Blob([""], { type: 'text/html' });
blob["lastModifiedDate"] = "";
blob["name"] = "filename";
let fakeF = <File>blob;
Solution 2
Here's how I create a dummy pdf file to use with pdf.js
-
Create a base64 string of your file. I use
base64
command in my shell.base64 < src/mockData/dummy.pdf #outputs something like: VEhJUyBJUyBUSEUgQU5TV0VSCg==
-
Copy this string into your source code.
const dataBase64 = "VEhJUyBJUyBUSEUgQU5TV0VSCg=="; //note this not a pdf, but for demo purposes because a pdf file is too big
-
Decode the base64 and create a file
const arrayBuffer = Uint8Array.from(window.atob(dataBase64), c => c.charCodeAt(0)); const file = new File([arrayBuffer], "dummy.pdf", {type: 'application/pdf'});
Solution 3
You don't need to create a blob, you can do this which applies the genuine image string directly (I used this converter), or you can do follow the example below (if you don't actually care about having a valid image]):
html
<img id="test" />
var img = window.btoa('I don't care about a broken image');
document.getElementById('test').src='data:image/png;base64,'+img;
The btoa function is just to create base64 from a string.
Related videos on Youtube
Comments
-
Eriendel about 2 years
I'm developing some small project to exercise my TDD skills. The project consists of an audio player which has the ability to drag'n'drop files in a playlist. I'm using Jasmine as a testing framework. The problem I faced is that I can't mock javascript files to test my file upload functionality. I tried to create a File like this:
new File(new Blob(), "name");
but Chrome does not allow creating files manually. File's constructor is illegal to use. I found a solution with grunt.js which consists of returning some files from grunt, but I don't really wanna use server-side for such a small test project. Is there any workaround for this problem?
-
SamMorrowDrums over 9 yearsWhen I say you don't need to create a blob, you are effectively creating a blob URL. All a blob URL really is, is a base64 copy of the binary image data, with some meta information at the start to describe it's contents.
-
Rom almost 7 yearsThx. Note that casting a Blob to file is also very useful when unit testing with PhantomJS, which does not allow File instantiation either!
-
Sydney Loteria over 6 yearsMy code is checking if the value is instanceof File, I tried to replace the new Blob with new File, but it gives an empty file object.
-
Filipe Madureira over 4 yearsCan't set size and such, tho.
-
Bill over 3 yearsFinally! A solution that worked. Thanks so much!
-
Martin Dallinger about 3 yearsYou just saved my life
-
Jacob over 2 yearsNote: IE11 doesn't allow passing
undefined
as second argument toBlob
constructor. Either pass an object or don't specify the argument.