Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ajay-dhangar/web-image-uploader
A web application for uploading and displaying images with dynamic styling. Built using HTML, EJS, CSS, JavaScript, Node.js, and Express. Includes features like image scaling, animations, and real-time updates.
https://github.com/ajay-dhangar/web-image-uploader
backend dynamic-styling ejs file-upload frontend image-upload
Last synced: 14 days ago
JSON representation
A web application for uploading and displaying images with dynamic styling. Built using HTML, EJS, CSS, JavaScript, Node.js, and Express. Includes features like image scaling, animations, and real-time updates.
- Host: GitHub
- URL: https://github.com/ajay-dhangar/web-image-uploader
- Owner: ajay-dhangar
- License: mit
- Created: 2024-02-03T05:36:25.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-02-03T14:28:07.000Z (11 months ago)
- Last Synced: 2024-12-06T22:52:19.001Z (19 days ago)
- Topics: backend, dynamic-styling, ejs, file-upload, frontend, image-upload
- Language: EJS
- Homepage: https://web-image-uploader.onrender.com/
- Size: 50.8 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Web Image Uploader
A web application for uploading and displaying images with dynamic styling. This project is built using HTML, CSS, JavaScript, Node.js, and Express. It includes features like image scaling, animations, and real-time updates.
## Features
- Image upload with dynamic styling
- Real-time display of uploaded images
- Responsive design for various devices
- Animated transitions and transformations
- Server-side handling of image uploads using Node.js and Express
- Utilizes Multer for file upload functionality
## Getting Started
https://github.com/Ajay-Dhangar/web-image-uploader/assets/99037494/610af4d6-f9e2-4ef3-86ac-1312de3dc7c5
### Prerequisites
- Node.js installed on your machine
- npm package manager
### Installation
**Forking the Project:** Fork the repository (click the 'Fork' button at the top right of the repository page).
**Clone your fork locally:**
1. Clone the repository:
```bash
git clone https://github.com/your-username/Web-Image-Uploader.git
```
2. Navigate to the project directory:
```bash
cd Web-Image-Uploader
```
3. Install dependencies:
```bash
npm install
```
4. Run the server:
```bash
node server.js
```
or
```bash
npm start
```
6. Open your browser and go to http://localhost:3000 to view the application.
## Usage
- Choose an image file using the "Choose Image" button.
- The selected image will be uploaded and dynamically displayed on the web page.
- Explore the animated transitions and transformations on hover.
## Contributing
Contributions are welcome! Please follow the [Contributing Guidelines](CONTRIBUTING.md).
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
- Special thanks to [Multer](https://www.npmjs.com/package/multer) for simplifying file uploads.
- Inspiration from various image upload and display projects on GitHub.
## Contact
For any inquiries, please contact [Ajay Dhangar](https://twitter.com/CodesWithAjay).