Source nodes let you bring your own files into a flow: drop a file into the dashed area and it uploads to storage, then exposes a typed output handle to wire into editors and generators.
Where: canvas → left rail → Add → Bring in (3D Model Upload sits under 3D) — Add a source/upload node
Key ideas
- One node per media type: Each input node accepts its own file kind: Image Upload (image/* and .svg), Video Upload (video/*), Audio Upload (audio/*), PDF Document (.pdf), HTML Source (.html/.htm or pasted markup), and 3D Model Upload (.glb/.gltf).
- Upload-to-storage on drop: When you pick a file it is read locally then handed to handleFileUpload / handleVideoUpload / handleAudioUpload, which push it to Firebase Storage and swap the node to the returned URL — so the data isn't trapped as a giant base64 blob.
- Typed output handle: Each node emits one matching source handle — image, video, audio, pdf, html, or 3d_model — and incompatible target handles dim while you drag a connection.
Steps
- Add the input node that matches your file (Add → Bring in → Image Upload).
- Click the dashed drop zone (expand the node first if it shows 'Expand to upload') and choose a file.
- Wait for the preview to appear — images/SVG/video get a thumbnail with hover actions; PDF shows a file chip; HTML renders a sandboxed live preview; 3D shows an auto-rotating model.
- Drag the node's right-side output handle into a generator or editor input of the same type.
- Use the X on the preview to clear and re-upload a different file.
FAQ
Can I just drag a file straight onto the canvas?
Yes — dropping an image or video file on the canvas (or pasting one) auto-creates the matching Image or Video input node at the cursor and uploads it.
What does the HTML Source 'Paste HTML' tab do?
Instead of uploading a file you can paste raw markup; clicking Use HTML stores it as the node's content and renders the same sandboxed preview.
Does SVG upload differ from a normal image?
Yes — an SVG is read as text and stored as a base64 data URL, and the image preview gains an extra 'SVG' button to drop it onto the page as a real SVG element.