66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
interface FileUploadProps {
|
|
name?: string;
|
|
multiple?: boolean;
|
|
accept?: string;
|
|
id?: string;
|
|
label?: string;
|
|
helperText?: string;
|
|
}
|
|
|
|
export function FileUpload(
|
|
{
|
|
name = "file-upload",
|
|
multiple = false,
|
|
accept = "image/*",
|
|
id,
|
|
label = "Photos (optional)",
|
|
helperText = "PNG, JPG, GIF up to 10MB each",
|
|
}: FileUploadProps,
|
|
) {
|
|
const inputId = id ?? `file-upload-${name}`;
|
|
return (
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">
|
|
{label}
|
|
</label>
|
|
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
|
|
<div class="space-y-1 text-center">
|
|
<svg
|
|
class="mx-auto h-12 w-12 text-gray-400"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
viewBox="0 0 48 48"
|
|
>
|
|
<path
|
|
d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
<div class="flex text-sm text-gray-600">
|
|
<label
|
|
for={inputId}
|
|
class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500"
|
|
>
|
|
<span>Upload photos</span>
|
|
<input
|
|
id={inputId}
|
|
name={name}
|
|
type="file"
|
|
class="sr-only"
|
|
multiple={multiple}
|
|
accept={accept}
|
|
/>
|
|
</label>
|
|
<p class="pl-1">or drag and drop</p>
|
|
</div>
|
|
<p class="text-xs text-gray-500">
|
|
{helperText}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|