De fleste brukere aner ikke at for å laste opp en fil til et nettsted trenger du ikke sikte mot den lille «Velg fil»-knappen og navigere gjennom filbehandleren. Én enkel bevegelse er nok, dra filen fra filutforskeren rett over på den knappen.

Dette er ikke en plugin eller resultatet av et smart script. <input type="file">, et standard HTML-element, støtter dra-og-slipp på nettlesernivå uten videre. Ingen JavaScript, ingen biblioteker, ingen slippsoner. Atferden er beskrevet i HTML-spesifikasjonen og har fungert siden minst midten av 2010-tallet.

Techblog-teamet testet dette trikset på et dusin nettsteder. Det fungerer overalt som bruker et vanlig <input type="file">: opplasting av plugin-er til WordPress-admin, innsending av skanninger til teknisk support, vedlegg av CV-er på HR-portaler. Ingen feil, ingen dans med filbehandleren.

💡 Kort oversikt:

• Dra en fil fra filutforskeren over på «Velg fil»-knappen i et hvilket som helst skjema, så setter nettleseren filen inn i input-feltet automatisk.
• Ingen kode nødvendig: vanlig <input type="file"> aksepterer filer via dra-og-slipp som standard.
• Støtte for flere filer fungerer via multiple-attributtet: velg en gruppe i filutforskeren, dra dem over, så går hele bunten til serveren i én operasjon.
• Mobile enheter støtter ikke dette trikset: berøringsgrensesnitt implementerer ikke dra-og-slipp mellom applikasjoner.

Denne korte videoen demonstrerer hvordan <input type="file"> fungerer og de grunnleggende prinsippene for filopplasting i nettleseren. Å forstå disse grunnprinsippene hjelper deg å innse hvorfor dra-og-slipp på knappen fungerer uten ekstra kode.

Hvor dette fungerer

Funksjonen fungerer på desktop i alle moderne nettlesere. Vi testet på Chrome, Firefox, Safari (macOS), Vivaldi og Edge på Chromium, og filen blir akseptert korrekt i hver av dem. Ifølge data fra Can I Use har støtten dekket over 95% av desktop-brukere i flere år nå.

Hvis feltet har multiple-attributtet, kan du dra en hel gruppe filer på én gang. Nettleseren legger dem alle til i opplastingskøen, og etter innsending av skjemaet mottar serveren en matrise med filer på standard måte. I praksis gir dette en radikal hastighetsøkning for medieopplastinger i WordPress: velg et dusin bilder i filutforskeren, dra dem over på «Velg filer»-knappen i mediebiblioteket, så går hele bunten til serveren. Ingen plukking av dem én etter én gjennom en dialog.

Mobile enheter støtter ikke dette trikset. Berøringsgrensesnitt implementerer ikke dra-og-slipp mellom applikasjoner i den formen som finnes på desktop. Men for desktop-brukere sparer hver opplasting 5-10 sekunder og fjerner den kognitive belastningen ved å navigere gjennom mappetrær.

Viktig forbehold: trikset fungerer bare med vanlig <input type="file">. Hvis et nettsted bruker et tilpasset element, en stylet <div> eller <button> som programmatisk åpner fildialogen, vil ikke dra-og-slipp fungere. Tilsvarende, hvis nettstedets JavaScript fanger opp dragover- og drop-hendelser på dokumentnivå og kaller e.preventDefault(), blokkeres nettleserens opprinnelige atferd.

Hvorfor ingen snakker om det

Paradokset: funksjonen har vært i nettlesere i minst et tiår, men den gjennomsnittlige brukeren vet ikke om den. Utviklere er ofte heller ikke klar over det: vanen med å umiddelbart gripe etter dra-og-slipp-biblioteker veier tyngre enn ønsket om å sjekke den opprinnelige atferden.

Derav de tonnevis av veiledninger om tilpassede slippsoner. Den samme artikkelen på CSS-Tricks bryter ned en JavaScript-implementasjon i detalj med dragover- og drop-handlere, lesing av filer via FileReader. I mellomtiden samler nettleserens grunnleggende kapasitet støv i skyggene.

Hvorfor utviklere fortsatt skriver sine egne slippsoner:

• Visuell tilbakemelding. Opprinnelig opplasting uthever ikke knappen når du holder en fil over, og brukeren forstår ikke at dra-og-slipp vil fungere. En tilpasset slippsone gir en stylet ramme, bakgrunnsendring, animasjon.

• Forhåndsvisning og validering. En JavaScript-implementasjon viser et bildeminiatyr før opplasting, sjekker filstørrelse og -type på klientsiden, viser en fremdriftslinje.

• Flere soner. Når en side har flere uavhengige opplastingspunkter, for eksempel et profilbilde og et galleri på en personlig konto, trenger du tydelig binding av filen til et spesifikt felt.

Opprinnelig støtte eliminerer ikke disse scenarioene. Men i enkle skjemaer, opplasting av et dokument til teknisk support, innsending av en CV, installasjon av en plugin i WordPress-admin, er tilpasset kode rett og slett ikke nødvendig. Nettleseren vet allerede hvordan den skal gjøre alt.

Hvordan legge til visuell tilbakemelding med et par linjer

Hvis du trenger å beholde den opprinnelige atferden, men gi brukeren et visuelt hint, er minimalt med CSS og JavaScript nok. Koden nedenfor uthever filvalgknappen når du holder en dratt fil over, uten å røre selve opplastingsmekanismen.

Lag en wrapper rundt <input type="file"> i markeringen:

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

Skriptet henger på hele dokumentet, ikke på et spesifikt input-felt, fordi dragover-hendelsen utløses når man går inn i nettleservinduet. Når dra-og-slipp oppdages, legges drag-over-klassen til i wrapperen:

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-klassen styles med én linje CSS. Nedenfor, en blå stiplet ramme og lett bakgrunnsfyll, som signaliserer «slipp her»:

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

Filen lander fortsatt i input-feltet på opprinnelig vis. JavaScript rører ikke opplastingsmekanismen, legger bare til visuell tilbakemelding. Ingen FileReader, ingen manuelt konstruert FormData.

Hvis du trenger mer, validering av type og størrelse før innsending, forhåndsvisning av bilde, fremdriftslinje, da gir det mening å se mot en fullverdig tilpasset slippsone. Heldigvis har MDN og web.dev dokumentert denne prosessen fra start til slutt.

⁉️🤔 Ofte stilte spørsmål

Fungerer dette i WordPress?

Ja, standard WordPress-opplaster (plugin-er, temaer, mediebibliotek) er bygget på vanlig <input type="file">. Dra-og-slipp fungerer rett i admin uten ekstra plugin-er. Den eneste nyansen: mediebiblioteket i rutenettmodus bruker en tilpasset slippsone oppå det opprinnelige feltet, så den visuelle tilbakemeldingen der er rikere, men den grunnleggende mekanismen er den samme. Verifisert på WordPress-versjoner fra 5.0 til 6.7.

Hvilke filformater støttes?

Nettleseren pålegger ingen formatbegrensninger ved dra-og-slipp: filen sendes til input-feltet som den er. Hvis feltet har et accept-attributt (for eksempel accept="image/*,.pdf"), vil filtrering tre i kraft på input-nivå nøyaktig som når du velger via fildialogen. Filer av ikke-støttede typer vil bli skjult fra køen.

Er dra-og-slipp sikkert?

Absolutt. Å dra en fil over på <input type="file"> gir ikke nettstedet tilgang til brukerens filsystem. Nettleseren sender bare selve filen (eller en matrise med filer med multiple), men ikke dens sti på disken. Sikkerhetsmodellen er den samme som ved opplasting via standard valgdialog: nettstedet vet ikke hvilken mappe filen kom fra og kan ikke lese andre filer i nærheten.

Hvorfor fungerer ikke dra-og-slipp på noen nettsteder?

To grunner. For det første: nettstedet bruker ikke et vanlig <input type="file">, men et tilpasset element, en stylet <div> eller <button> som programmatisk åpner fildialogen. Opprinnelige dra-og-slipp-hendelser er ikke bundet til et slikt element. For det andre: nettstedets JavaScript fanger opp dragover- og drop-hendelser på dokumentnivå og kaller e.preventDefault(), noe som blokkerer nettleserens standardatferd. Vanligvis fanger utviklere disse hendelsene for sin egen slippsone og forventer ikke at dette skal ødelegge opprinnelig opplasting.

Kan jeg dra en fil fra én nettleser til en annen?

Nei. Mekanismen fungerer bare fra operativsystemets filbehandler inn i nettleservinduet. Dra-og-slipp mellom faner eller fra én nettleser til en annen støttes ikke: nettleserens sikkerhetsmodell tillater ikke tilgang til filsystemet i en annen kontekst.

Hva du bør bruke: slippsone eller opprinnelig knapp

Trikset med å dra filen over på filvalgknappen sparer tid og reduserer friksjon. Du slipper å strekke deg etter musen, sikte mot «Bla gjennom»-knappen, navigere gjennom mappetreet. Én bevegelse, og filen er allerede i skjemaet.

For enkle scenarioer, opplasting av dokumenter, skanninger, arkiver, installasjon av plugin-er i WordPress, er opprinnelig atferd med lett visuell forbedring mer enn nok. Før du kobler til kilobyte med JavaScript for en tilpasset slippsone, sjekk: kanskje skjemaet ditt har nok av det nettleseren allerede kan gjøre.

Hvis du administrerer WordPress-nettsteder, prøv ved neste oppdatering å dra en plugin eller et tema rett over på opplastingsknappen. Du vil sannsynligvis bli overrasket over hvor mye enklere det er enn å navigere i filbehandleren.