FileEntry not well used?

Request Feedback
1

Hey, I’m using the last version (0.19.1) of Elm and I’ve got an issue with how file upload is coded.
I’m using the elm function File.toUrl but this got me a console error (reader.addEventListener is not a function).
So I checked my js compiled file to see where is this from, and this is the js function :

function _File_toUrl(blob) {
	return _Scheduler_binding(function (callback) {
		var reader = new FileReader();
		reader.addEventListener('loadend', function () {
		 	callback(_Scheduler_succeed(reader.result));
		});
		reader.readAsDataURL(blob);
		return function () { reader.abort(); };
	});
}

So this piece of code if producing the error.
If I change it to :

function _File_toUrl(blob) {
	return _Scheduler_binding(function (callback) {
		var reader = new FileReader();
		reader.onloadend = function () {
			callback(_Scheduler_succeed(reader.result));
		};
		reader.readAsDataURL(blob);
		return function () { reader.abort(); };
	});
}

Then it works as expected.
From what I understant, FileReader is not an element so we cannot attach an event listener to it.

Am I the only one having this issue ?

2

Hi Jules!

I have just tried using File.toUrl in my app and it worked just fine. I’m using Firefox on Ubuntu 22.04. I have successfully used addEventListener on a new FileReader() and this page from MDN seems to indicate this is normal: FileReader: load event - Web APIs | MDN

Could you maybe give more details about your compilation/build process? I know (because I experienced it myself) that sometimes elm-optimize-level-2 can break stuff. Or maybe you have some third-party code messing with it (browser extension or other JS that may mess with the FileReader prototype)?

Good luck!

PS: did you work with Spottt 10 years ago or was it another software developer with the same name?

3

Hi Augustin,
Thanks for your reply.

Yeah it seems to work fine on Firefox but not on Chrome. If you copy/paste this piece of code on the javascript console of Chrome you get the error :

var reader = new FileReader(); FileReader.addEventListener('load', function(){});

But if you enter this one it is working fine :

var reader = new FileReader(); FileReader.onload = function(){};

I don’t think I’ve had this error before. It might be a new Chrome implementation of FileReader ?
Chrome version : 127.0.6533.100 running on macOS

PS: It is me! The same Jules that was doing an internship at Spottt a while ago :wink:

4

Fancy that =)

I think your lines are incorrect, in that it’s not on the class you should be calling the functions (which the code doesn’t do originally).

So you need to try:
var reader = new FileReader(); reader.addEventListener('load', function(){});
and
var reader = new FileReader(); reader.onload = function(){};

I have tried in both Brave and Chrome (Version 127.0.6533.119 (Official Build) (64-bit)) on Ubuntu 22.04 and they seem to work alright. I don’t have a Mac to test them on.

Interestingly, when using some optimization/uglyfying script, new FileReader() gets rewritten to new FileReader. I don’t know how significant it is.

5

Yes you’re right! I’ve mistyped the code, and they are both working fine:

var reader = new FileReader(); reader.addEventListener('load', function(){});
var reader = new FileReader(); reader.onload = function(){};

I think I got this error because I’m using a plugin (cordova-plugin-file) that redefines the class FileReader :

Without the plugin activated I don’t get the error.

Thanks for your help !

6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.