Javascript error that happens in Premiere but not in Chrome.

[Object Matrix]

Hi,

I am working on a Premiere Pro panel and I basically want to upload a selected file from the current project to a remote server. Using a html input file tag and select a file works fine to upload a file. 

So my idea was to create a File object which i would then upload.  Something like :

upload() {

    var path = '/Users/me/my_file.mp3';

    // read all bytes from file likely using : window.cep.fs.readFile(path)

    var file = new File ([data], 'my_file.mp3');

     // call POST to start upload. That part is done and work.

}

As I am going step by step, my current code looks like :

upload() {

    var file = new File( ['my random content'] ,'random_name.txt');

     // call POST to start upload. That part is done and work.

}

It works works fine if run it in up to date Chrome (I also tried with an much older version (41.0.2272.89), which works too). Unfortunately, it crashes in Premiere and I have no clue why.

The crash happens on this line :

var file = new File(['my random content'], 'random_name.txt');

(a basic copy/paste in chrome console show that it works on regular chrome, and crash when paste in the remote debug console.)

with this error message :

Uncaught TypeError: File constructor cannot be called in nwdisabled frame.

message: "File constructor cannot be called in nwdisabled frame."

stack: (...)

get stack: function () { [native code] }

set stack: function () { [native code] }

__proto__: Error

VM110:2(anonymous function)

VM77:847InjectedScript._evaluateOn

VM77:780InjectedScript._evaluateAndWrap

VM77:646 InjectedScript.evaluate

Any explanation and suggestion to work around that issue would be greatly appreciated.

[jingtaotan]

Hi Object Matrix,

We recently ran into the same problem trying to call the File constructor.

Where it says "cannot be called from an nwdisabled frame" - this means you need to enable NodeJS in your CEP extension, like this in your manifest.xml

<Extension Id="MyNodeEnabledExtension">
  <DispatchInfo>
    <Resources>
      <MainPath>./index.html</MainPath>
      <CEFCommandLine>
        <Parameter>--enable-nodejs</Parameter>
      </CEFCommandLine>
    </Resources>
    <Lifecycle>...</Lifecycle>
    <UI>...</UI>
  </DispatchInfo>
</Extension>

Though I suspect that creating a File object like this still may not work. In that case, you may want to look into using NodeJS to do the POSTing so that you don't need to use the File object.

[Object Matrix]

Thank you for your answer, but I still fail to see how it can be related to NodeJS. Since the given code run in chrome, I would have guessed a bug or specific config related to the the chromium engine used in Premiere.

Anyway, I already had NodeJS enabled with the following config :

...
<DispatchInfo >
  <Resources>
    <MainPath>./index.html</MainPath>
    <ScriptPath>./jsx/Premiere.jsx</ScriptPath>
    <CEFCommandLine>
      <Parameter>--enable-nodejs</Parameter>
      <Parameter>--mixed-context</Parameter>
    </CEFCommandLine>
  </Resources>
  <Lifecycle>
    <AutoVisible>true</AutoVisible>
  </Lifecycle>
  <CEFCommandLine>
     <Parameter>--allow-file-access</Parameter>
     <Parameter>--allow-file-access-from-files</Parameter>
  </CEFCommandLine>
...

I also tried to disable NodeJS as well as removing the "--allow-file-access" things but the error remain.

[Bruce Bullis]

I think Jing Tao is right. You must also enable node.js in each iframe.

HTML Panel Tips #19: CC2015.1 (CEP6.1) Node.js Fixes | Photoshop, etc.

[Object Matrix]

Thank you Bruce, but I do not have any iframe. Here a very simple panel I made :

manifest.xml

<?xml version="1.0" encoding="UTF-8"?>
<ExtensionManifest Version="6.0" ExtensionBundleId="bundleId" ExtensionBundleVersion="0.1"
ExtensionBundleName="extBundleName"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <ExtensionList>
  <Extension Id="extId" Version="6.1" />
  </ExtensionList>
  <ExecutionEnvironment>
  <HostList>
  <Host Name="PPRO" Version="[9.1,9.9]" />
  </HostList>
  <LocaleList>
  <Locale Code="All" />
  </LocaleList>
  <RequiredRuntimeList>
  <RequiredRuntime Name="CSXS" Version="6.0" />
  </RequiredRuntimeList>
  </ExecutionEnvironment>
  <DispatchInfoList>
  <Extension Id="extId">
  <DispatchInfo >
  <Resources>
  <MainPath>./index.html</MainPath>
  <CEFCommandLine>
  <Parameter>--enable-nodejs</Parameter>
  <Parameter>--mixed-context</Parameter>
  </CEFCommandLine>
  </Resources>
  <Lifecycle>
  <AutoVisible>true</AutoVisible>
  </Lifecycle>
  <CEFCommandLine>
    <Parameter>--allow-file-access</Parameter>
    <Parameter>--allow-file-access-from-files</Parameter>
  </CEFCommandLine>
  <UI>
  <Type>Panel</Type>
  <Menu>My Failed Panel</Menu>
  <Geometry>
  <Size>
  <Height>400</Height>
  <Width>550</Width>
  </Size>
  </Geometry>
  </UI>
  </DispatchInfo>
  </Extension>
  </DispatchInfoList>
</ExtensionManifest>

index.html :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>my failed panel</title>
    <script type="text/javascript">
      function isNodeActive() {
        if (typeof(require) === 'undefined') {
          console.log('node is NOT enabled')
        } 
        else {
          console.log('node IS enabled');
        }
      };
      function myFailedJS() {
        try {
          var file = new File(['content'], 'name.txt');
          console.log('it worked !');
        }
        catch(err) {
          console.log('it failed...');
          console.log(err);
        }
      }
    </script>
  </head>
  <body onload='isNodeActive()'>
      <button type="button" onclick="myFailedJS()"> Click here </button>
  </body>
</html>

opening index.html and then clicking the button into chrome show in the console :

index.html:9 node is NOT enabled

index.html:18 it worked !

But doing the same thing in premiere :

index.html:12 node IS enabled

index.html:21 it failed...

index.html:22 TypeError: File constructor cannot be called in nwdisabled frame. {stack: (...), message: "File constructor cannot be called in nwdisabled frame."}message: "File constructor cannot be called in nwdisabled frame."stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }__proto__: Error

[Bruce Bullis]

The fact that Node.js appears enabled in some contexts but not in others, makes me think it's not successfully enabled.

Node.js DOES work correctly, in this sample:

Samples/CEP_HTML_Test_Extension at master · Adobe-CEP/Samples · GitHub

[Object Matrix · Accepted solution]

According to this, enabling NodeJS is a simple parameter to add, and IF one needs it in an iframe the magic attribute enable-nodejs is required.

After checking and experimenting over and over again with the provided sample, I came to the conclusion that enabling nodeJS in an iframe does some dark magic that is missing from the default extension context (or the other way around).

Indeed 'new File' works fine inside a nodejs enabled iframe, and only there.

A workaround to that issue if anyone ever needs it :

Instead of a simple "new File(['test content'], 'test.txt');" in my code, I had to include an iframe and put the following function inside :

function newFileObject() {
    return new File(['test content'], 'test.txt');
}

I can then call that method from my regular main context with the following :

var myFile = document.getElementById('my-stupid-iframe').contentWindow.newFileObject();