Drag & Drop from local file onto UXP is supported?

UXP Developer Tool
1

I thought drag and drop files from local directory onto a UXP panel hasn’t been supported, but I noticed that UXP panel received local files as nativePath by dropping them.

I tested the code below in Photoshop 2026.

"manifestVersion": 5,
  "requiredPermissions": {
    "localFileSystem": "fullAccess",// I don't know it's mandatory or not, but I set it as "fullaccess"
    "clipboard": "readAndWrite",
    "webview": {
      "allow": "yes",
      "domains": "all",
      "enableMessageBridge": "localAndRemote",
      "allowLocalRendering": "yes"
    }
  },

<div class="box_container">
      <div class="box">drop here</div>
      <ul class="filelist" id="draglist">
      /* listing system paths*/
      </ul>
    </div>

const registerDragEvent = () => {
  const boxes = Array.from(document.getElementsByClassName("box"));
  console.log(boxes);
  boxes.forEach(box => {
    box.addEventListener("dragover", (e) => {
      e.preventDefault();
      console.log(e);
      e.dataTransfer.dropEffect = "copy";
    });
    box.addEventListener("drop", (e) => {
      e.preventDefault();
      console.log(e);
      const files = Array.from(e.dataTransfer.uxpEntries);
      console.log(files);
      const draglist = document.getElementById("draglist");
      while (draglist.firstChild) {
        draglist.firstChild.remove();
      }
      files.forEach(f => {
        const naitivePath = f.nativePath;
        const li = document.createElement("li");
        li.textContent = naitivePath;
        draglist.appendChild(li);
      })
    })
  });
}

Possibly some may have discovered the function, but I couldn’t find anyone who had, so
I share it for now.

DragAndDrop

4 Likes
You should be able to drag-drop files onto a UXP view