Useimmat käyttäjät eivät tiedä tätä: tiedoston lataamiseksi verkkosivulle ei tarvitse tähdätä pieneen "Valitse tiedosto" -painikkeeseen ja selata tiedostonhallintaa. Yksi yksinkertainen liike riittää: vedä tiedosto tiedostoselaimesta suoraan tuon painikkeen päälle.

Tämä ei ole liitännäinen tai näppärän skriptin tulos. <input type="file">, tavallinen HTML-elementti, tukee natiivisti vedä ja pudota -toimintoa selaintasolla. Ei JavaScriptiä, ei kirjastoja, ei pudotusalueita. Toiminta on kuvattu HTML-spesifikaatiossa ja se on toiminut ainakin 2010-luvun puolivälistä lähtien.

Techblogin tiimi testasi tätä kikkaa kymmenillä verkkosivustoilla. Se toimii kaikkialla, missä käytetään natiivia <input type="file"> -elementtiä: liitännäisten lataaminen WordPressin hallintaan, skannausten lähettäminen tekniseen tukeen, ansioluetteloiden liittäminen HR-portaaleissa. Ei virheitä, ei tanssimista tiedostonhallinnan kanssa.

💡 Pikakatsaus:

• Vedä tiedosto tiedostoselaimesta "Valitse tiedosto" -painikkeen päälle missä tahansa lomakkeessa, niin selain lisää tiedoston syötekenttään automaattisesti.
• Koodia ei tarvita: natiivi <input type="file"> ottaa tiedostoja vastaan vedä ja pudota -toiminnolla oletuksena.
• Monen tiedoston tuki toimii multiple-attribuutin kautta: valitse joukko tiedostoja tiedostoselaimessa, vedä ne painikkeen päälle, ja koko erä lähtee palvelimelle yhdellä kertaa.
• Mobiililaitteet eivät tue tätä kikkaa: kosketuskäyttöliittymät eivät toteuta sovellusten välistä vetämistä.

Tämä lyhyt video näyttää, miten <input type="file"> toimii, ja tiedostojen lataamisen perusperiaatteet selaimessa. Näiden perusteiden ymmärtäminen auttaa tajuamaan, miksi tiedoston vetäminen painikkeen päälle toimii ilman lisäkoodia.

Missä tämä toimii

Ominaisuus toimii työpöydällä kaikissa nykyaikaisissa selaimissa. Testasimme Chromella, Firefoxilla, Safarilla (macOS), Vivaldilla ja Chromium-pohjaisella Edgellä, ja tiedosto hyväksytään oikein jokaisessa. Can I Use -datan mukaan tuki on kattanut yli 95% työpöytäkäyttäjistä jo usean vuoden ajan.

Jos kentässä on multiple-attribuutti, voit vetää koko tiedostoryhmän kerralla. Selain lisää ne kaikki latausjonoon, ja lomakkeen lähettämisen jälkeen palvelin vastaanottaa tiedostotaulukon normaalilla tavalla. Käytännössä tämä nopeuttaa radikaalisti media-aineistojen lataamista WordPressissä: valitse tusina kuvaa tiedostoselaimessa, vedä ne "Valitse tiedostot" -painikkeen päälle mediakirjastossa, ja koko erä siirtyy palvelimelle. Ei tarvetta valita niitä yksi kerrallaan valintaikkunan kautta.

Mobiililaitteet eivät tue tätä kikkaa. Kosketuskäyttöliittymät eivät toteuta sovellusten välistä vetämistä siinä muodossa kuin se työpöydällä on. Mutta työpöytäkäyttäjille jokainen lataus säästää 5-10 sekuntia ja poistaa kansiopuiden selaamisen kognitiivisen kuorman.

Tärkeä varaus: kikka toimii vain natiivin <input type="file"> -elementin kanssa. Jos verkkosivusto käyttää mukautettua elementtiä, tyyliteltyä <div>- tai <button>-elementtiä, joka avaa tiedostoikkunan ohjelmallisesti, vetäminen ei toimi. Vastaavasti, jos verkkosivuston JavaScript sieppaa dragover- ja drop-tapahtumat dokumenttitasolla ja kutsuu e.preventDefault(), selaimen natiivi toiminta estyy.

Miksi kukaan ei puhu tästä

Paradoksi: ominaisuus on ollut selaimissa ainakin vuosikymmenen, mutta keskivertokäyttäjä ei tiedä siitä. Kehittäjätkään eivät usein ole tietoisia: tapa tarttua välittömästi vedä ja pudota -kirjastoihin jyrää halun tarkistaa natiivin toiminnan.

Siitä syystä valtava määrä tutoriaaleja mukautetuista pudotusalueista. Sama artikkeli CSS-Tricksissä purkaa yksityiskohtaisesti JavaScript-toteutusta, jossa on dragover- ja drop-käsittelijät ja tiedostojen lukeminen FileReader-rajapinnalla. Sillä välin selaimen perusominaisuus kerää pölyä varjoissa.

Miksi kehittäjät yhä kirjoittavat omia pudotusalueitaan:

• Visuaalinen palaute. Natiivi lataus ei korosta painiketta, kun tiedostoa pidetään sen päällä, eikä käyttäjä ymmärrä, että vetäminen toimii. Mukautettu pudotusalue tarjoaa tyylitellyn reunuksen, taustavärin muutoksen ja animaation.

• Esikatselu ja validointi. JavaScript-toteutus näyttää kuvan pikkukuvan ennen latausta, tarkistaa tiedoston koon ja tyypin asiakaspäässä ja näyttää edistymispalkin.

• Useat alueet. Kun sivulla on useita itsenäisiä latauspisteitä, esimerkiksi profiilikuva ja galleria omassa tilissä, tarvitaan selkeä tiedoston sitominen tiettyyn kenttään.

Natiivi tuki ei poista näitä skenaarioita. Mutta yksinkertaisissa lomakkeissa, asiakirjan lataamisessa tekniseen tukeen, ansioluettelon lähettämisessä, liitännäisen asentamisessa WordPressin hallinnassa, mukautettua koodia ei yksinkertaisesti tarvita. Selain osaa jo tehdä kaiken.

Miten lisätä visuaalinen palaute parilla rivillä

Jos haluat säilyttää natiivin toiminnan mutta antaa käyttäjälle visuaalisen vihjeen, minimaalinen CSS ja JavaScript riittävät. Alla oleva koodi korostaa tiedostonvalintapainiketta, kun vedetyn tiedoston kohdalla pysähdytään, koskematta itse latausmekanismiin.

Luo kääre <input type="file"> -elementin ympärille merkintään:

1
<div class="file-upload-wrapper">
2
  <input type="file">
3
</div>

Skripti kiinnittyy koko dokumenttiin, ei tiettyyn syötekenttään, koska dragover-tapahtuma laukeaa selainikkunaan saavuttaessa. Kun vetäminen havaitaan, drag-over-luokka lisätään kääreeseen:

1
const fileInput = document.querySelector('input[type="file"]');
2
const wrapper = fileInput.closest('.file-upload-wrapper');
3
 
4
document.addEventListener('dragover', (e) => {
5
  e.preventDefault();
6
  wrapper?.classList.add('drag-over');
7
});
8
 
9
document.addEventListener('dragleave', (e) => {
10
  if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
11
    wrapper?.classList.remove('drag-over');
12
  }
13
});
14
 
15
document.addEventListener('drop', (e) => {
16
  e.preventDefault();
17
  wrapper?.classList.remove('drag-over');
18
});

drag-over-luokka tyylitellään yhdellä CSS-rivillä. Alla sininen katkoviivareunus ja vaalea taustatäyttö, jotka viestivät "pudota tähän":

1
.file-upload-wrapper.drag-over input[type="file"] {
2
  outline: 2px dashed #2563eb;
3
  background: rgba(37, 99, 235, 0.05);
4
}

Tiedosto päätyy yhä syötekenttään natiivisti. JavaScript ei koske latausmekanismiin, se vain lisää visuaalisen palautteen. Ei FileReader-rajapintaa, ei käsin rakennettua FormData-oliota.

Jos tarvitset enemmän, tyypin ja koon validointia ennen lähetystä, kuvan esikatselua, edistymispalkkia, silloin on järkevää katsoa kohti täysiveristä mukautettua pudotusaluetta. Onneksi MDN ja web.dev ovat dokumentoineet tämän prosessin alusta loppuun.

⁉️🤔 Usein kysytyt kysymykset

Toimiiko tämä WordPressissä?

Kyllä, WordPressin vakiolataaja (liitännäiset, teemat, mediakirjasto) on rakennettu natiivin <input type="file"> -elementin päälle. Vetäminen toimii suoraan hallinnassa ilman lisäliitännäisiä. Ainoa vivahde: mediakirjasto ruudukkotilassa käyttää mukautettua pudotusaluetta natiivin kentän päällä, joten visuaalinen palaute siellä on rikkaampi, mutta perusmekanismi on sama. Varmistettu WordPress-versioilla 5.0-6.7.

Mitä tiedostomuotoja tuetaan?

Selain ei aseta muotorajoituksia vedettäessä: tiedosto välitetään syötekenttään sellaisenaan. Jos kentässä on accept-attribuutti (esimerkiksi accept="image/*,.pdf"), suodatus astuu voimaan syötekentän tasolla aivan kuten valittaessa tiedostoikkunan kautta. Ei-tuettujen tyyppien tiedostot piilotetaan jonosta.

Onko vetäminen turvallista?

Ehdottomasti. Tiedoston vetäminen <input type="file"> -elementin päälle ei anna verkkosivustolle pääsyä käyttäjän tiedostojärjestelmään. Selain välittää vain itse tiedoston (tai tiedostotaulukon multiple-attribuutin kanssa), mutta ei sen polkua levyllä. Tietoturvamalli on sama kuin ladattaessa normaalin valintaikkunan kautta: verkkosivusto ei tiedä, mistä kansiosta tiedosto tuli, eikä voi lukea muita lähellä olevia tiedostoja.

Miksi vetäminen ei toimi joillakin verkkosivustoilla?

Kaksi syytä. Ensimmäinen: verkkosivusto ei käytä natiivia <input type="file"> -elementtiä, vaan mukautettua elementtiä, tyyliteltyä <div>- tai <button>-elementtiä, joka avaa tiedostoikkunan ohjelmallisesti. Natiivit vedä ja pudota -tapahtumat eivät ole sidottu tällaiseen elementtiin. Toinen: verkkosivuston JavaScript sieppaa dragover- ja drop-tapahtumat dokumenttitasolla ja kutsuu e.preventDefault(), estäen selaimen vakiotoiminnan. Yleensä kehittäjät nappaavat nämä tapahtumat omaa pudotusaluettaan varten eivätkä odota tämän rikkovan natiivia latausta.

Voinko vetää tiedoston selaimesta toiseen?

Et. Mekanismi toimii vain käyttöjärjestelmän tiedostonhallinnasta selainikkunaan. Vetämistä välilehtien välillä tai selaimesta toiseen ei tueta: selaimen tietoturvamalli ei salli pääsyä toisen kontekstin tiedostojärjestelmään.

Mitä käyttää: pudotusaluetta vai natiivia painiketta

Kikka tiedoston vetämisestä tiedostonvalintapainikkeen päälle säästää aikaa ja vähentää kitkaa. Ei tarvetta tarttua hiireen, tähdätä "Selaa"-painikkeeseen ja selata kansiopuuta. Yksi liike, ja tiedosto on jo lomakkeessa.

Yksinkertaisiin skenaarioihin, asiakirjojen, skannausten, arkistojen lataamiseen, liitännäisten asentamiseen WordPressissä, natiivi toiminta kevyellä visuaalisella tehostuksella on enemmän kuin tarpeeksi. Ennen kuin liität kilotavuja JavaScriptiä mukautettua pudotusaluetta varten, tarkista: ehkä lomakkeellesi riittää se, minkä selain jo valmiiksi osaa.

Jos hallinnoit WordPress-sivustoja, kokeile seuraavassa päivityksessä vetää liitännäinen tai teema suoraan latauspainikkeen päälle. Tulet todennäköisesti yllättymään, kuinka paljon yksinkertaisempaa se on kuin tiedostonhallinnan selaaminen.