Reactjs Graphql Image Upload

React Image Upload with GraphQL

This is a demo project showcasing how to implement image uploads in a React application using TypeScript, Tailwind CSS, and GraphQL.

Features

• Single Image Upload: Upload a single image with a GraphQL API.
• Multiple Image Upload: Upload multiple images at once using the same GraphQL API.

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or later)
• Pnpm (v9 or older)
• NestJS GraphQL Image Upload (you can set this repo or connect to an existing one)

Clone the repository:

git clone https://github.com/Amit091/reactjs-graphql-image-upload.git
cd reactjs-graphql-image-upload

Project setup

pnpm install
# or
npm install

Setup and run the project

1. Ensure you have the GraphQL backend running.
2. Update graphql types and interfaces

   pnpm codegen
   #or
   npm run codegen
   

3. Start the development server

pnpm dev
#or
npm run dev

4. Open http://localhost:5173 to view the project in the browser.
5. You can now upload images to the GraphQL API.
6. Screenshot

References

This project was developed along with NestJS GraphQL Image Upload project.

Stay in touch

• Amit Dhoju
• Linkedin