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.
#5772

[csicky]

@JamoCA Your comment inspired me to write the following issue:
#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

[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.

[jacobeatsspam]

@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 propose a mix of the two:

• if you drop anywhere in the imports lines at the top of the file, it is added there (with the feature having a default-false option to also automatically sort the new line with the Organize Imports algorithm)
• if you drop lower in the file, it is imported with a dynamic import

---

@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 (#5240 (comment)), 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.

[ghost]

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

[Etheryte]

I think very good middle ground could be found here by making the drop event available to extensions while keeping the default behavior as-is. The drop handler in dnd.ts already has a special check for workspaces, adding a hook for extensions in a similar manner would address both use cases.

const isWorkspaceOpening = await this.doHandleDrop(untitledOrFileResources);
if (isWorkspaceOpening) {
  return;
}

const isExtensionHandled = await this.extensionService.activateByEvent('onDrop', untitledOrFileResources);
if (isExtensionHandled) {
  return;
}

Architecturally, it would make sense to have the interface exposed to extensions be very minimal, accepting a list of resources and returning a boolean value indicating whether the extension wants to interrupt the default file opening behavior.

onDrop(untitledOrFileResources: Array<IDraggedResource | IDraggedEditor>): boolean;

This would allow both pass-through and overriding behaviors for extensions while limiting the API surface that VSCode exposes.

[ericchase]

So uh... been like 5 years now. Are we still waiting for this?

[csicky]

@ericchase
This issue will never receive attention anymore. The only chance is to make a new issue, link this to that one and hope for 20 votes.

[gajrajantino]

Updates?

[ericchase]

Well, it's in the iteration plan for this month, at least.

[mjbvz]

#142990 introduces api for VS Code 1.70 that lets extensions handle dropped files (either from the VS Code explorer, editor tabs, the OS, or other applications). This extension sample shows how to use this API

This now needs to be implemented per-language by extensions. If you want to see this implemented in a given language, please file a feature request against the extension that provides support for that language

[ElecTreeFrying]

https://marketplace.visualstudio.com/items?itemName=ElecTreeFrying.drag-import-relative-path

[karlhorky]

@ElecTreeFrying amazing!! Thanks for creating this! 👏