Props

| Prop | Type | Default | Description | | ----------- | ----------------- | ------------ | ------------------------------------------------------------------ | | id | string | "dropzone" | Unique identifier for multiple dropzones | | uploadUrl | string \| false | Required | URL to upload files to. Set to false to disable automatic upload |

Examples

Basic Usage with Upload

function App() {
	return (
		<DropZone
			uploadUrl="https://your-api.com/upload"
			onUploadSuccess={(result) => {
				console.log("Uploaded file URL:", result.fileUrl)
			}}
		/>
	)
}

File Selection Only (No Upload)

function App() {
	return (
		<DropZone
			uploadUrl={false}
			setFile={(file) => {
				// Handle file manually
				console.log("Selected file:", file)
			}}
		/>
	)
}

Multiple Dropzones

function App() {
	return (
		<div className="grid gap-4">
			<DropZone
				id="profile-photo"
				title="Upload Profile Photo"
				accept="image/*"
				uploadUrl="https://your-api.com/upload"
				onUploadSuccess={(result) => {
					console.log("Profile photo:", result.fileUrl)
				}}
			/>

			<DropZone
				id="cover-photo"
				title="Upload Cover Photo"
				accept="image/*"
				uploadUrl="https://your-api.com/upload"
				onUploadSuccess={(result) => {
					console.log("Cover photo:", result.fileUrl)
				}}
			/>
		</div>
	)
}

Inside a Form

function App() {
	const handleSubmit = (e) => {
		e.preventDefault()
		// Handle form submission
		console.log("Form submitted")
	}

	return (
		<form onSubmit={handleSubmit}>
			<DropZone
				uploadUrl="https://your-api.com/upload"
				onUploadSuccess={(result) => {
					console.log("Uploaded file URL:", result.fileUrl)
				}}
			/>
			<button type="submit">Submit Form</button>
		</form>
	)
}