Enamik kasutajaid ei aimagi: faili veebisaidile üleslaadimiseks ei pea sihtima tillukest „Choose File" nuppu ja failihalduris navigeerima. Piisab ühest lihtsast liigutusest, lohista fail oma failihaldurist otse selle nupu peale.

See ei ole plugin ega nutika skripti tulemus. <input type="file">, tavaline HTML-element, toetab brauseri tasemel loomupäraselt lohistamist. Pole vaja JavaScripti, teeke ega alasid. See käitumine on kirjeldatud HTML-i spetsifikatsioonis ja on toiminud vähemalt 2010. aastate keskpaigast.

Tehnoblogi meeskond testis seda nippi tosinal veebisaidil. See töötab kõikjal, kus kasutatakse tavalist <input type="file"> elementi: pluginade üleslaadimine WordPressi administraatoris, skannide saatmine tehnilisele toele, CV-de lisamine personaliportaalides. Ei mingeid vigu ega tantsimist failihalduriga.

💡 Kiirülevaade:

• Lohista fail oma failihaldurist mis tahes vormis oleva „Choose File" nupu peale, brauser lisab faili sisendisse automaatselt.
• Koodi pole vaja: tavaline <input type="file"> võtab vaikimisi faile vastu lohistamise teel.
• Mitme faili tugi toimib multiple atribuudi kaudu: vali failihalduris grupp, lohista need üle ja kogu pakett läheb ühe toiminguga serverisse.
• Mobiilseadmed seda nippi ei toeta: puuteekraanid ei rakenda rakenduste vahel lohistamist.

See lühike video demonstreerib, kuidas <input type="file"> töötab, ja failide brauserisse üleslaadimise põhiprintsiipe. Nende aluste mõistmine aitab mõista, miks nupule lohistamine töötab ilma lisakoodita.

Kus see töötab

See funktsioon töötab lauaarvutis kõigis kaasaegsetes brauserites. Testisime Chrome'is, Firefoxis, Safaris (macOS), Vivaldis ja Chromiumil põhinevas Edge'is, fail võetakse igas neist korrektselt vastu. Can I Use andmetel on tugi katnud üle 95% lauaarvutikasutajatest juba mitu aastat.

Kui väljal on multiple atribuut, saad korraga lohistada terve grupi faile. Brauser lisab need kõik üleslaadimisjärjekorda ja pärast vormi saatmist saab server standardsel viisil failide massiivi. Praktikas kiirendab see oluliselt meedia üleslaadimist WordPressis: vali failihalduris tosin pilti, lohista need meediateegis nupule „Choose Files" ja kogu pakett läheb serverisse. Pole vaja neid dialoogi kaudu ükshaaval valida.

Mobiilseadmed seda nippi ei toeta. Puuteekraanid ei rakenda rakenduste vahel lohistamist sel kujul, nagu see lauaarvutis eksisteerib. Kuid lauaarvutikasutajate jaoks säästab iga üleslaadimine 5-10 sekundit ja vähendab kataloogipuus navigeerimise kognitiivset koormust.

Oluline hoiatus: nipp töötab ainult tavalise <input type="file"> elemendiga. Kui veebisait kasutab kohandatud elementi, kujundatud <div> või <button> elementi, mis avab failidialoogi programselt, siis lohistamine ei toimi. Samamoodi, kui veebisaidi JavaScript püüab dokumendi tasemel dragover ja drop sündmused kinni ning kutsub välja e.preventDefault(), blokeeritakse brauseri loomulik käitumine.

Miks keegi sellest ei räägi

Paradoks: see funktsioon on brauserites olnud vähemalt kümmekond aastat, kuid tavakasutaja ei tea sellest. Ka arendajad pole sageli teadlikud: harjumus kohe lohistamise teekide järele haarata kaalub üles soovi kontrollida loomulikku käitumist.

Sellest ka tonnide viisi õpetusi kohandatud alade kohta. Seesama artikkel CSS-Tricksis analüüsib üksikasjalikult JavaScripti teostust koos dragover ja drop töötlejatega, failide lugemist FileReader abil. Samal ajal kogub brauseri põhivõimekus varjus tolmu.

Miks arendajad ikka kirjutavad oma alasid:

• Visuaalne tagasiside. Tavaline üleslaadimine ei tõsta faili hõljutamisel nuppu esile ja kasutaja ei mõista, et lohistamine toimib. Kohandatud ala pakub kujundatud piirjoont, taustamuutust, animatsiooni.

• Eelvaade ja valideerimine. JavaScripti teostus näitab pisipliti enne üleslaadimist, kontrollib faili suurust ja tüüpi kliendipoolselt, kuvab edenemisriba.

• Mitu ala. Kui lehel on mitu sõltumatut üleslaadimispunkti, näiteks profiilifoto ja galerii isiklikus kontos, on vaja faili selget sidumist konkreetse väljaga.

Loomulik tugi neid stsenaariume ei välista. Kuid lihtsates vormides, dokumendi üleslaadimisel tehnilisele toele, CV saatmisel, pluginadi installimisel WordPressi administraatoris, pole kohandatud koodi lihtsalt vaja. Brauser juba oskab kõike teha.

Kuidas lisada visuaalset tagasisidet paari reaga

Kui on vaja säilitada loomulik käitumine, kuid anda kasutajale visuaalne vihje, piisab minimaalsest CSS-ist ja JavaScriptist. Allolev kood tõstab lohistatava faili hõljutamisel esile failivaliku nupu, puudutamata üleslaadimismehhanismi ennast.

Loo märgendis <input type="file"> elemendi ümber ümbris:

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

Skript haagitakse kogu dokumendi, mitte konkreetse sisendi külge, sest dragover sündmus käivitub brauseriaknasse sisenemisel. Kui lohistamine tuvastatakse, lisatakse ümbrisele drag-over klass:

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 klass kujundatakse ühe CSS-i reaga. Allpool sinine katkendlik piirjoon ja hele taustatäide, mis annab märku „lohista siia":

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

Fail maandub endiselt sisendisse loomulikul teel. JavaScript ei puuduta üleslaadimismehhanismi, vaid lisab ainult visuaalset tagasisidet. Pole FileReader-it ega käsitsi koostatud FormData-t.

Kui on vaja enamat, tüübi ja suuruse valideerimist enne saatmist, pildi eelvaadet, edenemisriba, siis on mõttekas vaadata täisfunktsionaalse kohandatud ala poole. Õnneks on MDN ja web.dev selle protsessi algusest lõpuni dokumenteerinud.

⁉️🤔 Korduma kippuvad küsimused

Kas see töötab WordPressis?

Jah, standardne WordPressi üleslaadija (pluginad, teemad, meediateek) on üles ehitatud tavalisele <input type="file"> elemendile. Lohistamine töötab otse administraatoris ilma täiendavate pluginadeta. Ainus nüanss: meediateek ruudustikurežiimis kasutab tavalise välja peal kohandatud ala, nii et visuaalne tagasiside on seal rikkalikum, kuid põhimehhanism on sama. Kontrollitud WordPressi versioonidel 5.0 kuni 6.7.

Milliseid failivorminguid toetatakse?

Brauser ei sea lohistamisel vormingupiiranguid: fail edastatakse sisendisse sellisena, nagu ta on. Kui väljal on accept atribuut (näiteks accept="image/*,.pdf"), siis filtreerimine rakendub sisendi tasemel täpselt nagu failidialoogi kaudu valides. Mittetoetatud tüüpi failid peidetakse järjekorrast.

Kas lohistamine on turvaline?

Absoluutselt. Faili lohistamine <input type="file"> elemendile ei anna veebisaidile juurdepääsu kasutaja failisüsteemile. Brauser edastab ainult faili enda (või failide massiivi multiple korral), kuid mitte selle asukohta kettal. Turvamudel on sama, mis tavapärase valikudialoogi kaudu üleslaadimisel: veebisait ei tea, millisest kaustast fail pärineb, ega saa lugeda teisi lähedalasuvaid faile.

Miks lohistamine mõnel veebisaidil ei tööta?

Kaks põhjust. Esiteks: veebisait ei kasuta tavalist <input type="file"> elementi, vaid kohandatud elementi, kujundatud <div> või <button> elementi, mis avab failidialoogi programselt. Loomulikud lohistamissündmused pole sellise elemendiga seotud. Teiseks: veebisaidi JavaScript püüab dokumendi tasemel dragover ja drop sündmused kinni ning kutsub välja e.preventDefault(), blokeerides brauseri standardse käitumise. Tavaliselt püüavad arendajad need sündmused oma ala jaoks kinni ega eelda, et see lõhub tavalise üleslaadimise.

Kas ma saan faili ühest brauserist teise lohistada?

Ei. Mehhanism töötab ainult operatsioonisüsteemi failihaldurist brauseriaknasse. Lehtede vahel või ühest brauserist teise lohistamine ei ole toetatud: brauseri turvamudel ei võimalda juurdepääsu teise konteksti failisüsteemile.

Mida kasutada: ala või tavalist nuppu

Failivaliku nupule lohistamise nipp säästab aega ja vähendab hõõrdumist. Pole vaja haarata hiirt, sihtida nuppu „Browse", navigeerida kataloogipuus. Üks liigutus ja fail on juba vormis.

Lihtsate stsenaariumide jaoks, dokumentide, skannide, arhiivide üleslaadimine, pluginade installimine WordPressis, on loomulik käitumine kerge visuaalse täiustusega enam kui piisav. Enne kui ühendad kilobaite JavaScripti kohandatud ala jaoks, kontrolli: võib-olla piisab sinu vormile sellest, mida brauser juba oskab teha.

Kui haldad WordPressi veebisaite, proovi järgmisel uuendusel lohistada plugin või teema otse üleslaadimisnupule. Tõenäoliselt üllatud, kui palju lihtsam see on kui failihalduris navigeerimine.