Add files via upload

js/videoLoadAdvanced.js

@@ -0,0 +1,142 @@
+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;
+			}
+
+
+		};
+		
+	},
+});