custom_nodes/ComfyUI-N-Nodes/js/videoLoadAdvanced.js

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;
			}


		};
		
	},
});