Upload file generated by `encodeSequence` using axios

[stefanzmf]

Hello,

I am struggling with uploading the file generated by `encodeSequence`.

For the axios upload I need a `File` type object like this one and I am not pretty sure I did approach the correct way. 

{
  lastModified: 1602069190411
  lastModifiedDate: Wed Oct 07 2020 14:13:10 GMT+0300 (Eastern European Summer Time) {}
  name: "Screenshot 2020-10-07 at 14.13.05.png"
  preview: "blob:http://localhost:8081/0aa68b53-b9e5-43f4-a51c-816857ad2895"
  size: 40370
  type: "image/png"
  webkitRelativePath: ""
  __proto__: File
}

The encode code is pretty basic, inspired by the GitHub Samples and the callback is nothing special, just an event emitter to be able to listen in in my React app. 

app.encoder.bind('onEncoderJobComplete', onProxyTranscodeJobComplete);

app.encoder.encodeSequence(
   activeSequence, outputFullPath, outputPreset.fsName, app.encoder.ENCODE_IN_TO_OUT, 1
);

function onProxyTranscodeJobComplete(jobID, outputFilePath) {
  const data = new File(outputFilePath);
  const externalObjectName = "PlugPlugExternalObject";
  const mylib = new ExternalObject("lib:" + externalObjectName);
  const evt = new CSXSEvent();

  evt.type = 'foo.baz.bar';
  evt.data = data;
  evt.dispatch();
}

My problem is I have no idea how I could generate a `Blob` or a `File` from the uploaded file. Trying to access the File form the custom `foo.baz.bar` event does not provide me access to its properties (absoluteURI, created, displayName etc).

I have tried to `readFile` from the event listener as it follows

csinterface.addEventListener('foo.baz.bar', (ev) => {
  const file = window.cep.fs.readFile(ev.data, window.cep.encoding.Base64);
});

but I got stuck and I am not pretty sure I do follow the `adobe` way. 

What would be the best approach to get a File/Blob object from that path? How could I `pass` the entire File object from JSX to JS? 

Thank you 

[stefanzmf]

Also, I was not able to receive its `type`. Is there something I miss or I need to map extension to its hardcoded type?

[Bruce Bullis]

> How could I `pass` the entire File object from JSX to JS? 

You can't; an ExtendScript File object makes no sense, to JavaScript. 🙂

Since you have the full output path of the rendered file, why not pass _that_ back to JavaScript, then do whatever you like with it? 

[stefanzmf]

Yep, sounds the right thing to do, but I am not pretty sure how to handle this, since JS does not really work well with local hard drive files. Do you have any idea how I can generate that File object from a path string? Thank you for your reply

[Bruce Bullis · Accepted solution]

>...JS does not really work well with local hard drive files.

But cep.fs does! You'll need to set these, in your extension's manifest: 

<CEFCommandLine>
    <Parameter>--allow-file-access</Parameter>
    <Parameter>--allow-file-access-from-files</Parameter>
</CEFCommandLine>

You ask about creating a File object; I only know how to do that in ExtendScript, not JavaScript. 

var someProjectPath = new File(app.project.path);

[stefanzmf · Accepted solution]

As an update, I have managed to create a JS File Object form the path received:

cep.csinterface.addEventListener('foo.baz.bar', (ev) => {
  // ev.data === file path received from onEncoderJobComplete
  const f = window.cep.fs.readFile(ev.data, window.cep.encoding.Base64);
  const blob = b64toBlob(f.data);
  const filename = getFilenameFromPath(ev.data);
  const file = new File([blob], filename, {
    type: 'video/quicktime'
  });

  const instance = axios.create();
  instance.put(UPLOAD_URL, file, CONFIG);
});

const b64toBlob = (b64Data, contentType= '', sliceSize = 512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: contentType });
};

const getFilenameFromPath = (str) => {
  return str.split('\\').pop().split('/').pop();
};

getFilenameFromPath source. Works only for OSX paths, but could be improved to work on Windows as well.

b64toBlob source