[Feature Request] File Uplaod

[scaki]

Is your feature request related to a problem? Please describe.

In today's online world, images, photos, avatars, text files are very important. It's a pity that the next ui library, which I love and enjoy using, doesn't have a file upload component. I hope it comes as soon as possible.

Describe the solution you'd like

• Ability to select the desired file format
• Ability to upload single or multiple files

Describe alternatives you've considered

Ant Design Upload

Screenshots or Videos

No response

[niklasp]

yeah that is missing badly. looks bad out of the box

[increff-hardik-chopra]

Is this feature being developed?
This is a critical feature that is missing in the library for quite a long now.

[increff-hardik-chopra]

@jrgarciadev Can you give some update for this feature?

[decahedron1]

Found myself wanting this feature too; here's something I quickly whipped up, maybe somebody can find it useful. It's a file upload button that also supports drag & drop, though this code can also be used as a starting point for other components like a drop box.

Implementation (CC0)

'use client';

import { Button, ButtonProps } from '@nextui-org/react';
import { useCallback, useRef, useState } from 'react';
import { twMerge } from 'tailwind-merge';

const isAllFiles = (dt: DataTransfer) =>
	dt.types.every(t => t === 'Files' || t === 'application/x-moz-file');
const doesAccept = (type: string, accept?: string) => {
	if (!accept) {
		return true;
	}
	
	const acceptList = accept.split(',').map(c => c.trim());
	let cond = false;
	for (const acceptor of acceptList) {
		if (acceptor.endsWith('*')) {
			cond ||= type.startsWith(acceptor.slice(0, -1));
		} else {
			cond ||= type === acceptor;
		}
	}
	return cond;
};
const isEventAllowed = <T extends HTMLElement>(e: React.DragEvent<T>, accept: string | undefined, multiple: boolean) => {
	if (!isAllFiles(e.dataTransfer)) {
		return false;
	}

	const items = Array.from(e.dataTransfer.items);
	if (items.length === 0 || (!multiple && items.length > 1)) {
		return false;
	}
	return items.every(c => doesAccept(c.type, accept));
};

export default function FileUploadButton(
	{ accept, onUpload, acceptProps = { color: 'primary' }, rejectProps = { color: 'danger' }, multiple = false, classNames, className, ...props }:
		ButtonProps & {
			classNames?: { wrapper?: string; button?: string; };
			onUpload?: (files: File[]) => void;
			acceptProps?: ButtonProps,
			rejectProps?: ButtonProps,
			accept?: string;
			multiple?: boolean;
		}
) {
	const inputRef = useRef<HTMLInputElement | null>(null);
	const [ acceptance, setAcceptance ] = useState<null | 'ACCEPT' | 'REJECT'>(null);
	const onDragEnter = useCallback((e: React.DragEvent<HTMLButtonElement>) => {
		if (isEventAllowed(e, accept, multiple)) {
			setAcceptance('ACCEPT');
		} else {
			setAcceptance('REJECT');
		}
	}, [ accept, multiple, setAcceptance ]);
	const onDragOver = useCallback((e: React.DragEvent<HTMLButtonElement>) => {
		e.preventDefault();
		if (isEventAllowed(e, accept, multiple)) {
			setAcceptance('ACCEPT');
		} else {
			setAcceptance('REJECT');
		}
	}, [ accept, multiple, setAcceptance ]);
	const onDragFinish = useCallback((e: React.DragEvent<HTMLButtonElement>) => {
		setAcceptance(null);
	}, [ setAcceptance ]);
	const onDrop = useCallback((e: React.DragEvent<HTMLButtonElement>) => {
		e.preventDefault();
		e.persist();
		e.stopPropagation();
		
		if (isEventAllowed(e, accept, multiple)) {
			const items = Array.from(e.dataTransfer.items);
			if (items.length) {
				onUpload?.(items.map(c => c.getAsFile()!));
			}
		}

		setAcceptance(null);
	}, [ accept, multiple, onUpload, setAcceptance ]);
	const onFileChosen = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
		onUpload?.(Array.from(e.target.files!));
	}, [ onUpload ]);
	const onButtonPress = useCallback(() => {
		inputRef.current?.click();
	}, [ inputRef ]);

	return <form className={classNames?.wrapper}>
		<label htmlFor='_upload'>
			<Button {...props}
				{...(acceptance === 'ACCEPT' ? acceptProps : acceptance === 'REJECT' ? rejectProps : {})}
				className={twMerge(
					className,
					classNames?.button,
					acceptance === 'ACCEPT'
						? acceptProps?.className
						: acceptance === 'REJECT'
							? rejectProps?.className
							: null
				)}
				onPress={onButtonPress}
				onDragEnter={onDragEnter}
				onDragOver={onDragOver}
				onDragEnd={onDragFinish}
				onDragLeave={onDragFinish}
				onDrop={onDrop}
			/>
		</label>
		<input
			type='file'
			role='presentation'
			name='_upload'
			ref={inputRef}
			onChange={onFileChosen}
			accept={accept}
			multiple={multiple}
			className='hidden'
		/>
	</form>;
}

Example usage:

<FileUploadButton
    size='lg'
    accept='image/*'
    startContent={<PiUploadSimpleBold />}
    rejectProps={{ color: 'danger', startContent: <PiXCircleBold /> }}
    onUpload={files => {
        console.log(files[0]);
    }}
>
    Upload
</FileUploadButton>

[dev-mayanktiwari]

bro where is this PiUploadSimpleBold and this PiXCircleBold coming from ?

[decahedron1]

@dev-mayanktiwari PiUploadSimpleBold and PiXCircleBold are Phosphor Icons available through react-icons, but you can of course use any icon library you like.

[zardoy]

Drag n drop is essential to have, but it would be also great to have a way to press CTRL+V when focused to paste the file from the buffer. Sometimes it's just easier to copy/paste the file instead of saving it into the filesystem and saw it implemented only once

[LarryTheFatCat]

+1
@zardoy definitely a good feature to implement, not a lot of component libraries do that (from what I'm aware of), definitely would be an awesome feature to have in this. You're awesome for creating this @decahedron1.

[iGmainC]

I want this

[thedevopsguyblog]

+1

[chintan-traitfit]

+1

[valerius21]

+1

[iskrenpanteleev]

+1

[LarryTheFatCat]

Has this been worked on at all anytime recently? Just curious... Though I think it's kind of funny NextUI doesn't have a file input system

[fourmatt]

+1

[ali-shafi-hff]

+1

[Arian94]

@jrgarciadev @wingkwong So? Are you gonna add this feat? I'm willing to develop it. Let me know what you think.

[wingkwong]

please ping me at discord. same account name.