feat: book create image upload

Author: agmmtoo

components/books/BookForm.tsx

@@ -33,10 +33,12 @@ import { Library } from '@/lib/types/library'
 import { useState, useEffect, useCallback } from 'react'
 import { Input } from '@/components/ui/input'
 import { Book } from '@/lib/types/book'
+import Image from 'next/image'
+import { ImageUploader } from '../common/ImageUploader'
 
 export type BookFormValues = Pick<
   Book,
-  'title' | 'author' | 'year' | 'code' | 'library_id'
+  'title' | 'author' | 'year' | 'code' | 'library_id' | 'cover'
 >
 
 type BookFormProps = {
@@ -70,6 +72,7 @@ const FormSchema = z.object({
       required_error: 'Please select the library.',
     })
     .uuid(),
+  cover: z.string().optional(),
 })
 
 export const BookForm: React.FC<BookFormProps> = ({
@@ -104,6 +107,8 @@ export const BookForm: React.FC<BookFormProps> = ({
     form.reset()
   }, [form])
 
+  const title = form.watch('title')
+
   return (
     <div className="grid place-items-center">
       <Form {...form}>
@@ -246,6 +251,37 @@ export const BookForm: React.FC<BookFormProps> = ({
             )}
           />
 
+          {initialData.cover && (
+            <Image
+              className="w-12 h-auto rounded col-span-2"
+              src={initialData.cover}
+              alt={initialData.title}
+              width={50}
+              height={50}
+            />
+          )}
+
+          {title && (
+            <FormField
+              control={form.control}
+              name="cover"
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>Cover Image URL</FormLabel>
+                  <FormControl>
+                    <ImageUploader
+                      {...field}
+                      imageName={title}
+                      value={field.value}
+                      onChange={field.onChange}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
           <Button type="reset" variant="ghost" onClick={onReset}>
             Reset
           </Button>

components/books/book-edit-form.tsx

@@ -11,6 +11,7 @@ export const BookEditForm: React.FC<{ book: BookDetail }> = ({ book }) => {
     year: book.year,
     code: book.code,
     library_id: book.library_id,
+    cover: book.cover,
   }
   //   const router = useRouter()
 

components/common/ImageUploader.tsx

@@ -0,0 +1,75 @@
+import { getUploadURL } from '@/lib/api/file'
+import { Input } from '../ui/input'
+import { useState } from 'react'
+import Image from 'next/image'
+
+export const ImageUploader: React.FC<
+  {
+    onChange: (path: string) => void
+    value?: string
+    imageName: string
+  } & Parameters<typeof Input>[0]
+> = ({ onChange, value, imageName, ...props }) => {
+  const [url, setUrl] = useState<string>('')
+  const [preview, setPreview] = useState<string>()
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onloadend = () => {
+        setPreview(reader.result as string)
+        onChange(imageName)
+      }
+      reader.readAsDataURL(file)
+      // upload file to url with PUT request
+      if (url) {
+        fetch(url, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': file.type,
+          },
+          body: file,
+        })
+          .then((response) => {
+            if (!response.ok) {
+              throw new Error('Failed to upload image')
+            }
+            return response.text()
+          })
+          .then((data) => {
+            console.log('Image uploaded successfully:', data)
+          })
+          .catch((error) => {
+            console.error('Error uploading image:', error)
+          })
+      }
+    }
+  }
+
+  const onClick = async () => {
+    const res = await getUploadURL({ name: imageName })
+    setUrl(res.url)
+  }
+
+  return (
+    <>
+      {preview && (
+        <Image
+          className="w-12 h-auto rounded col-span-2"
+          src={preview}
+          alt={imageName}
+          width={50}
+          height={50}
+        />
+      )}
+      <Input
+        type="file"
+        accept="image/*"
+        onClick={onClick}
+        onChange={handleFileChange}
+        value={''}
+      />
+    </>
+  )
+}

lib/api/file.ts

@@ -0,0 +1,17 @@
+import { BASE_URL } from '@/lib/api/common'
+
+const FILES_URL = `${BASE_URL}/files`
+
+export const getUploadURL = async (query: {
+  name: string
+}): Promise<{ url: string }> => {
+  const url = new URL(`${FILES_URL}/upload`)
+  Object.entries(query).forEach(([key, value]) => {
+    if (value) {
+      url.searchParams.append(key, String(value))
+    }
+  })
+
+  const response = await fetch(url.toString())
+  return response.json()
+}