Sam Khoze
143 lines
3.3 KiB
JavaScript
143 lines
3.3 KiB
JavaScript
import { app } from "/scripts/app.js";
|
|
import { api } from "/scripts/api.js"
|
|
import { ExtendedComfyWidgets,showVideoInput } from "./extended_widgets.js";
|
|
const MultilineSymbol = Symbol();
|
|
const MultilineResizeSymbol = Symbol();
|
|
|
|
|
|
async function uploadFile(file, updateNode, node, pasted = false) {
|
|
const videoWidget = node.widgets.find((w) => w.name === "video");
|
|
|
|
|
|
try {
|
|
// Wrap file in formdata so it includes filename
|
|
const body = new FormData();
|
|
body.append("image", file);
|
|
if (pasted) {
|
|
body.append("subfolder", "pasted");
|
|
}
|
|
else {
|
|
body.append("subfolder", "n-suite");
|
|
}
|
|
|
|
const resp = await api.fetchApi("/upload/image", {
|
|
method: "POST",
|
|
body,
|
|
});
|
|
|
|
if (resp.status === 200) {
|
|
const data = await resp.json();
|
|
// Add the file to the dropdown list and update the widget value
|
|
let path = data.name;
|
|
|
|
|
|
if (!videoWidget.options.values.includes(path)) {
|
|
videoWidget.options.values.push(path);
|
|
}
|
|
|
|
if (updateNode) {
|
|
|
|
videoWidget.value = path;
|
|
if (data.subfolder) path = data.subfolder + "/" + path;
|
|
showVideoInput(path,node);
|
|
|
|
}
|
|
} else {
|
|
alert(resp.status + " - " + resp.statusText);
|
|
}
|
|
} catch (error) {
|
|
alert(error);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
let uploadWidget = "";
|
|
app.registerExtension({
|
|
name: "Comfy.VideoLoadAdvanced",
|
|
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
|
|
|
const onAdded = nodeType.prototype.onAdded;
|
|
if (nodeData.name === "LoadVideo [n-suite]") {
|
|
nodeType.prototype.onAdded = function () {
|
|
onAdded?.apply(this, arguments);
|
|
const temp_web_url = this.widgets.find((w) => w.name === "local_url");
|
|
const autoplay_value = this.widgets.find((w) => w.name === "autoplay");
|
|
|
|
|
|
let uploadWidget;
|
|
const fileInput = document.createElement("input");
|
|
Object.assign(fileInput, {
|
|
type: "file",
|
|
accept: "video/mp4,image/gif,video/webm",
|
|
style: "display: none",
|
|
onchange: async () => {
|
|
if (fileInput.files.length) {
|
|
await uploadFile(fileInput.files[0], true,this);
|
|
}
|
|
},
|
|
});
|
|
document.body.append(fileInput);
|
|
// Create the button widget for selecting the files
|
|
uploadWidget = this.addWidget("button", "choose file to upload", "image", () => {
|
|
fileInput.click();
|
|
},{
|
|
cursor: "grab",
|
|
},);
|
|
uploadWidget.serialize = false;
|
|
|
|
|
|
setTimeout(() => {
|
|
ExtendedComfyWidgets["VIDEO"](this, "videoWidget", ["STRING"], temp_web_url.value, app,"input", autoplay_value.value);
|
|
|
|
}, 100);
|
|
|
|
|
|
}
|
|
|
|
|
|
nodeType.prototype.onDragOver = function (e) {
|
|
if (e.dataTransfer && e.dataTransfer.items) {
|
|
const image = [...e.dataTransfer.items].find((f) => f.kind === "file");
|
|
return !!image;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
// On drop upload files
|
|
nodeType.prototype.onDragDrop = function (e) {
|
|
console.log("onDragDrop called");
|
|
let handled = false;
|
|
for (const file of e.dataTransfer.files) {
|
|
if (file.type.startsWith("video/mp4")) {
|
|
|
|
const filePath = file.path || (file.webkitRelativePath || '').split('/').slice(1).join('/');
|
|
|
|
|
|
uploadFile(file, !handled,this ); // Dont await these, any order is fine, only update on first one
|
|
|
|
handled = true;
|
|
}
|
|
}
|
|
|
|
return handled;
|
|
};
|
|
|
|
nodeType.prototype.pasteFile = function(file) {
|
|
if (file.type.startsWith("video/mp4")) {
|
|
|
|
//uploadFile(file, true, is_pasted);
|
|
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
|
|
};
|
|
|
|
},
|
|
});
|