Glassmorphic Upload System - Copy this Html, Bootstrap Component to your project
UI Overview: Progress Bar (Top): Position: Fixed at the very top of the window, running across the full width of the page. Style: A small, semi transparent bar with smooth transitions as uploads progress. The bar’s background will be a light, glassy color with a subtle shadow for depth. Function: The bar animates from left to right, showing the progress of the bulk upload. Once the upload is complete, it resets. Main Upload Container: Style: The main container has a Glassmorphism design with a frosted glass like background. A subtle box shadow around the container gives it depth and a modern feel. The background will have a transparent, blurred look using the backdrop filter: blur() CSS property. Contents: A Drag and Drop Zone in the center where users can drag multiple images at once. This area will also allow users to click to select files manually. The zone will have dashed borders and change colors slightly when files are dragged over it (for better interaction feedback). Hover Effect: When the user drags files over this area, the background will glow slightly or change color to signal that it is active. Latest Upload Preview: Style: This section is part of the main container but appears below the drop zone. It will have a transparent glass like effect and display a preview of the last uploaded image. The preview will be styled with a soft shadow and rounded corners for a sleek look. Contents: A thumbnail of the last uploaded image. A clickable URL link, with a Copy to Clipboard button for easy sharing. When the URL is copied, the button will change color (perhaps to a green checkmark) to confirm that the link has been successfully copied. Uploaded Images History: Style: Located below the latest upload preview. This section will also have a Glassmorphism design, with a semi transparent background and a smooth shadow around the edges. Contents: A vertical list of previously uploaded images. Each entry will have a small thumbnail and the file name, alongside a URL link that the user can copy. As new images are uploaded, the list updates dynamically, showing the latest uploads at the top. Key Interaction Features: Drag and Drop Bulk Upload: Users will be able to select and drag multiple images into the drop zone. Once images are dropped, the progress bar will animate, and each file will upload one by one, updating the preview section and the upload history in real time. Responsive Feedback: The drop zone will give immediate visual feedback when files are dragged over it (e.g., a color change or slight animation). The upload history will update dynamically without needing a page refresh. The copy button will visually indicate when the URL has been copied to the clipboard, making it user friendly. Glassy Look: The Glassmorphism effect will give the entire UI a modern, polished feel. This includes the blurred background, soft shadows, and transparent containers. The overall layout will feel light and airy, with all sections flowing in a top to bottom manner. Expected Look and Feel: Modern, sleek UI with a frosted glass appearance across the main areas. Subtle animations for interactions (hover effects, progress bar, etc.). Dynamic and responsive – no page reloads are needed, and everything updates in real time as images are uploaded. Clean design, allowing the user to focus on their uploads, while the UI enhances their experience without being overwhelming.
