Electron drag and drop

Mattepuffo's logo
Electron drag and drop

Electron drag and drop

Programmazione, Javascript - AJAX

Sto sviluppando un programmino con Electron, e voglio poter trascinre i file MP3 sulla finestra.

Come posso fare?

Impostare il drop su Electron è abbastanza semplice.

A livello di init della app non ho cambiato nulla.

Però ho creato questo file dove mettere le mie funzioni Javascript:

var fileMp3;

module.exports = {
  initDrop: function() {
    var dnd = document.getElementById('body');

    dnd.ondragover = () => {
      return false;
    };

    dnd.ondragleave = () => {
      return false;
    };

    dnd.ondragend = () => {
      return false;
    };

    dnd.ondrop = (e) => {
      e.preventDefault();
      for (let f of e.dataTransfer.files) {
        if (f.type == 'audio/mp3') {
          fileMp3 = f.path;
        }
      }

      return false;
    };
  }
}

Qui ho una variabile che vado a riempire quando finisce l'evendo drop.

Qui controllo anche il tipo di file per accettare solo MP3.

Come area di drop ho messo tutto il body.

Questa la pagina (index.html):

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Electron DnD</title>
</head>

<body id="body">
	<script>
		const funcs = require("./script.js");
        funcs.initDrop();
    </script>
</body>

</html>

Enjoy!

Condividi

Commentami!