Spaces:
Sleeping
Sleeping
File size: 2,634 Bytes
d0a1b70 38448fc c3e8f3d 38448fc 6b8f69a d0a1b70 38448fc 6b8f69a c3e8f3d 6b8f69a c3e8f3d d0a1b70 c3e8f3d d0a1b70 38448fc 26c4b30 38448fc 26c4b30 6b8f69a 26c4b30 6b8f69a 26c4b30 38448fc 26c4b30 6b8f69a f80b091 38448fc 973f0d8 38448fc 973f0d8 f80b091 c3e8f3d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
'use client';
import React, { useState } from 'react';
import useImageUpload from '../../lib/hooks/useImageUpload';
import { cn, fetcher } from '@/lib/utils';
import { SignedPayload, MessageBase, ChatEntity } from '@/lib/types';
import { useRouter } from 'next/navigation';
import Loading from '../ui/Loading';
import toast from 'react-hot-toast';
export interface ImageSelectorProps { }
type Example = {
url: string;
initMessages: MessageBase[];
};
const ImageSelector: React.FC<ImageSelectorProps> = () => {
const router = useRouter();
const [isUploading, setUploading] = useState(false);
const { getRootProps, getInputProps, isDragActive } = useImageUpload(
undefined,
async files => {
const formData = new FormData();
if (files.length !== 1) {
throw new Error('Only one image can be uploaded at a time');
}
setUploading(true);
const reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = async () => {
const { id, signedUrl, publicUrl, fields } = await fetcher<SignedPayload>('/api/sign', {
method: 'POST',
body: JSON.stringify({
fileType: files[0].type,
fileName: files[0].name,
}),
});
const formData = new FormData();
Object.entries(fields).forEach(([key, value]) => {
formData.append(key, value as string)
})
formData.append('file', files[0]);
const uploadResponse = await fetch(signedUrl, {
method: 'POST',
body: formData,
})
if (!uploadResponse.ok) {
toast.error(uploadResponse.statusText);
return;
}
const resp = await fetcher<ChatEntity>('/api/upload', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id,
url: publicUrl,
}),
});
setUploading(false);
if (resp) {
router.push(`/chat/${resp.id}`);
}
}
});
return (
<div
{...getRootProps()}
className={cn(
'dropzone border-2 border-dashed border-gray-400 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer',
isDragActive && 'bg-gray-500/50 border-solid',
)}
>
<input {...getInputProps()} />
<div className="text-gray-400 text-lg">
{isUploading ? (
<Loading />
) : (
'Drag or drop image here, or click to select images'
)}
</div>
</div>
);
};
export default ImageSelector;
|