Copy and paste file system objects in and out of Electron apps

[s-a]

Copy and paste filesystemitems from electron GUI to operating system' s desktop or filenamager application and vice versa. This is absolutely necessary to code good filenmanager appications with electron. A +feature would be to handle drag and drop.

[sindresorhus]

What are "filesystem items" in Electron? Not really clear exactly what you're asking for here. Can you maybe link to some technical sources of what you're looking for.

[s-a]

This is what I do in c# to drag files from Windows Explorer to an application form.

  public partial class Form1 : Form {
    public Form1() {
      InitializeComponent();
      this.AllowDrop = true;
      this.DragEnter += new DragEventHandler(Form1_DragEnter);
      this.DragDrop += new DragEventHandler(Form1_DragDrop);
    }

    void Form1_DragEnter(object sender, DragEventArgs e) {
      if (e.Data.GetDataPresent(DataFormats.FileDrop)) e.Effect = DragDropEffects.Copy;
    }

    void Form1_DragDrop(object sender, DragEventArgs e) {
      string[] files = (string[])e.Data.GetData(DataFormats.FileDrop);
      foreach (string file in files) Console.WriteLine(file);
    }
  }

"filesystem items" in Electron would be only virtual. Drop process out of electron should initiate copy or move process from source to target path. Very difficult... 😸

[sindresorhus]

Electron already supports drag'n'drop: https://gist.github.com/timpulver/452670e4a0ec9619a06347ff61c3f60c

[s-a]

:thinking: Thank you very much.

[itsnwa]

@sindresorhus 👏🏼 Do you have an idea how to solve it if it's a remote file? It works perfectly fine with a local image files. But when I try with web urls it's not working :/

edit: managed to do it like this:

ipcMain.on('ondragstart', (event, file) => {
  const savePath = path.join(os.tmpdir(), path.basename(file.src))
  download(file.src, os.tmpdir())
    .then(() => {
      event.sender.startDrag({
        icon: path.join(__static, 'menubarDefaultTemplate.png'),
        file: path.join(os.tmpdir(), file.filename)
      })
    })
})

[leegee]

As noted above, drag and drop is already supported and documented.

You can also read pasted file paths from the clipboard:

        window.addEventListener('paste', (e) => {
            event.preventDefault();
            console.log(electron.clipboard.readBuffer('FileName').toString());
        });

I am not clear what you mean by 'file system objects' or how you would find one in an Electron GUI.

[FE-linmu]

As noted above, drag and drop is already supported and documented.

You can also read pasted file paths from the clipboard:

        window.addEventListener('paste', (e) => {
            event.preventDefault();
            console.log(electron.clipboard.readBuffer('FileName').toString());
        });

I am not clear what you mean by 'file system objects' or how you would find one in an Electron GUI.

This seems like a little bit of a problem, but you can get a single path like this clipboard.readBuffer('FileNameW).toString('ucs2')`

If you copy multiple files, how do you get multiple paths

[vermilion]

@bei-yang here is the reference how to handle both single and multiple paths ref: https://github.com/njzydark/electron-clipboard-demo