Загрузка файла в облако.  Изображение с сайта rawpixel.com на Freepik

Неудивительно, что сегодня уже загружен файл, независимо от того, исчезнет ли он через некоторое время или будет сохранен в онлайн-базе данных. Таким образом, стало необходимо создавать приложения, позволяющие загружать файлы. Используя серверную часть NextJs, можно реализовать это.

Эта статья состоит из двух частей. В первой части мы обсудим фронтенд, где поговорим о том, что делает наш проект и какие инструменты ему нужны. Затем вторая часть посвящена реализации загрузки изображений и видео в Cloudinary и сохранению данных в базе данных Xata.


Что мы строим

Проект представляет собой цифровую карточку для запоминания. Карточка помогает в изучении того, что человек хочет запомнить. У физической карточки есть лицевая и оборотная стороны; лицевая сторона обычно ставит вопрос, а обратная сторона обычно предлагает решение. Цифровая карточка позволяет нам добавлять изображения и видео, чтобы помочь нам лучше запомнить идею, код, национальный флаг и т. д.

Преимущества флэш-карты перечислены ниже.

  • Он помогает улучшить зрительную память.
  • Они способствуют скорости обучения и постоянно переносимы.
  • Для аббревиатур, математических формул, алгоритмических кодов и т. д. поучительны карточки.
  • Это доступно.


URL-адрес GitHub


Активный URL


Фронтенд

Интерфейсная часть нашей работы связана с тем, как мы взаимодействуем с нашим проектом, как видно из приведенного выше URL-адреса. Вот инструменты, используемые для интерфейса.

Инструменты внешнего интерфейса

С использованием npm i <tool_name> команда, мы можем установить их.

  • aos : используется для анимации карт при прокрутке приложения.
  • react-icons : это использовалось для отображения иконок в нашем проекте.
  • react-quill: для редактора WYSIWYG для добавления фронт а также назад содержание.
  • react-toastify: это использовалось для всплывающих уведомлений в нашем приложении.
  • Tailwind CSS: это основной CSS нашего приложения. Обратите внимание, что в проекте использовался другой пользовательский CSS. Посетите URL-адрес Github выше, чтобы увидеть все.

Логика внешнего интерфейса

Вот логика нашего приложения.

  • Пользователь регистрируется, используя учетные данные или поставщиков Github (электронная почта и пароль). Посмотрите на файл «pages/auth/signup» в URL-адресе Github.
  • После успешной регистрации пользователь перенаправляется на страницу входа «pages/auth/signin».
  • После успешного входа в систему пользователь может просматривать все карточки, сделанные другими пользователями.
  • Мы можем выбирать из таких вариантов, как создание карты, просмотр наших коллекций и карт, поиск карты по ее названию или категории, переключение между темными и светлыми настройками, как карта, и просмотр видео.
  • Название карты, категория, изображение, дополнительное видео, а также содержимое лицевой и обратной стороны должны быть добавлены до создания карты.
  • Пользователь может начать переворачивать карточки, чтобы попрактиковаться в запоминании, а фильмы и визуальные эффекты помогут ему развить память.
  • Пользователь, являющийся владельцем карты, может обновить или удалить карту после ее создания.
  • Пользователь может добавить в свою коллекцию только что сделанную открытку, щелкнув значок «Плюс», пока он не является ее владельцем.
  • Существует три варианта редактирования карты. У нас есть возможность обновить только изображение карты, видео или другую информацию.
  • Мы можем искать карту, введя ее название или категорию в поле поиска.

Ниже приведена высокоуровневая модель логики внешнего интерфейса:

HLM для проекта цифровых карточек

Посетите действующий URL-адрес выше, чтобы увидеть приложение.



Бэкэнд

Облачная установка и настройка

1. Установите Cloudinary

Запустите эту команду.

npm install cloudinary
Войти в полноэкранный режим

Выйти из полноэкранного режима

2. Создайте облачную учетную запись

Для продолжения нам нужно имя облака Cloudinary, ключ API и секрет API. Зайдите на сайт Cloudinary здесь чтобы получить эти три.

Нажмите на вкладку панели инструментов. Там мы найдем наш ключ API, секрет API и имя облака.

Получите имя облака, ключ API и секрет API нашей учетной записи Cloudinary

Нажмите на настройкизатем нажмите на загрузить. Там*,* вы можете иметь возможность добавлять пресеты.
Присвойте имени и папке значение «флэш карта” и нажмите «спасти».

Создайте пресет в Cloudinary

3. Добавьте детали Cloudinary в .env.local файл

Создать .env.local файл и добавьте следующее.

// .env.local
CLOUDINARY_API_KEY=<our_key>
CLOUDINARY_API_SECRET=<our_api_secret>
CLOUDINARY_NAME=<our_cloud_name>
Войти в полноэкранный режим

Выйти из полноэкранного режима

4. Создайте файл конфигурации Cloudinary

Создайте папку в корне нашего проекта с именем utils. Внутри него создайте файл cloudinary.js и добавьте следующий код.

Установка и настройка Xata

1. Создайте учетную запись Xata.

Нажмите это ссылка на сайт для создания учетной записи Xata.

2. Создайте базу данных и таблицы

Если мы не знакомы с Xata при создании таблиц, прочтите и посетите эти ссылки. а также https://xata.io/docs/quickstart/index. Теперь создайте базу данных с именем «тест» или же «флэш карта». После этого создайте следующие таблицы:

Таблица пользователей

Таблица пользователей

Карточный стол

Карточный стол

3. Установите базу данных Xata

Смотреть видео здесь и см. эту документацию по установке. Или же,

npm install -g @xata/cli
Войти в полноэкранный режим

Выйти из полноэкранного режима

  • Затем подключитесь к базе данных Xata:
xata auth login
Войти в полноэкранный режим

Выйти из полноэкранного режима

Мы выбираем «Создать новый ключ API в браузере», когда наш терминал предлагает нам. Это открывает браузер. Вводим имя нашего API-ключа.

Генерация ключа API для нашего интерфейса командной строки Xata

В случае успеха мы увидим это на странице браузера.

Успешная аутентификация Xata CLI

Сообщение «Все готово! теперь вы можете начать использовать xata» будет отображаться на нашем терминале.

  • Инициализируем наш проект с помощью Xata
xata init
Войти в полноэкранный режим

Выйти из полноэкранного режима

Мы выбираем следующее во время подсказок терминала;

  • Выберите существующую базу данных «test» или «flashcard».
  • Выберите «Создать код Javascript с модулями ES» для «Вы хотите использовать генерацию кода в нашем проекте».
  • Введите «utils/xata» для «Выберите выходной файл для генератора кода».
  • Выберите «нет» для «Вы хотите сгенерировать объявления TypeScript?».
  • Для «Выберите ветку разработки по умолчанию (запасную ветку)» выберите «основную».
  • Наконец, для «Вы хотите создать файл .gitignore и игнорировать файл .env?» выберите «да».

После этого мы должны увидеть сообщение «Все готово!»

Убедитесь, что выбрали utils/xata где будет находиться наш файл Xata Codegen. В случае успеха наша xata.js файл должен выглядеть так:

Загрузка изображений и видео

Поскольку это будет сделано на стороне сервера NextJs, необходимо установить следующие пакеты.

npm i bcrypt datauri multer next-auth next-connect
Войти в полноэкранный режим

Выйти из полноэкранного режима

  • bcrypt: это поможет в аутентификации, хешировании паролей и проверке.
  • datauri : поможет нам преобразовать проанализированные файлы (изображение и видео) в кодировку base 64.
  • multer : поможет нам разобрать тело запроса.
  • next-auth : это добавит аутентификацию.
  • next-connect: это поможет нам добавить Multer в качестве промежуточного программного обеспечения к обработчику маршрута.


Создать create-card.js файл

Мы должны создать карту для загрузки изображения и видео. Итак, создайте файл с именем create-card.js внутри api папка pages папка.

Это обработает любой запрос POST на /api/create-card.. Таким образом, интерфейс будет отправлять данные формы, включая изображение и видео, которые мы хотим загрузить.

  • Линия 1: мы импортируем пакет next-connnect .
  • Строка 9: мы создаем новый экземпляр Xata.
  • Строка 20: мы применяем промежуточное ПО Multer. Кефаль ПО промежуточного слоя гарантирует, что оно анализирует любые файлы, используя any() метод. И мы храним изображение и видео для каждой карты внутри переменных image а также video в строки 30 а также 31.
  • Строка 33: мы создаем datauri/parser instance для преобразования проанализированных файлов в файл кодировки base 64. Таким образом, мы можем загрузить изображение и видео, созданные в строки 40 а также 47 к облачному.
  • Строка 36-40: здесь мы конвертируем проанализированный файл изображения в кодировку base 64 для загрузки в Cloudinary. Это делается с помощью uploader.upload() метод Cloudinary SDK. Обратите внимание, что мы передали пресеты загрузки, flashcards, и вариант { resource_type: 'image' } сообщая Cloudinary, что это изображение, которое мы хотим загрузить. Этот метод возвращает ответ, включая URL-адрес нового созданного изображения, которое хранится в базе данных как image.
  • Строка 43-47: Такой же как Строка 36-40. Единственная разница в том, что на этот раз мы говорим Cloudinary, что это видео. { resource_type: 'video' }.
  • Линия 60-73: мы создаем новую карту, вызывая create() функция Xata и передача значений из внешнего интерфейса.

Посмотрите, что будет отправлено из интерфейса в линияс 115-126 ниже.

Обновление существующего изображения
Обновление существующего изображения в Cloudinary также означает обновление нашей карты. Создайте новый обработчик маршрута API с именем update-card-image.js.

Нет большой разницы с create-card.js.

  • Строка 17: мы сказали Multer, что он должен анализировать один файл с именем image. Это имя изображения данных формы из внешнего интерфейса.
  • Строка 37: мы удаляем существующий Cloudinary образ карты, вызывая Cloudinary destroy() метод. Этот метод требует только идентификатор изображения для удаления.
  • Строка 43: мы обновляем карту новым URL-адресом изображения, идентификатором и подписью.

Обновление существующего видео
Это то же самое, что и код выше. Мы создадим новый файл с именем update-card-video . Единственное отличие состоит в том, что на этот раз мы говорим Multer проанализировать файл с именем «видео» в строка 17. См. код ниже:


Удаление изображений и видео

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

  • Строки 21 и 26: мы называем Cloudinary destroy() методы и передали идентификатор изображения и идентификатор видео карты, которую мы хотим удалить.
  • Строка 30: мы вызываем delete() метод Xata, передав идентификатор карты, которую мы хотим удалить.


Вывод

В этой статье мы рассмотрели загрузку изображений и видео в Cloudinary с помощью NextJs Server Side и сохранение данных в базе данных с помощью Xata. Интерфейс и полный код предоставлены в разделе URL GitHub этой статьи. Еще раз, посетите здесь для живое приложение.