Vscode: Allow to add file reference with drag and drop.

[v-pavanp]

It is very common use case when user wants to add reference of module file (external file) by dragging and dropping it to editor. But right now VScode is not supporting this feature. When user try to drag a file from the explorer window it is opening that file in the editor.

In the below screen shout you can compare Visual studio and VS code action for drag and drop.

[csicky]

Yes, I wanted to do just that! How I miss this feature! It was so natural in Visual Studio.

[amit-srivastava-007]

Is that feature coming in near future. Its really very tough to count nesting levels to create correct import path

[odbc789]

Is this feature ready now ?

[ganeshmuth]

When will this feature be available??

[DanJ210]

I was also hoping to get this feature in a past release as well.

[DanJ210]

Oh wow, this request was over two years ago...

[clsmt]

What's the standard way of inserting images into markdown in VSCode now? Still typing out all the commands?

[fernandogutierrez27]

is there any extension that provides this functionality??

[dskeithbuck]

Also, it would be really great if there were options for this functionality in terms of how the paths showed up.

• Explicit / Full Path
• Relative Path
• Markdown Link (uses the selected text on the line for Link Name.
  [LinkName](//path/to/file.res
• Markdown Image (uses the selected text on the line for Link Name and optionally copies to a default directory.
  [ImageName](./images/image.png)

[techsin]

+1

[csicky]

Would be a dream to have this. Maybe next year or the year after that.

Seriously, when I type the imports the stupid autocomplete tries to be smart and messes up completely, so I have to always search for a file where I used this import before, so I can copy paste it.

[lgrkvst]

+1

[maurodelazeri]

+1

[JamoCA]

Homesite (from 2003) was capable of adding IMG/CSS/JS tags to HTML by simply dragging & dropping the resource file into the editor. (I've recently stopped using it because it hadn't been updated in some time, but I really miss this feature.)

Apparently Atom has this feature in a plugin:
https://atom.io/packages/drag-relative-path

FYI: This feature has been previously requested and both threads that I've found have been locked by collaborators.
https://github.com/Microsoft/vscode/issues/5772

[csicky]

@JamoCA Your comment inspired me to write the following issue:
https://github.com/Microsoft/vscode/issues/69282

[ericcirone]

Would love to have this.

[rkazakov]

+1

[cchutis]

Still not implemented yet? This something i find myself wishing I can do very often.

[Daemach]

We need this feature!

[vanasis]

+1

[techsin]

2019 is ending without being able to drag a file into ide and have it import it

[holt-mansfield-finaeo]

+1

[MustansarBaig]

+1

[TheJeremicz]

Welcome to 2020!

Still nothing...

+1

[mjnicolls]

I wish for this feature multiple times a day

[techsin]

4 YEARS!!

[techsin]

@alexdima @dbaeumer

[ro1414]

+4 years...+1

[erdinckara]

It is ridiculous :)

[JamoCA]

There should probably be 2 behaviors... 1) add the filepath to the resource file(s) with the include type necessary based on file extension in the editor and 2) open the dropped file(s). If both functions are to coexist, it may require adding a dropzone for opening multiple files since dropping them on any currently file in the editor would only add code necessary to include the file.

As much as I'd like #1 to be available, I often search for files that require a quick edit and then drag-and-drop them all into VSCode to open/edit/save.

[csicky]

I don't think the two operations would conflict. No special drop zone needed. If you drag a file onto VS Code from Windows Explorer or any file manager from outside, it means you want to open that file to view / edit.
If you drag a file from the VS Code tree view explorer, onto an already open file, in that case it should add a file reference. Until here is all clear.

Now the problem comes, what type of file and what type of file reference? There would have to be a mapping somewhere for example if I drag a .cs file onto a .cs file I add a using reference. If the file types I work with are .js it means I add an import or maybe a require? What if I drag something which has no export or has named exports? The complexity increases very quickly and I understand why the team VS Code avoids this feature request.
VS Code can handle so many file types and so many languages, how to decide what reference to create?
If this gets implemented in a way, ten new issues appear to modify it in that many ways, one conflicting with another.

I miss this feature too from when I was working in VS in C#, but I realize this might never be implemented. Maybe in some extensions specific for each language.

[JamoCA]

Yeah.... there's the rub. I don't use the built-in VS Code tree view explorer. (I use Total Commander w/various other IDEs & applications.) I used 1997's Homesite & ColdFusion Studio for many years and was able to open files as well as add file references without using the built-in file explorer. (I believe drag-n-drop always resulted in adding a file reference.)

As a ColdFusion developer, sometimes a CFC/CFM script that I'm editing generates CSS, JS or HTML content. I guess in cases like this, it'd either need to make a best guess or display each resource w/default and prompt prior to generating the code.

[karlhorky]

I guess this new mode could be implemented with a "modifier" key: hold down alt or option to create an import instead of a opening the file.

[JacksonKearl]

Does it need to be drag and drop? On MacOS, Cmd+Opt+C copies a file path, and an extension could register a command to read that path from clipboard and insert into the document in whatever format is appropriate. This solves the problem of not knowing in which format to insert the reference (the extension could contribute multiple commands, or show a quick pick, etc.)

[karlhorky]

For me at least, drag and drop is a much higher-fidelity interaction that allows for a high degree of control with a relatively low-cognition, quick action. I would prefer a drag and drop motion for importing resources.

[ElecTreeFrying]

temporary extension while waiting for drag and drop import. 😊

https://marketplace.visualstudio.com/items?itemName=ElecTreeFrying.auto-import

[jacobisaliveandwell]

The current behavior of opening a file is exactly what should be happening.

_IMHO, y'all should open issues with the language plugins that you want to support this. The notion that vscode should solve import path resolution for every language seems really silly._

My $0.02, similar to what @karlhorky said, add modifiers to alter the drag-drop behavior to write absolute and relative paths to the place the node is dropped. This seems like a healthy compromise without having to dive into language specifics.

[ivostoykov]

+5

[techsin]

I think this issue goes along with an ability to import not just a file but also a function...

Importing a file by dragging it

1. Drag a file from left side into the currently open file.
2. vscode automatically imports the file relative the file path.
3. If file has default export only that is imported, if it has many imports then let user define what needs to be imported. By putting cursor in between curly brackets, like so import { | } from "./../../file";

Importing a function and file by dragging it
Say you found a function you want to import. What if you could do it in two steps.

1. Go to the function that is being exported and click on it. Press cmd/ctrl + C.
2. Go to place and file you want to use / import. Press cmd/ctrl + shit + space.
3. vscode automatically imports the function, add it to the top and calls the function where you had the cursor.

EDIT: it just occurred to me that we do have: https://code.visualstudio.com/docs/languages/javascript#_auto-imports
But being able to copy a certain function without ambiguity is still useful feature to have. Auto import does suggest importable functions but it becomes unclear if there are duplicates. Also visual flow can be faster in some cases. you don't have to memorize the exact spelling.

[holt-mansfield-finaeo]

When I drag a file from the tree into the editor VSC just opens the file I dragged. I don't get an import statement added.

[csicky]

@ people waiting for this. The old issues are not being watched. If somebody who wants this very very much creates a new issue, mark it as feature request and that issue receives 20 thumbs up, it will have a chance to be considered. I could do it myself but I learn to live with the limitations of VS Code.

@jacobisaliveandwell VS Code itself is opinionated by having decided to open the file you just dropped. VS (the old one without code in its name) has decided to do the import for the file dropped and was so good. Opinionated is not a bad thing, without it, there would be no VS Code in the first place.

[Tyriar]

Clearly there is interest in this, I'm not too familiar with the area but I don't see why we couldn't open on mouseup instead of down to allow this. The more votes something gets the more chance it has to get attention.

[holt-mansfield-finaeo]

There once was a plugin that had this functionality and I used it all the time.

[jacobisaliveandwell]

@csicky Maybe I was too short. Sorry, let me try to be more clear.

Obviously vscode has opinions, but opening the dropped item is standard across most applications, as are context specific overrides of this behavior. For example, if you drop a file in Chrome it will open a new tab and attempt to display/open the file, or optionally a site may implement drag-and-drop support.

Similarly, vscode does not ship language specific IDEs like JetBrains, and it's not shipping with complex language support either. I don't see how one can implement this without diving into a lot of language specific questions (what languages support imports? how will they be formatted? do you import on the line dropped or at the top? should auto-formatters be triggered and if so, how? etc etc).

Instead it'd be better to support whatever functionality is needed for individual language plugins to implement this feature. If this issue turns into that, then I apologize for getting in the way and can be ignored.

[techsin]

Uh if it worked for javascript and typescript it'd cover 80% userbase.

[karlhorky]

if it worked for javascript and typescript it'd cover 80% userbase

Yep, this sounds like a reasonable start.

---

@jacobisaliveandwell some suggestions:

how will they be formatted?
should auto-formatters be triggered and if so, how?

This behavior could probably be the same as IntelliSense auto imports.

do you import on the line dropped or at the top?

I would say it could be where the mouse is, although I can see arguments for doing it at the bottom of the import block (so you can quickly import a file regardless of where you are scrolled to in a file).

---

@Tyriar a couple of questions:

What did you mean by this? How would this allow for imports on drag?

I don't see why we couldn't open on mouseup instead of down to allow this

Maybe one alternative that would allow the current behavior of VS Code to stay unchanged but to still enable development of this option would be my comment above (https://github.com/microsoft/vscode/issues/5240#issuecomment-583859339), what are your thoughts here?

I guess this new mode could be implemented with a "modifier" key: hold down alt or option to create an import instead of a opening the file.

[Tyriar]

What did you mean by this? How would this allow for imports on drag?

@karlhorky I was just looking at the original post's gif where it was opening the file on mousedown, but it's out of date apparently. It happens on mouseup on my client.

I guess this new mode could be implemented with a "modifier" key: hold down alt or option to create an import instead of a opening the file.

Something would need to happen like this or a setting since dragging now opens the file in the current/different editor group. A problem I see with a modifier though is that it's not very discoverable.

Note this isn't really my area, my comment was mainly just responding to how to vote as that feeds into prioritization.

[phgmacedo]

It would also be interesting to be able to insert file references from clipboard like in the issue 106955