File Upload

A keyboard-accessible drag-and-drop upload surface with extension and file-size validation, an animated perimeter progress indicator, and a completion callback for connecting your own storage layer.

Drag and drop to upload or select

PDF, JPG, PNG, XLSX (max 8 MB)

Preparing locally ...

File ready locally!

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeFileUploadExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeFileUploadExample/></NativeScope>}

Validation

Configure accepted file types with allowedExtensions and the size ceiling with maxBytes. The component updates its own helper text and rejection message from those props.

usage

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeFileUpload} from '@helios-ui/react';
export function Example(){
const[fileName,setFileName]=useState('');
return <NativeScope><div><NativeFileUpload allowedExtensions={["pdf","png"]}maxBytes={2*1024*1024}onUploadComplete={file=>setFileName(file.name)}/>{fileName&&<output>{fileName} processed locally. No remote upload was made.</output>}</div></NativeScope>;
}

File icon

The built-in icon follows the selected extension. Use renderFileIcon when your product has its own file-type artwork or icon system.

usage

'use client';
import '@helios-ui/react/styles.css';
import {NativeScope,NativeFileUpload} from '@helios-ui/react';
export function Example(){

return <NativeScope><NativeFileUpload renderFileIcon={file=><span aria-hidden>{file.name.split(".").pop()?.toUpperCase()}</span>}/></NativeScope>;
}

Advanced playground, API and recovery states ↗

File Upload

A keyboard-accessible drag-and-drop upload surface with extension and file-size validation, an animated perimeter progress indicator, and a completion callback for connecting your own storage layer.

Drag and drop to upload or select

PDF, JPG, PNG, XLSX (max 8 MB)

Preparing locally ...

File ready locally!

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeFileUploadExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeFileUploadExample/></NativeScope>}

Validation

Configure accepted file types with allowedExtensions and the size ceiling with maxBytes. The component updates its own helper text and rejection message from those props.

usage

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeFileUpload} from '@helios-ui/react';
export function Example(){
const[fileName,setFileName]=useState('');
return <NativeScope><div><NativeFileUpload allowedExtensions={["pdf","png"]}maxBytes={2*1024*1024}onUploadComplete={file=>setFileName(file.name)}/>{fileName&&<output>{fileName} processed locally. No remote upload was made.</output>}</div></NativeScope>;
}

File icon

The built-in icon follows the selected extension. Use renderFileIcon when your product has its own file-type artwork or icon system.

usage

'use client';
import '@helios-ui/react/styles.css';
import {NativeScope,NativeFileUpload} from '@helios-ui/react';
export function Example(){

return <NativeScope><NativeFileUpload renderFileIcon={file=><span aria-hidden>{file.name.split(".").pop()?.toUpperCase()}</span>}/></NativeScope>;
}

Advanced playground, API and recovery states ↗

File Upload

Installation

Validation

File icon

Search Helios UI

File Upload

Installation

Validation

File icon

Search Helios UI