I finally fixed the annoyance where dragging a file from VSCode to the browser just pastes the file path string.

Streamlining File Uploads from VSCode to Browsers: A Custom Solution for Seamless Workflow

In modern development workflows, efficiency and convenience are paramount. As a developer who frequently relies on AI tools like ChatGPT and Claude to assist in coding, I encountered a persistent annoyance: when dragging a file from Visual Studio Code (VSCode) into a browser, instead of uploading the file, the browser simply pastes the local file path as text. This behavior interrupts my workflow, forcing me to open File Explorer each time to manually select files, which becomes tedious over time.

The Challenge

The core issue lies in how browsers handle drag-and-drop actions. When dragging a file from VSCode’s sidebar into a web page, the browser interprets this as a text drag—pasting the file path—rather than an actual file upload. While this is expected due to security restrictions and default behavior, it complicates development workflows that require rapid testing or file transfers without switching applications.

Developing a Practical Solution

Motivated to overcome this limitation, I set out to create a bridge that allows direct dragging of files from VSCode into the browser for uploading, eliminating unnecessary steps.

How It Works

My solution utilizes a hybrid approach:

• VSCode Extension: Monitors drag events within VSCode and facilitates conversion of file paths into data that can be recognized as file objects.

• Chrome Extension: Intercepts the drag event in the browser and transforms the file path string into a native File object that the browser can process as an uploaded file.

The combined mechanism effectively “translates” the drag action, enabling users to effortlessly upload files from their code editor to web pages without intermediate steps.

Getting Started

This project is entirely free and open source, designed to integrate seamlessly into your development setup:

• Repository and Documentation: GitHub Link

• Chrome Extension: Available on the Chrome Web Store here

• VSCode Extension: Download from the Visual Studio Code Marketplace here

Conclusion

This customized bridging tool aims to save developers time and clicks, streamlining the process of testing and uploading files during development. I hope this solution enhances your workflow as much as it has improved mine. Feel free to explore the repositories and extend functionality as needed. Happy coding!