https://github.com/tahsinzidane/file_uploader
**just collecting some backend complex code** A simple Express.js application that allows users to upload and display images. This project uses Multer for handling file uploads and serves uploaded images from a static directory
https://github.com/tahsinzidane/file_uploader
Last synced: 3 months ago
JSON representation
**just collecting some backend complex code** A simple Express.js application that allows users to upload and display images. This project uses Multer for handling file uploads and serves uploaded images from a static directory
- Host: GitHub
- URL: https://github.com/tahsinzidane/file_uploader
- Owner: tahsinzidane
- License: mit
- Created: 2024-09-13T06:06:27.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-13T06:21:21.000Z (9 months ago)
- Last Synced: 2025-01-20T15:18:15.995Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 475 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# file uploader
A simple Express.js application for uploading and displaying images. This project uses Multer for handling file uploads and serves uploaded images from a static directory.
## Features
- **File Upload:** Upload images through a form.
- **Image Display:** Automatically displays the uploaded image on the same page.
- **Static File Serving:** Serve uploaded files from a dedicated directory.
## Getting Started
### Prerequisites
- Node.js
- npm (Node Package Manager)
### Installation
1. **Clone the Repository**
```bash
git clone https://github.com/tahsinzidane/file_uploader.git
cd imageuploader
```
2. **Install Dependencies**
```bash
npm install
```
3. **Create an `uploads` Directory**
Make sure there is an `uploads` directory in the root of your project where files will be stored:
```bash
mkdir uploads
```
4. **Run the Application**
```bash
npm start
// or
npm run dev
```
The application will start on `http://localhost:3000`.
### Usage
1. Open your browser and navigate to `http://localhost:3000`.
2. Use the form to select and upload an image.
3. The uploaded image will be displayed on the same page.
### Project Structure
- `server.js` - The main server file that handles file uploads and serves static files.
- `views/index.ejs` - The EJS template for the upload form and image display.
- `public/css/style.css` - CSS styles for the application.
### Configuration
- **Port:** The application listens on port `3000`. You can change this by modifying the `port` variable in `server.js`.
### Troubleshooting
- **No File Uploaded Error:** Ensure that the file input in the form is correctly set and that you are submitting the form with a file selected.
- **Image Not Displayed:** Verify that the `uploads` directory is correctly served and that the file was uploaded with the correct filename.
### Preview
### License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.