FileReader.readAsDataURL() reader result is empty for font files such as .ttf, .woff, and .woff2

Question

I am building a web interface that allows the user to upload a custom font. The problem is that I am unable to convert the font files (specifically, .ttf, .woff, and .woff2

Answer 1

I figured it out :-)

readAsDataURL was working successfully but I was returning reader.result before the read was complete. I changed my code to include

reader.addEventListener('load', () => {
  change(name, reader.result);
}, false);

and now it's working!

Additional info (edit): The reason why it was working for the image files was because in the onUpload function for those input components I was rendering a preview image which depended on the file being done loading... as a side effect of waiting for the file in order to render the preview, I was also ensuring that the file was loaded before I did anything with it afterwards. I was happy to realize this because if one day, for some reason, I removed the image preview piece, my image upload would have also broken!