React Academy · Lektion

Gränssnitt för filuppladdning med dra och släpp

Bygg en dra-och-släpp-yta med händelserna onDragOver/onDrop och visuell återkoppling.

Lektion 3 av 413 steg

Gränssnitt för filuppladdning med dra och släpp är en gratis lektion i React Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen bygger ni en zon för dra-och-släpp-baserad filuppladdning i React med hjälp av inbyggda drag-händelser och visuell återkoppling som vägleder användarna.

Översikt över drag-händelser

Webbläsaren utlöser drag-händelser när filer dras över element. De viktigaste händelserna är: `dragover` (filen befinner sig över elementet), `dragleave` (filen lämnar elementet) och `drop` (filen släpps).

Förhindra standardbeteendet

Som standard navigerar webbläsaren till en fil när ni släpper den i webbläsaren. Anropa `e.preventDefault()` i både `onDragOver` och `onDrop` för att förhindra detta.

const handleDragOver = (e) => {
  e.preventDefault();
};
const handleDrop = (e) => {
  e.preventDefault();
  const files = Array.from(e.dataTransfer.files);
  // process files
};

Visuellt aktivt tillstånd

Håll reda på om en fil dras över zonen med ett booleskt state. Växla en CSS-klass för att ge användarna visuell återkoppling, till exempel en markerad kantlinje.

const [isDragging, setIsDragging] = useState(false);

<div
  className={isDragging ? 'zone active' : 'zone'}
  onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
  onDragLeave={() => setIsDragging(false)}
  onDrop={handleDrop}
>

Läsa släppta filer

Släppta filer finns i `e.dataTransfer.files` — en FileList. Konvertera den till en array och bearbeta filerna.

const handleDrop = (e) => {
  e.preventDefault();
  setIsDragging(false);
  const files = Array.from(e.dataTransfer.files);
  setSelectedFiles(files);
};

Kombinera med klick för att bläddra

Gör även släppzonen klickbar genom att rendera ett dolt filinmatningsfält och programmatiskt klicka på det när zonen klickas.

const inputRef = useRef();

<div onClick={() => inputRef.current.click()} ...>
  Drop files here or click to browse
</div>
<input
  ref={inputRef}
  type="file"
  multiple
  hidden
  onChange={(e) => setSelectedFiles(Array.from(e.target.files))}
/>

Visa förhandsgranskningar av filer

Iterera över de valda filerna med map för att visa deras namn och storlek. För bildfiler genererar ni förhandsgransknings-URL:er med URL.createObjectURL och återkallar dem i en cleanup-effekt.

Ta bort filer före uppladdning

Låt användarna ta bort filer före uppladdningen genom att filtrera arrayen med valda filer. Uppdatera state med den filtrerade arrayen.

const removeFile = (index) =>
  setSelectedFiles(files => files.filter((_, i) => i !== index));

dragenter jämfört med dragover

Använd `dragenter` för att upptäcka när en dragning först går in i zonen och `dragover` för att hålla det aktiva tillståndet kvar medan filen befinner sig över zonen. Använd en räknare för kapslade underordnade element: öka den vid dragenter, minska den vid dragleave och återställ den vid drop.

Bibliotek från tredje part

För släppzoner i produktion kan ni överväga **react-dropzone** — det hanterar webbläsarspecifika egenheter, ARIA-attribut, filtrering av filtyper och flera uppladdningslägen direkt.

import { useDropzone } from 'react-dropzone';
const { getRootProps, getInputProps, isDragActive } = useDropzone({
  onDrop: acceptedFiles => setFiles(acceptedFiles),
  accept: { 'image/*': [] },
});

Snabb kontroll

Varför måste ni anropa e.preventDefault() i hanteraren onDragOver?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Bygg en släppzon med händelserna onDragOver, onDragLeave och onDrop. Anropa alltid e.preventDefault() vid dragover och drop. Håll reda på state med isDragging för visuell återkoppling. Kombinera detta med ett dolt filinmatningsfält för klick för att bläddra.

Nästa steg

Nästa lektion: **Ladda upp filer till ett backend-API** — ni använder FormData och fetch för att skicka filer med POST och följa uppladdningsförloppet.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Gränssnitt för filuppladdning med dra och släpp” gratis?

Ja – hela texten till ”Gränssnitt för filuppladdning med dra och släpp” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Gränssnitt för filuppladdning med dra och släpp”?

Bygg en dra-och-släpp-yta med händelserna onDragOver/onDrop och visuell återkoppling. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Gränssnitt för filuppladdning med dra och släpp”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Okontrollerade indatafält med useRef
Filindata och läsa fildata
Gränssnitt för filuppladdning med dra och släpp
Ladda upp filer till ett backend-API

← Tillbaka till React Academy