File Uploader

The uploadFile function can be used to open a file uploader dialog. It supports the following features:

  • Upload from local device
  • Paste images from clipboard
  • Upload by URL
  • Upload by drag and drop
  • Media Library, Unsplash, and Excalidraw tabs, opted into via config and callbacks

uploadFile never calls any API directly. All host-side data fetching — including Unsplash search and Media Library listing — is delegated to callbacks you provide in the config, so this component stays backend-agnostic.

Usage

import { uploadFile } from '@hyvor/design/components';

async function handleUpload() {
	const file = await uploadFile({
		type: 'image', // 'audio'
		uploader: async (blob, name) => {
			// upload the blob to your server
			// return an object with a .url property

			return {
				url: 'https://example.com/path/to/uploaded/image.jpg'
			};
		}
	});
	
	if (file) {
		console.log('Uploaded file URL:', file.url);
	} else {
		console.log('Upload cancelled');
	}
}

Media Library, Unsplash & Excalidraw

These tabs are opt-in: each is shown only when the matching config option is provided. mediaLoad and unsplashSearch are callbacks the host app implements to fetch data from its own backend — this component never talks to an API directly. excalidraw is a boolean flag; when enabled, Excalidraw is loaded on demand directly in the browser (no dependency is installed for it), and the drawing is exported to an SVG blob that flows through the same uploader callback as any other upload.

import { uploadFile } from '@hyvor/design/components';

async function handleUpload() {
	const file = await uploadFile({
		type: 'image',
		uploader: async (blob, name) => {
			return { url: 'https://example.com/path/to/uploaded/image.jpg' };
		},

		// shows the "Media Library" tab; called to load a page of items
		mediaLoad: async (page, type) => {
			const items = await myApi.listMedia(page, type);
			return items; // return [] when there are no more
		},

		// shows the "Unsplash" tab (image type only); called on search
		unsplashSearch: async (search, page) => {
			// proxy the request through your own backend,
			// since Unsplash's API key must stay server-side
			return myApi.searchUnsplash(search, page);
		},

		// shows the "Excalidraw" tab (image type only)
		excalidraw: true
	});

	if (file) {
		console.log('Uploaded file URL:', file.url);
	}
}
HYVOR Logo