Code example

The file upload consists of a drop-zone and a list of the uploaded or uploading files.

To be able to upload multiple files, use <input type="file" name="file-upload[]" multiple>. If a compact version of the file upload is needed, you can remove the figure.

For more information about the progress bar, check out the loader page

Example
or drop files to upload
  • sample-image.jpeg
  • sample-image2.jpeg
  • sample-image3.jpeg 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<div class="ox-file-upload">
	<div aria-label="File upload zone" class="ox-file-upload__drop-zone">
		<img class="ox-file-upload__drop-zone__figure" src="/assets/img/file-upload.svg" alt="Upload file" role="presentation" aria-hidden="true">
		<div class="ox-file-upload__drop-zone__controls">
			<label tabindex="0" class="ox-file-upload__drop-zone__controls__control ox-button ox-button--secondary ox-file-upload__drop-zone__controls__button" role="button" for="file-upload-example-1">Upload file <input class="ox-file-upload__drop-zone__hidden-control" id="file-upload-example-1" type="file" name="file-upload" role="presentation" aria-hidden="true"></label>
			<span class="ox-file-upload__drop-zone__controls__control ox-file-upload__drop-zone__controls__label">or drop files to upload</span>
		</div>
	</div>
	<ul class="ox-file-upload__files">
		<li class="ox-file-upload__files__item">
			<img src="/assets/img/sample-image.svg">
			<div class="ox-file-upload__files__info">
				<span class="ox-file-upload__files__info__name">sample-image.jpeg</span>
				<progress class="ox-file-upload__files__info__progress ox-progress" min="0" max="100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></progress>
			</div>
			<button type="button" class="ox-file-upload__files__item__action ox-button ox-button--plain ox-button--icon ox-file-upload__files__action" title="Remove item">
				<span class="ox-button__icon ox-icon ox-icon--trash" aria-hidden="true"></span>
			</button>
		</li>
		<li class="ox-file-upload__files__item">
			<img src="/assets/img/file-upload-progress.svg">
			<div class="ox-file-upload__files__info">
				<span class="ox-file-upload__files__info__name">sample-image2.jpeg</span>
				<progress class="ox-file-upload__files__info__progress ox-progress" value="100" min="0" max="100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></progress>
			</div>
			<button type="button" class="ox-button ox-button--plain ox-button--icon ox-file-upload__files__action" title="Cancel upload">
				<span class="ox-button__icon ox-icon ox-icon--cancel" aria-hidden="true"></span>
			</button>
		</li>
		<li class="ox-file-upload__files__item">
			<img src="/assets/img/file-upload-progress.svg">
			<div class="ox-file-upload__files__info">
				<span class="ox-file-upload__files__info__name">sample-image3.jpeg</span>
				<progress class="ox-file-upload__files__info__progress ox-progress" value="25" min="0" max="100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></progress>
			</div>
			<button type="button" class="ox-button ox-button--plain ox-button--icon ox-file-upload__files__action" title="Cancel upload">
				<span class="ox-button__icon ox-icon ox-icon--cancel" aria-hidden="true"></span>
			</button>
		</li>
	</ul>
</div>

Styling on drag

File upload area's that have files being drawn to should add class .ox-file-upload__drop-zone--dragging on the file upload area. Make sure to alter the label text when the user is effectively dragging files onto the area.

Note: --dragging class will hide the element on mobile

Example
Drop your file(s) to upload 
1
2
3
4
5
6
7
8
9

<div class="ox-file-upload">
	<div aria-label="File upload zone" class="ox-file-upload__drop-zone ox-file-upload__drop-zone--dragging">
		<img class="ox-file-upload__drop-zone__figure" src="/assets/img/file-upload.svg" alt="Upload file" role="presentation" aria-hidden="true">
		<div class="ox-file-upload__drop-zone__controls">
			<label tabindex="0" class="ox-file-upload__drop-zone__controls__control ox-button ox-button--secondary ox-file-upload__drop-zone__controls__button" role="button" for="file-upload-example-1">Upload file <input class="ox-file-upload__drop-zone__hidden-control" id="file-upload-example-1" type="file" name="file-upload" role="presentation" aria-hidden="true"></label>
			<span class="ox-file-upload__drop-zone__controls__control ox-file-upload__drop-zone__controls__label">Drop your file(s) to upload</span>
		</div>
	</div>
</div>