Highlighted

Upload file generated by `encodeSequence` using axios

Community Beginner ,
Oct 08, 2020

Copy link to clipboard

Copied

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 

Correct answer by stefanzmf | Community Beginner

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

TOPICS
How to, SDK

Views

56

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Upload file generated by `encodeSequence` using axios

Community Beginner ,
Oct 08, 2020

Copy link to clipboard

Copied

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 

Correct answer by stefanzmf | Community Beginner

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

TOPICS
How to, SDK

Views

57

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 08, 2020 0
Community Beginner ,
Oct 08, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Adobe Employee ,
Oct 08, 2020

Copy link to clipboard

Copied

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? 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Community Beginner ,
Oct 08, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Adobe Employee ,
Oct 08, 2020

Copy link to clipboard

Copied

>...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);

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Community Beginner ,
Oct 13, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2020 0