electron Js ,Drag-drop, JavaScript

I am new to Electron Framework. I'm trying to develop desktop application using Electron Framework. I want to implement an use case like team viewer on the left side where I have local directories and on the right side I have network directories. I want to copy a file or folder from local to network using drag and drop functionality. How should i do that in JavaScript?

Solution

Ok so I put together a quick example. You will have to modify that, because it only works for moving files on the same drive.

Here is my index.html with two divs to test the drag control:

<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="app.js"></script>
</head>
<body>
    <div id="sourceDrive" class="drive" ondrop="dropOnSource(event)" ondragover="allowDrop(event)"></div>
    <div id="destinationDrive" class="drive" ondrop="dropOnDestination(event)" ondragover="allowDrop(event)"></div>
</body>

And the respective app.js:

const electron = require('electron');
const ipc = electron.ipcRenderer;

function loadFiles(){
    ipc.send("loadFiles");
}
loadFiles();

ipc.on('sourceFiles', (ev, args) => {
    document.querySelector("#sourceDrive").innerHTML = "";
    args.forEach(file => { 
        document.querySelector("#sourceDrive").innerHTML += '<div id="'+file+'" draggable="true" ondragstart="drag(event)">'+file+'</div>';
    });
})
ipc.on('destinationFiles', (ev, args) => {
    document.querySelector("#destinationDrive").innerHTML = "";
    args.forEach(file => { 
        document.querySelector("#destinationDrive").innerHTML += '<div id="'+file+'" draggable="true" ondragstart="drag(event)">'+file+'</div>';
    });
})

function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function dropOnSource(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ipc.send('moveToSource', data);
    loadFiles();
}
function dropOnDestination(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ipc.send('moveToDestination', data);
    loadFiles();
}

And here is the main.js:

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const ipc = electron.ipcMain;
const fs = require("fs");

let mainWindow;

const sourcePath = "fileSource";
const destinationPath = "fileDestination";

app.on('ready', _ => {
    console.log("App running");

    mainWindow = new BrowserWindow({
        width: 600,
        height: 400
    });
    mainWindow.loadURL('file://' + __dirname + '/ui/index.html');

    ipc.on("loadFiles", (event, arg) => {
        var fileStackSource = [];
        fs.readdirSync(sourcePath).forEach(file => {
            fileStackSource.push(file);
        });
        var fileStackDestination = [];
        fs.readdirSync(destinationPath).forEach(file => {
            fileStackDestination.push(file);
        });
        mainWindow.webContents.send('sourceFiles', fileStackSource);
        mainWindow.webContents.send('destinationFiles', fileStackDestination);
    });

    ipc.on('moveToSource', (event, arg) => {
        console.log("moving " + arg + " from " + destinationPath + " to " + sourcePath);
        fs.renameSync(destinationPath + "/" + arg, sourcePath + "/" + arg);
    });
    ipc.on('moveToDestination', (event, arg) => {
        console.log("moving " + arg + " from " + sourcePath + " to " + destinationPath);
        fs.renameSync(sourcePath + "/" + arg, destinationPath + "/" + arg);
    });
});

My directory looks as follows:

main.js
ui

-- index.html

-- app.js

fileSource
fileDestination

This should help you to understand the basics of what you are planning to do. If you are still uncertain about the basics of electron, I'd recommend you start with that.