/nextjs-image-uploader

Upload files from your Next.js app to Cloudinary

Primary LanguageTypeScriptMIT LicenseMIT

NextJs Image Uploader

Description

This project was built to complete all the user stories listed or described by the challenge itself. Hence in this project, a user can:

  • Drag and drop an image to upload it
  • Choose to select an image from any folder
  • See a loader when uploading
  • Can see the uploaded image and copy it
  • Choose to copy to the clipboard

General

This application was built reflecting the MVC architecture and the main dependencies(all found in the package.json) of the application are organised as so:

  • Front-end User Interface(UI): Tailwindcss
  • File Storage: Not available

Other important services & dependency libraries of the application include:

  • react-dropzone: Simple React hook to create a HTML5-compliant drag'n'drop zone for files.
  • react-toastify: The React-Toastify package enables developers to add toast notifications to their applications and also can set notifications.
  • copy-to-clipboard: A copy to clipboard function.
  • axios: An http client to fetch urls and make api calls or requests to the Cloudinary API.

Getting started

  1. Clone this repository:
git clone https://github.com/kevin-sg/nextjs-image-uploader.git
  1. Next, you need to setup the .env file found in the root with the appropriate credentials from the following service providers:
NEXT_PUBLIC_CLOUDINARY_BASE_URL = https://api.cloudinary.com/v1_1/cloud_name/image/upload

NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET = cloud_preset
  1. Install all the dependency packages found in the package.json file:
#  ./nextjs-image-uploader
pnpm install
  1. To start the development server of the application:
pnpm dev

Author:

KevinSG

License

License: MIT

GitHub last commit GitHub contributors GitHub issues GitHub repo size