Components

File upload

A flat .ds-dropzone — a dashed 1px border around a click / keyboard / drag-and-drop target. On .is-dragover the border and background shift to the accent. Selected files list below in a .ds-filelist with a name, size, optional .ds-progress bar and a remove ×.

Dropzone

The .ds-dropzone is a dashed-bordered target with a __hint. It accepts clicks (it wraps a hidden <input type="file">), keyboard activation and dragged files. Drag a file over it to see the accent .is-dragover state — the inline script below wires the demo (no dependencies).

Dashed drop target

Click to upload or drag and drop

<div class="ds-dropzone" role="button" tabindex="0">
  <input type="file" multiple hidden>
  <div class="ds-dropzone__hint"><strong>Click to upload</strong> or drag and drop</div>
</div>
<!-- toggle .is-dragover on the zone while a file is dragged over it -->

File list

Each selected file is a .ds-filelist__item: a __name, a tabular __size, an optional reused .ds-progress bar, and a __remove × button. Rows are separated by a soft 1px rule.

Selected files

margin-report-q2.pdf 248 KB
price-matrix-export.csv 1.4 MB

<ul class="ds-filelist">
  <li class="ds-filelist__item">
    <span class="ds-filelist__name">margin-report-q2.pdf</span>
    <span class="ds-filelist__size">248 KB</span>
    <button class="ds-filelist__remove" aria-label="Remove margin-report-q2.pdf">×</button>
  </li>
  <li class="ds-filelist__item">
    <span class="ds-filelist__name">price-matrix-export.csv</span>
    <span class="ds-filelist__size">1.4 MB</span>
    <div class="ds-progress" role="progressbar" aria-valuenow="62">
      <div class="ds-progress__bar" style="width:62%"></div>
    </div>
    <button class="ds-filelist__remove" aria-label="Remove price-matrix-export.csv">×</button>
  </li>
</ul>

React

The FileUpload renders a clickable, keyboard-accessible .ds-dropzone wrapping a hidden file input, with dragover / dragleave / drop handlers that toggle .is-dragover. It lists selected files with formatted sizes and a remove button, and calls onFiles(File[]) on every change. Works controlled (value) or uncontrolled.

import { FileUpload } from "@diametral/design-system/react";

<FileUpload
  accept=".pdf,.csv"
  multiple
  onFiles={(files) => console.log(files)}
/>