https://github.com/antoniosertic23/modern-file-uploader

This repository contains a modern file uploader application built using HTML, CSS, JavaScript, and PHP. The file uploader allows users to drag and drop files for upload or use a file selection dialog. It provides real-time progress updates, file upload cancellation, and displays upload status for each file.
https://github.com/antoniosertic23/modern-file-uploader

css3 drag-and-drop file-upload html5 javascript javascript-es6 php upload-progress

Last synced: about 1 month ago
JSON representation

This repository contains a modern file uploader application built using HTML, CSS, JavaScript, and PHP. The file uploader allows users to drag and drop files for upload or use a file selection dialog. It provides real-time progress updates, file upload cancellation, and displays upload status for each file.

• Host: GitHub
• URL: https://github.com/antoniosertic23/modern-file-uploader
• Owner: AntonioSertic23
• Created: 2024-06-23T17:59:18.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-06-23T18:00:45.000Z (6 months ago)
• Last Synced: 2024-06-23T19:21:43.006Z (6 months ago)
• Topics: css3, drag-and-drop, file-upload, html5, javascript, javascript-es6, php, upload-progress
• Language: JavaScript
• Homepage:
• Size: 39.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Modern File Uploader

A modern file uploader built with HTML, CSS, JavaScript, and PHP. This project allows users to upload files via drag-and-drop or file selection, displaying upload progress and status for each file.

## Table of Contents

- [Demo](#demo)

- [Features](#features)

- [Technologies](#technologies)

- [Setup](#setup)

- [Usage](#usage)

## Demo

![File Uploader Demo](file-uploader.png)

## Features

- Drag-and-drop file uploading

- File selection via file input

- Real-time upload progress and status

- Cancel upload functionality

- Responsive and accessible design

## Technologies

- HTML5

- CSS3

- JavaScript (ES6+)

- PHP

## Setup

To run this project locally, follow these steps:

1. **Clone the repository:**

   ```bash

   git clone https://github.com/yourusername/modern-file-uploader.git

   cd modern-file-uploader

   ```

2. **Install XAMPP or a similar environment:**

   Ensure you have XAMPP installed, which provides an Apache web server with PHP support. You can download XAMPP from [https://www.apachefriends.org/index.html](https://www.apachefriends.org/index.html).

3. **Set up the project in XAMPP:**

   - Navigate to your XAMPP installation directory and find the `htdocs` folder (e.g., `C:\xampp\htdocs` on Windows.

   - Copy the `modern-file-uploader` folder from step 1 into the `htdocs` directory.

4. **Start Apache server:**

   - Open XAMPP control panel and start the Apache server.

5. **Access the project:**

   - Open your web browser and navigate to `http://localhost/modern-file-uploader` to view the file uploader application.

## Usage

1. Open the file uploader in your browser.

2. Drag and drop files into the upload box or click the browse button to select files.

3. Monitor the upload progress and status for each file.

4. Cancel uploads if needed.

## Project Structure

```plaintext

modern-file-uploader/

├── uploads/              # Folder where uploaded files are stored

├── index.html            # Main HTML file

├── style.css             # CSS styles

├── script.js             # JavaScript code

└── api.php               # PHP backend script

```