Загрузка аватаров и печать документа в pdf

Продолжим серию видео по созданию приложения / SPA «Конструктор PDF резюме» на React с нуля. В этом видео / статье:

• сделаем загрузку аватаров;
• напишем превью для аваторв;
• сделаем компоненты Range;
• подключим svg иконки;
• сделаем печать pdf документа;

💭   Предисловие:

Это последнее видео в курсе, если вы хотите узнать больше про React + Mobx + REST Api, тогда буду ждать вас на полном курсе - React.js – «С нуля до про» там более сотни видеоуроков, домашки с подробным ревью и еще много всего интересного.

Если вы случайно зашли в это видео, тогда я бы посоветовал хотя бы посмотрите «демо» из курса по реакт+мобкс тк там есть весь базис реакта – от установки ноды и плагинов до полного понимания работы jsx. Иначе, не зная даже базиса, будет очень тяжело проходить текущий курс. Демо-доступ ни к чему не обязывает и полностью бесплатный. Получить демо доступ к полному курсу по реакту можно на промо-странице полного курса.

Загрузка аватаров в реакте

Для загрузки авторов мы может создать компонент AvatarUpload по типу:

const Avatar = ({ isSquare }) => {
  const [selectedFile, setSelectedFile] = React.useState(null)

  return (
    <Wrapper isSquare={isSquare}>
      <input
        id='Avatar'
        type='file'
        value=''
        onChange={(e) => setSelectedFile(e.target.files[0])}
      />
    </Wrapper>
  )
}

Создание preview для аватара

Для создание превью загруженного аватара нам поможет URL.createObjectURL.

URL.createObjectURL - берёт Blob и создаёт для него уникальный URL для него в формате blob: <origin>/<uuid>. Узнать больше можно в документации мозиллы.

Далее добавить эффект и следить за изменениями константы selectedFiles чтобы сделать превью автарки:

const [preview, setPreview] = React.useState(null)

  React.useEffect(() => {
    const objectUrl = selectedFile && URL.createObjectURL(selectedFile)
    setPreview(objectUrl)

    return () => URL.revokeObjectURL(objectUrl)
  }, [selectedFile])

Где return - это «чистка» созданного урла ибо иначе каждая генерация урла хранилась бы в браузере, что было бы не очень эффективно поэтому мы и делаем некий аналог «удаления мусора».

Чтобы создать «визуальное превью», воспользуемся label:

<label htmlFor='Avatar'>
  {preview ? (
    <div
      style={{
        backgroundImage: `url(${preview})`,
        backgroundSize: 'cover',
      }}
    />
  ) : (
    ‘Select file to upload’
  )}
</label>

Компонента Range:

Если честно, не хочется продолжать писать эту статью да и их никто не читает. Поэтому исходники проекта внизу страницы, а компонент Range будет выглядеть так:

import React from 'react'
import styled from 'styled-components'

const Wrapper = styled.div`
  display: inline-block;
  width: 33%;
  margin: 0.4rem 0;
`

const Input = styled.input`
  width: 97%;
  height: 6px;
  margin: 0 0.4rem;
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;

  &::-webkit-slider-runnable-track {
    background: #ddd;
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 40px;
    background: dodgerblue;
    box-shadow: -100vw 0 0 100vw dodgerblue;
    border: 1px solid #999;
  }
`

const Range = () => {
  const [value, setValue] = React.useState(90)
  return (
    <Wrapper>
      <p>Name - {value}</p>

      <Input
        type='range'
        min='0'
        max='100'
        step='10'
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </Wrapper>
  )
}

export default Range

Исходники курса

Демка приложения: https://tocoderu.github.io/react-cv-builder-tocode/

Это последнее видео в курсе поэтому исходники всего проекта вы можете скачать по ссылкам внизу:

• Полный плейлист этого курса доступен на ютубе
• Код из текущего видео можно скачать кликнув тут
• Исходный код и весь проект вы можете скачать на гитахбе буду рад вашей звездочке ✨

Всем удачи, увидимся в следующем курсе!