Electron Drag and Drop File Example with Editing – Coding Shiksha

Electron Drag and Drop File Example with Editing – Coding Shiksha

 

 

Welcome Folks I am back with another blog post. In this Post I will be making a Drag and Drop File Editing Desktop Application in Electron. Electron as you all know is a modern Framework to build cross platform Desktop Applications with the help of HTML,CSS & Javascript. Let’s start the Application.

 

Below is a list of properties I will use:

 

  • Drag and Drop
  • IpcMain and IpRenderer
  • ShowOpenDialog Module
  • ShowSaveDialog Module
READ  PDF Generator in Javascript - JSPDF Tutorial

 

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <title>Drag and Drop in Electron</title>
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" 
                integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
                
               
            <body>
              <div class="container">
                  <div class="jumbotron">
                      <p class="alert alert-info" id="drag-file">Drag your file here.</p>
                  </div>
                    <textarea id="txtarea" style="width:700px;height:350px;" class="form-control"></textarea><br/>
                    <button id="btn" class="btn btn-success">Save</button>
              </div>
            </body>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="renderer.js"></script>
</html>

 

 

 

Main.js File

 

const {app,BrowserWindow}=require('electron')
const {dialog}=require('electron')
const url=require('url')
const path=require('path')

let win;

function createWindow(){
  win=new BrowserWindow({
    width:900,
    height:700,
    webPreferences:{
        nodeIntegration:true
    }
  })

  win.loadURL(url.format({
    pathname:path.join(__dirname,'/app/index.html'),
    protocol:'file:',
    slashes:true
  }))

  win.openDevTools()
}

app.on('ready',createWindow)

const { ipcMain } = require('electron')
let fs = require('fs')
  
//electron application codes
ipcMain.on('ondragstart', (event, filePath) => {
    
    readFile(filePath);

    function readFile(filepath) { 
      fs.readFile(filepath, 'utf-8', (err, data) => { 
         
         if(err){ 
            alert("An error ocurred reading the file :" + err.message) 
            return 
         } 
         
         // handle the file content 
         event.sender.send('fileData', data) 
      }) 
   } 

  })

  ipcMain.on('clickedbutton', (event, data) => {
    
    dialog.showSaveDialog({ filters: [

      { name: 'text', extensions: ['txt'] }
   
     ]},function (fileName) {

      if(fileName=== undefined) return
      fs.writeFile(fileName, data, function (err) {

      })

    }); 

})

 

READ  BootBoxJS - Bootstrap Modals Library For Creating Beautiful Bootstrap Modals

 

Renderer.js

 

const {ipcRenderer}=require('electron')
var $ = require('jquery');
var dragFile= document.getElementById("drag-file");
dragFile.addEventListener('drop', function (e) {
      e.preventDefault();
      e.stopPropagation();
  
      for (let f of e.dataTransfer.files) {
        console.log('The file(s) you dragged: ', f)
        ipcRenderer.send('ondragstart', f.path)
        }
    });

    dragFile.addEventListener('dragover', function (e) {
        e.preventDefault();
        e.stopPropagation();
      });


      $('#btn').on('click', () => {
        let txtarea=$('#txtarea').val()
        ipcRenderer.send('clickedbutton', txtarea)
  
      }) 

      ipcRenderer.on('fileData', (event, data) => { 
        $('#txtarea').text(data); 
         })

 

READ  jQuery Plugin to Display Google Calendar on Website - Coding Shiksha

 

 

Leave a Reply

Close Menu