🖼️ Modern Image Uploader

Fast, secure, and effortless image sharing - no sign-up required

---

✨ Features

• 📤 Instant Upload - Drag & drop or click to upload images effortlessly
• 🔗 Quick Sharing - Get shareable links instantly with one-click copying
• 👁️ Image Preview - Preview images before finalizing uploads
• 📱 Responsive Design - Works perfectly on desktop, tablet, and mobile devices
• 📊 Progress Tracking - Real-time progress indicators for each upload
• 📥 Multiple File Support - Upload multiple images simultaneously
• 🔒 Secure Storage - Images are stored securely on Cloudinary
• 💾 Local Gallery - View and manage your uploaded images even after page refresh

🚀 Tech Stack

React

TypeScript

Tailwind CSS

Go

Cloudinary

Docker

📷 Screenshots

  

🏗️ Architecture

The application follows a clean, simple architecture:

my-image-uploader/
├── frontend/             # React/TypeScript frontend
│   ├── src/              # Source code
│   ├── public/           # Static assets
│   └── ...               # Configuration files
├── server/               # Go backend API
│   ├── main.go           # Entry point
│   └── ...               # Additional modules
└── ...                   # Project files

🛠️ Installation & Setup

Prerequisites

• Node.js (v22+)
• Go (v1.24+)
• Cloudinary account (for image storage)
• Docker (optional, for containerized deployment)

Frontend Setup

# Navigate to frontend directory
cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

Backend Setup

The backend uses Go with Gin framework and Cloudinary for image storage.

# Navigate to server directory
cd server

# Install dependencies
go mod tidy

# Set up environment variables
# On Windows
set CLOUDINARY_CLOUD_NAME=your_cloud_name
set CLOUDINARY_API_KEY=your_api_key
set CLOUDINARY_API_SECRET=your_api_secret

# On Linux/Mac
export CLOUDINARY_CLOUD_NAME=your_cloud_name
export CLOUDINARY_API_KEY=your_api_key
export CLOUDINARY_API_SECRET=your_api_secret

# Run the Go server
go run main.go

Docker Deployment

You can easily deploy the application using Docker:

# Build the Docker image
docker build -t image-uploader .

# Run the container
docker run -p 8080:8080 \
  -e CLOUDINARY_CLOUD_NAME=your_cloud_name \
  -e CLOUDINARY_API_KEY=your_api_key \
  -e CLOUDINARY_API_SECRET=your_api_secret \
  image-uploader

Or use Docker Compose:

# Create a .env file with your Cloudinary credentials first
# Then run:
docker-compose up -d

CORS Configuration

The server includes CORS configuration to allow cross-origin requests. If you're experiencing CORS issues:

1. Ensure the frontend URL is added to the allowed origins in main.go:

router.Use(cors.New(cors.Config{
    AllowOrigins:     []string{"http://localhost:3000", "http://localhost:5173", "https://your-frontend-domain.com"},
    AllowMethods:     []string{"GET", "POST", "OPTIONS"},
    AllowHeaders:     []string{"Origin", "Content-Type", "Accept", "Authorization"},
    ExposeHeaders:    []string{"Content-Length"},
    AllowCredentials: true,
    MaxAge:           12 * 60 * 60,
}))

2. Restart the server after making changes.

🧩 How It Works

1. Upload - Drag and drop or select images from your device
2. Process - Images are processed and uploaded to Cloudinary via the Go backend
3. Share - Copy the generated links to share your images instantly
4. Manage - View your uploaded images in the gallery (persisted in localStorage)

🔮 Future Enhancements

• User accounts for persistent image management
• Image editing capabilities
• Custom link customization
• Album creation and organization
• Enhanced security features
• Support for additional file types

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

👨‍💻 Author

Mohammed Farhan - GitHub Profile

---

Made with ❤️ for the love of simple, effective solutions