cordova-plugin-file overwrites the global File variable

[JoCa96]

Bug Report

Hi, we had this plugin in our Capacitor project as a dependency of cordova-plugin-advanced-http.

It is not possible to use the Browsers File API with this plugin in Capacitor on iOS.

The following snippet will not work correctly:

var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});

Problem

The cordova-plugin-file is overwriting the global/globalThis/window File variable.

I never actively used this Plugin, but skimmed through the docs and it doesn't seem like this behaviour is intended.

What is expected to happen?

I expect to be able to use the Browsers File API as described by MDN to create a File instance.

What does actually happen?

An incorrect File instance is created, which can not be used as describe by MDN to create a File instance.

Information

We are only building an iOS App, so I can only confirm this bug for iOS.

Command or Code

Create an Capacitor iOS project and install the cordova-plugin-file package.

Build the iOS app and use XCode to build and run the App on an iPhone/iPad connected via USB.
Use Safari DevTools to debug the Capacitor App and run the following snippet.
Inspect the file variable or inspect the File protoype's constructor and you will notice that it is not the Browsers native File API.

var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});

Environment, Platform, Device

• Capacitor 2.4.6
• iOS 14.3
• iPhone 8

Version information

    "@capacitor/cli": "2.4.6",
    "@capacitor/core": "2.4.6",
    "@capacitor/ios": "^2.4.6",
    "ionic": "^5.4.14",
    "@ionic/angular": "^5.4.1",
    "@ionic/angular-toolkit": "~2.0.0",
    "ionic-native": "^2.9.0",
    "@ionic-native/file-transfer": "^5.29.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-advanced-http": "^2.2.0",

Checklist

• I searched for existing GitHub issues
• I updated all Cordova tooling to most recent version
• I included all the necessary information above

[breautek]

I never actively used this Plugin, but skimmed through the docs and it doesn't seem like this behaviour is intended.

This plugin has its own File class, which is in no way related to the browser's native File class. This is intentional... but it was decision from way back in the day when browsers didn't really had a usable File class (outside of the readonly File instance obtained when using the <input type="file"> field)

Personally, I do agree, the plugin should avoid clobbering features provided by the browser. But changing this would probably require a discussion on the mailing list as this plugin is a dependency of several other plugins. I suppose the simplest change (and simplest migration) would just change the clobber space to cordova.file or something.

[Go4th]

@breautek how do I update the clobber space to using the explicit namespace cordova.file as I'm having this same problem. That, or is it possible to create a File Reference using the cordova plugin that will be able to be Read in my API?

[Go4th]

@JoCa96 where you able to resolve this issue? How?

[breautek]

@breautek how do I update the clobber space to using the explicit namespace cordova.file as I'm having this same problem. That, or is it possible to create a File Reference using the cordova plugin that will be able to be Read in my API?

The only way to do this is to fork the plugin and change the plugin.xml:

cordova-plugin-file/plugin.xml

Lines 48 to 50 in a4a7bfe

	<js-module src="www/File.js" name="File">
	<clobbers target="window.File" />
	</js-module>

Doing so may break things that depend on this plugin however, and may require other changes within the plugin's JS sources itself.

A safer workaround might be to capture a reference to the original File object. Do this before you load the cordova.js file.

[Go4th]

@breautek Thanks man.
Appears that the File Plugin reference is global beyond the component/utility in which it's used due to being imported into the AppModule, but updating the clobber did work. Thanks for the tip. Hopefully cordova will update this namespace collision in a later version as using the browser's File() method is very useful in modern development.

[JoCa96]

@Go4th Sorry, I missed the notification for your comment. We were just able to remove the cordova-plugin-advanced-http plugin, because we didn't actively use it. Not really a fix, sorry.

[dominic-simplan]

Probably duplicate of #316.

[breautek]

I removed iOS from the title since this isn't actually iOS specific, it's part of the plugin for all platforms.

[breautek]

duplicate #453