2️⃣Работа с изображениями

При создании колоды, помимо названия карточки мы можем добавить картинку.

🔗 Методичка работа с файлами

• Для того чтобы загружать файлы используется input type="file"

Внесем изменения в компонент DeckDialog.tsx

export const DeckDialog = () => {

  const uploadHandler = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length) {
      const file = e.target.files[0]

      console.log('file: ', file)
    }
  }

  return (
    <Dialog {...dialogProps} onCancel={handleCancel} onConfirm={onSubmit} title={'Create new deck'}>
      <form className={s.content} onSubmit={onSubmit}>
        <input accept={'image/*'} onChange={uploadHandler} type={'file'} />
        /*...*/
      </form>
    </Dialog>
  )
}

В результате мы увидим выбранный файл

• Теперь данный файл нам необходимо отправить на сервер

Для этого запишем файл в локальный стейт и отправим при сабмите формы

DeckDialog.tsx

type Props = {
  defaultValues?: FormValues
  onConfirm: (data: { cover?: File | null } & FormValues) => void
} & Pick<DialogProps, 'onCancel' | 'onOpenChange' | 'open'>

export const DeckDialog = () => {
  const [cover, setCover] = useState<File | null>(null)

  const onSubmit = handleSubmit(data => {
    onConfirm({ ...data, cover })
    dialogProps.onOpenChange?.(false)
    reset()
  })

  const uploadHandler = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length) {
      const file = e.target.files[0]

      setCover(file)
    }
  }
}

decks.types.ts

В network мы увидим, что запрос успешно прошел, но cover пустой объект

• Это значит что мы не можем просто взять и передать File. Его необходимо модифицировать

decksService

const decksService = flashcardsApi.injectEndpoints({
  endpoints: builder => ({
    createDeck: builder.mutation<DeckResponse, CreateDeckArgs>({
      invalidatesTags: ['Decks'],
      query: body => {
        const { cover, isPrivate, name } = body

        const formData = new FormData()

        formData.append('name', name)

        if (isPrivate) {
          formData.append('isPrivate', isPrivate.toString())
        }
        
        if (cover) {
          formData.append('cover', cover)
        } 

        return {
          body: formData,
          method: 'POST',
          url: `v1/decks`,
        }
      },
    }),
  }),
})

Смотрим network

И если скопировать cover и вставить в браузере, то увидим изображение 🚀

• Теперь визуально отобразим полученный результат

Добавим колонку в таблицу и отбразим там картинку

import Logo from '@/assets/icons/person-outline'


const columns: Column[] = [
  {
    key: 'cover',
    title: 'Cover',
  },
  /*...*/
]

export const DecksTable = () => {
  /*...*/

  return (
    <Table>
      <TableHeader columns={columns} onSort={onSort} sort={sort} />
      <TableBody>
        {decks?.map(deck => (
          <TableRow key={deck.id}>
            <TableCell>
              {deck.cover && <img alt={'cover'} src={deck.cover} width={'30px'} />}
              {!deck.cover && <Logo />}
            </TableCell>
            
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Теперь картинки отображаются в таблице и при создании новой картинки, новая колода будет тображаться сразу с картинкой 🚀

• По аналогии реализуем обновление картинки

updateDeck: builder.mutation<DeckResponse, UpdateDeckArgs>({
  invalidatesTags: ['Decks'],
  query: ({ cover, id, isPrivate, name }) => {
    const formData = new FormData()

    if (name) {
      formData.append('name', name)
    }
    if (isPrivate) {
      formData.append('isPrivate', isPrivate.toString())
    }
    if (cover) {
      formData.append('cover', cover)
    } 

    return {
      body: formData,
      method: 'PATCH',
      url: `v1/decks/${id}`,
    }
  },
}),

Раз, два и работает обновление картинки 🚀

• Удаление картинки

Удалить картинку, это значит просто ее значит обновить ее с занулением. Поэтому немножко нужно модифицировать update 1. Добавим кнопку для удаления

 const removeCoverHandler = () => {
    setCover(null)
  }

<Button onClick={removeCoverHandler} type={'submit'}>
  Remove cover
</Button>

2. Модифицируем updateDeck

updateDeck: builder.mutation<DeckResponse, UpdateDeckArgs>({
  invalidatesTags: ['Decks'],
  query: ({ cover, id, isPrivate, name }) => {
    const formData = new FormData()

    if (name) {
      formData.append('name', name)
    }
    if (isPrivate) {
      formData.append('isPrivate', isPrivate.toString())
    }
    if (cover) {
      formData.append('cover', cover)
    } else if (cover === null) {
      formData.append('cover', '')
    }

    return {
      body: formData,
      method: 'PATCH',
      url: `v1/decks/${id}`,
    }
  },
}),

• Сделаем превью, для более удобного взаимодействия

type Props = {
  defaultValues?: { cover?: null | string } & FormValues
  onConfirm: (data: { cover?: File | null } & FormValues) => void
} & Pick<DialogProps, 'onCancel' | 'onOpenChange' | 'open'>

export const DeckDialog = () => {
 
  return (
    <Dialog {...dialogProps} onCancel={handleCancel} onConfirm={onSubmit} title={'Create new deck'}>
      <form className={s.content} onSubmit={onSubmit}>
        {defaultValues?.cover && <img alt={'cover'} 
        src={defaultValues?.cover} width={'50px'} />}
      </form>
    </Dialog>
  )
}

Теперь при редактировании карточки мы видим картинки 🚀

• Но мы хоти еще больше. Хотим изменить картинку и сразу увидеть ее превью. Делаем следующее

• URL.createObjectURL()

• URL: revokeObjectURL()

export const DeckDialog = () => {
  const [cover, setCover] = useState<File | null>(null)
  const [preview, setPreview] = useState<null | string>('')

  useEffect(() => {
    if (defaultValues?.cover) {
      setPreview(defaultValues?.cover)
    }
  }, [defaultValues?.cover])

  useEffect(() => {
    if (cover) {
      // создать ссылку на файл
      const newPreview = URL.createObjectURL(cover)

      // зачищаем старое превью чтобы не хранилось в памяти
      if (preview) {
        URL.revokeObjectURL(preview)
      }
      setPreview(newPreview)

      // зачищаем новое превью чтобы не хранилось в памяти
      return () => URL.revokeObjectURL(newPreview)
    }
  }, [cover])

  return (
    <Dialog {...dialogProps} onCancel={handleCancel} onConfirm={onSubmit} title={'Create new deck'}>
      <form className={s.content} onSubmit={onSubmit}>
        {preview && <img alt={'cover'} src={preview} width={'50px'} />}
        /*...*/
      </form>
    </Dialog>
  )
}

Теперь при добавлении и редактировании картинки мы сразу видим результат.

• Удаление картинки

1. Сейчас при удалении картинки мы сабмитим форму. А давайте тоже просто будем убирать картинки, а сабмититть потом.

2. Кнопку удаления давайте показывать не всегда, а только когда у нас есть картинка

export const DeckDialog = () => {
  
  const removeCoverHandler = () => {
    setCover(null)
    setPreview(null)
  }

  return (
    <Dialog {...dialogProps} onCancel={handleCancel} onConfirm={onSubmit} title={'Create new deck'}>
      <form className={s.content} onSubmit={onSubmit}>
        {preview && <img alt={'cover'} src={preview} width={'50px'} />}

        <input accept={'image/*'} onChange={uploadHandler} type={'file'} />

        {preview && (
          <Button onClick={removeCoverHandler} type={'button'}>
            Remove cover
          </Button>
        )}

      </form>
    </Dialog>
  )
}

Сделали большую работу 🚀