54 lines
2.3 KiB
TypeScript
Executable file
54 lines
2.3 KiB
TypeScript
Executable file
import React, { useRef } from 'react';
|
|
|
|
interface AssetUploadProps {
|
|
onFileUpload: (file: File) => void;
|
|
isLoading: boolean;
|
|
isUploadDisabled?: boolean;
|
|
}
|
|
|
|
export const AssetUpload: React.FC<AssetUploadProps> = ({ onFileUpload, isLoading, isUploadDisabled }) => {
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0];
|
|
if (file) {
|
|
onFileUpload(file);
|
|
}
|
|
};
|
|
|
|
const handleClick = () => {
|
|
fileInputRef.current?.click();
|
|
};
|
|
|
|
const isDisabled = isLoading || isUploadDisabled;
|
|
|
|
return (
|
|
<div className="flex flex-col items-center">
|
|
<input
|
|
type="file"
|
|
ref={fileInputRef}
|
|
onChange={handleFileChange}
|
|
className="hidden"
|
|
accept="image/png, image/jpeg, image/webp, image/gif, video/mp4, application/pdf"
|
|
disabled={isDisabled}
|
|
/>
|
|
<button
|
|
onClick={handleClick}
|
|
disabled={isDisabled}
|
|
title={isUploadDisabled ? "Please complete all selections above" : "Upload an asset for review"}
|
|
className="w-full bg-brand-light-blue text-brand-dark-blue font-bold py-3 px-6 rounded-full hover:bg-white transition-all duration-300 disabled:bg-gray-500 disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center"
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<svg className="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Processing...
|
|
</>
|
|
) : 'Upload Asset'}
|
|
</button>
|
|
<p className="text-xs text-gray-400 mt-4">Supports PNG, JPG, GIF, WEBP, MP4, PDF.</p>
|
|
</div>
|
|
);
|
|
};
|