Drag & drop: tiedostojen pudotus

CSS

HTML

Javascript

/* suorita tämä koodi Run-painikkeella */

/* Koodikoneen Run-painike suorittaa koodin uudelleen, jolloin samat
   käsittelijät liitettäisiin toistamiseen. Siksi elementit korvataan
   kopioillaan: kopio ei peri tapahtumankäsittelijöitä. */
const puhdista = function (elementti) {
  const kopio = elementti.cloneNode(true);
  elementti.replaceWith(kopio);
  return kopio;
};

const pudotusalue = puhdista(document.getElementById("pudotusalue"));
const kentta = pudotusalue.querySelector("#tiedostot");
const kuvat = pudotusalue.querySelector("#kuvat");

/* Sama käsittely riippumatta siitä, tulivatko tiedostot pudotuksesta
   vai tiedostokentästä. */
const naytaTiedostot = function (tiedostot) {
  for (const tiedosto of tiedostot) {
    console.log(tiedosto.name + " | " + tiedosto.type + " | " + tiedosto.size + " tavua");

if (!tiedosto.type.startsWith("image/")) {
      console.log("  ohitetaan: ei ole kuva");
      continue;
    }

const kuva = document.createElement("img");
    kuva.src = URL.createObjectURL(tiedosto);
    kuva.alt = tiedosto.name;

/* väliaikainen osoite vapautetaan kun kuva on ladattu */
    kuva.addEventListener("load", function () {
      URL.revokeObjectURL(kuva.src);
    });

kuvat.append(kuva);
  }
};

pudotusalue.addEventListener("dragover", function (e) {
  /* types-listalla oleva Files ei ole MIME-tyyppi vaan rajapinnan
     oma erikoisarvo */
  if (!e.dataTransfer.types.includes("Files")) {
    return;
  }

e.preventDefault();
  e.dataTransfer.dropEffect = "copy";
  pudotusalue.classList.add("pudotettavissa");
});

pudotusalue.addEventListener("dragleave", function () {
  pudotusalue.classList.remove("pudotettavissa");
});

pudotusalue.addEventListener("drop", function (e) {
  /* PAKOLLINEN: ilman tätä selain avaa pudotetun tiedoston
     ja oma sivu katoaa */
  e.preventDefault();
  pudotusalue.classList.remove("pudotettavissa");
  naytaTiedostot(e.dataTransfer.files);
});

/* Tavallinen tiedostokenttä on tarjottava aina: pelkkä pudotusalue
   on käyttökelvoton näppäimistöllä ja kosketusnäytöillä. */
kentta.addEventListener("change", function (e) {
  naytaTiedostot(e.target.files);
});

CSS

HTML

Javascript

Konsoli