This project is a simple image upload and preview application with dark and light theme support. It allows users to drag and drop an image file or browse files to upload. The app displays a loader while the image is being uploaded and provides options to copy the image URL or download the image once uploaded.
- Drag and drop or browse files to upload an image.
- Supports dark and light themes.
- Displays a loader while the image is being uploaded.
- Provides options to copy the image URL to the clipboard or download the image.
- Accessible and responsive design.
-
Clone the repository:
git clone https://github.com/amandaguan-ag/image-upload-app.git
-
Navigate to the project directory:
cd image-upload-app -
Install the dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to:
http://localhost:5173
-
Use the app to upload an image, toggle themes, and interact with the uploaded image.
This app is designed with accessibility in mind. Here are some of the accessibility features:
- Semantic HTML Elements: Used
<header>,<main>, and other semantic elements to provide meaningful structure. - ARIA Attributes: Added ARIA attributes like
aria-labelto enhance the app's accessibility for screen readers. - Improved Contrast: Ensured sufficient color contrast between text and background for better readability.
- Keyboard Navigation: All interactive elements are accessible via keyboard navigation.
- Focus Styles: Clear focus styles are provided for interactive elements to improve visibility for keyboard users.
- React: A JavaScript library for building user interfaces.
- CSS: For styling the components.
- FileReader API: To read the contents of files asynchronously.
- HTML5: For the app structure and semantics.
This project is licensed under the MIT License.
For any inquiries or feedback, please contact:
- Name: Amanda Guan
- Email: ag.amandaguan@gmail.com