Drag-and-Drop Upload

File upload using a drop zone.

html

<div class="dz">
  <span class="dz__label" id="dz-label-1">Upload artwork</span>
  <label class="dz__zone" style="--accent:#D9C8F0;" for="dz-1">
    <input class="dz__input" id="dz-1" type="file" accept=".png,.jpg,.svg" aria-describedby="dz-hint-1" multiple>
    <span class="dz__icon" aria-hidden="true">&#8593;</span>
    <span class="dz__hint" id="dz-hint-1">Drag files here or click to browse</span>
    <span class="dz__types">.png,.jpg,.svg</span>
  </label>
</div>
<style>
.dz { font: 14px system-ui, sans-serif; color: #241430; max-width: 280px; }
.dz__label { display: block; margin-bottom: 6px; font-weight: 500; }
.dz__zone { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 22px 14px; border: 1.5px dashed #24143050; border-radius: 10px; background: #FAF7F2; cursor: pointer; }
.dz__zone:hover, .dz__zone:focus-within { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #FAF7F2); }
.dz__input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.dz__icon { font-size: 18px; color: var(--accent); }
.dz__hint { font-size: 13px; }
.dz__types { font-size: 11px; color: #24143080; }
</style>

tailwind

<div class="font-sans text-sm text-[#241430] max-w-[280px]">
  <span class="block mb-1.5 font-medium">Upload artwork</span>
  <label class="dz-tw flex flex-col items-center gap-1 text-center px-3.5 py-5 border-[1.5px] border-dashed border-[#24143050] rounded-[10px] bg-[#FAF7F2] cursor-pointer hover:bg-[#24143010]" style="border-color:#D9C8F0;">
    <input type="file" accept=".png,.jpg,.svg" multiple class="sr-only">
    <span aria-hidden="true" style="color:#D9C8F0;">&#8593;</span>
    <span class="text-[13px]">Drag files here or click to browse</span>
    <span class="text-[11px] text-[#24143080]">.png,.jpg,.svg</span>
  </label>
</div>

react

export function DragAndDropUpload({
  label = "Upload artwork",
  hint = "Drag files here or click to browse",
  accept = ".png,.jpg,.svg",
  multiple = true,
  accent = "#D9C8F0",
}) {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 280 }}>
      <span style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>{label}</span>
      <label style={{
        display: "flex", flexDirection: "column", alignItems: "center", gap: 4, textAlign: "center",
        padding: "22px 14px", border: "1.5px dashed #24143050", borderRadius: 10, background: "#FAF7F2", cursor: "pointer",
      }}>
        <input type="file" accept={accept} multiple={multiple} style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", opacity: 0 }} />
        <span aria-hidden="true" style={{ fontSize: 18, color: accent }}>&#8593;</span>
        <span style={{ fontSize: 13 }}>{hint}</span>
        <span style={{ fontSize: 11, color: "#24143080" }}>{accept}</span>
      </label>
    </div>
  );
}