Implementation:AUTOMATIC1111 Stable diffusion webui Drag Drop Handler
| Knowledge Sources | |
|---|---|
| Domains | UI_Frontend, File_Upload, Drag_and_Drop |
| Last Updated | 2025-05-15 00:00 GMT |
Overview
Handles drag-and-drop file uploads and clipboard paste operations for image elements in the Gradio web UI.
Description
This JavaScript module enables three input methods for images: drag-and-drop onto image elements, drag-and-drop onto prompt textareas, and clipboard paste. The dropReplaceImage function handles replacing an existing image in a Gradio image component by programmatically clicking the clear button, then setting the file input's files and dispatching a change event. For the PNG Info tab, it intercepts the fetch API to wait for the prediction request to complete before triggering the callback. The document-level dragover handler sets the correct drop effect for valid image files. The drop handler distinguishes between prompt targets (where dropped images are sent to a prompt_image component for interrogation) and image targets (where images replace the current input). URL drops are also supported for prompt targets by fetching the remote image and converting it to a File object. The paste handler finds the most appropriate visible image field, preferring empty fields, and inserts the pasted image. Supported formats are PNG, GIF, and JPEG.
Usage
Users can drag image files from their file system onto any image input area in the web UI to upload them. Dragging images onto prompt text areas sends them to the prompt image interrogation system. Pasting images from the clipboard automatically places them in the most appropriate visible image field. All behaviors are automatic and require no configuration.
Code Reference
Source Location
- Repository: AUTOMATIC1111_Stable_diffusion_webui
- File: javascript/dragdrop.js
- Lines: 1-156
Signature
function isValidImageList(files)
function dropReplaceImage(imgWrap, files)
function eventHasFiles(e)
function isURL(url)
function dragDropTargetIsPrompt(target)
// Event listeners: document 'dragover', document 'drop', window 'paste'
Import
// Loaded automatically by the web UI as part of the javascript/ directory
// No explicit import required
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| files | FileList | Yes | List of files from drag-and-drop or clipboard (must be exactly 1 image file) |
| imgWrap | HTMLElement | Yes | The Gradio image wrapper element (data-testid="image") to receive the file |
| e | DragEvent or ClipboardEvent | Yes | The browser drag/drop/paste event |
Outputs
| Name | Type | Description |
|---|---|---|
| (side effect) | DOM | Sets file input values and dispatches change events to trigger Gradio upload handling |
Usage Examples
// All functionality is automatic via event listeners.
// Example: drag an image file onto the img2img input area
// -> The image replaces the current input and is uploaded to the server
// Example: drag an image onto the prompt textarea
// -> The image is sent to the prompt_image component for interrogation
// Example: paste an image from clipboard (Ctrl+V)
// -> The image is placed in the first available visible image field
// Programmatic usage (internal):
dropReplaceImage(
document.querySelector('[data-testid="image"]'),
fileList
);