diff --git a/components/uploadForm/app.js b/components/uploadForm/app.js new file mode 100644 index 0000000..ac05fd0 --- /dev/null +++ b/components/uploadForm/app.js @@ -0,0 +1,67 @@ +const dropArea = document.getElementById('drop-area'); +const fileInput = document.getElementById('file-input'); +const fileList = document.getElementById('file-list'); +const clearButton = document.getElementById('clear-button'); +let droppedFiles = []; + +// Function to display the list of selected or dropped files +function displayFileList(files) { + fileList.innerHTML = ''; // Clear previous file list + for (let i = 0; i < files.length; i++) { + const file = files[i]; + const listItem = document.createElement('div'); + listItem.textContent = file.name; + fileList.appendChild(listItem); + fileInput.value + } +} + +// Function to add files to the file input element +function addFilesToFileInput(files) { + for (let i = 0; i < files.length; i++) { + droppedFiles.push(files[i]); + } + // Create a new FileList (simulate it for the file input) + const dataTransfer = new DataTransfer(); + droppedFiles.forEach(file => dataTransfer.items.add(file)); + fileInput.files = dataTransfer.files; // Set new files to the file input +} + +// Add file input menu on click +dropArea.addEventListener('click', () => { + fileInput.click(); +}); + +// Show file list when files are selected via input +fileInput.addEventListener('change', (e) => { + displayFileList(e.target.files); +}); + +// Handle dropped files +dropArea.addEventListener('drop', (e) => { + e.preventDefault(); + addFilesToFileInput(e.dataTransfer.files); // Add dropped files to input + displayFileList(e.dataTransfer.files); +}); + +// Handle clear button +clearButton.addEventListener('click', () => { + fileList.innerHTML = ''; // Clear the list of files + droppedFiles = []; // Reset the dropped files array + fileInput.value = ''; // Reset the file input element +}); + +// Prevent default behavior for drag-and-drop +['dragenter', 'dragover'].forEach(event => { + dropArea.addEventListener(event, (e) => { + e.preventDefault(); + dropArea.classList.add('hover'); + }); +}); +// Prevent default behavior for drag-and-drop +['dragleave', 'drop'].forEach(event => { + dropArea.addEventListener(event, (e) => { + e.preventDefault(); + dropArea.classList.remove('hover'); + }); +}); diff --git a/components/uploadForm/index.html b/components/uploadForm/index.html new file mode 100644 index 0000000..c9782da --- /dev/null +++ b/components/uploadForm/index.html @@ -0,0 +1,39 @@ + + + + + + + + + Document + + + + +
+ +

File Upload

+

Attach the file(s) below

+ +
+ + Drag file(s) here to upload. +

Alternatively, you can select a file by clicking here

+ +
+ +
+ + + +
+
+ +
+ + + + + + \ No newline at end of file diff --git a/components/uploadForm/style.css b/components/uploadForm/style.css new file mode 100644 index 0000000..fde7e88 --- /dev/null +++ b/components/uploadForm/style.css @@ -0,0 +1,192 @@ +:root { +/* Font Sizes */ + --fs-100: 0.625rem; + --fs-200: 0.75rem; + --fs-300: 0.875rem; + --fs-400: 1rem; + --fs-500: 1.125rem; + --fs-600: 1.25rem; + --fs-700: 1.5rem; + --fs-800: 2.5rem; + --fs-900: 3.5rem; + + --fw-regular: 400; + --fw-semi-bold: 500; + --fw-bold: 700; + + /* Color variables */ + --clr-bg-ltheme: #edebe9; + --clr-text-ltheme: #1b1b1b; + --clr-accent-ltheme: #ff8000; + --clr-primary-ltheme: #d4d4d2; + --clr-secondary-ltheme: #babcbb; + --clr-link-ltheme: blue; + --clr-border-ltheme: blue; + + --clr-bg-dtheme: #121212; + --clr-text-dtheme: #edebe9; + --clr-accent-dtheme: #3a3b9c; + --clr-primary-dtheme: #1b1b1b; + --clr-secondary-dtheme: #2d2d2d; + --clr-link-dtheme: blue; + --clr-border-dtheme: blue; + + /* General Colors */ + --black: #000; /* Black */ + --white: #fff; /* White */ + --clr-000: #636363; + --clr-100: #5A5A5A; + --clr-200: #515151; + --clr-300: #484848; + --clr-400: #3F3F3F; + --clr-500: #363636; + --clr-600: #2D2D2D; + --clr-700: #242424; + --clr-800: #1B1B1B; + --clr-900: #121212; + + /* Semantic Colors */ + --clr-success: #118c11; + --clr-info: #17a2b8; + --clr-warning: #ff8000; + --clr-danger: #d00000; +} + +/* CSS Resets */ +*, *::before, *::after { + box-sizing: border-box; +} + +/* Remove default margins. */ +* { + margin: 0; + padding: 0; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +/* Make images easiser to work with. */ +img,picture,svg, video { +display: block; +max-width: 100%; +} + +/* Remove list styles (bullets/numbers) */ +ol, ul, menu { + list-style: none; +} + +/* Form elements inherit font styles. */ +input, textarea, button, select { + font: inherit; +} + +/* Motion Reducted Media Query */ +@media screen and + (prefers-reduced-motion: reduce), + (update: slow) { + * { + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + } +} + +/* Screen reader friendly hidden. */ +.visually-hidden:not(:focus):not(:active) { + border: 0; + clip: rect(0 0 0 0); + height: auto; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +} + +/* Body and core Themes */ + +body{ + display: grid; + min-width: 100vw; + min-height: 100vh; + align-items: start; + justify-items: center; + line-height: 1.5rem; + background-color: var(--clr-bg-ltheme); + color: var(--clr-text-ltheme); +} + +@media (prefers-color-scheme: dark) { + body{ + background-color: var(--clr-bg-dtheme); + color: var(--clr-text-dtheme); + } +} + +form{ + display: grid; + justify-items: center; + align-self: center; + width: 100%; +} + +#drop-area { + border: 2px dashed #ccc; + padding: 5rem; + margin: 2rem 0rem; + text-align: center; + display: grid; + width: 100%; + max-width: 450px; + justify-items: center; +} +#drop-area span{ + font-size: 2.25rem; + margin-bottom: .5rem; +} + + +#drop-area:hover{ + border-color: var(--clr-accent-dtheme); + +} + + +#file-list { + margin-top: 1rem; +} + +p{ + color: var(--clr-000) +} + +button[type=submit]{ + background-color: var(--clr-accent-dtheme); + border: none; + color: white; + padding: .5rem .75rem; + text-decoration: none; + margin: 4px 2px; + cursor: pointer; + border-radius: .25rem; +} +button span{ + font-size: 1.25rem; + margin-right: .35rem;; +} + +input[type=reset]{ + background-color: white; + border: none; + color: black; + padding: .5rem .75rem; + text-decoration: none; + margin: 4px 2px; + cursor: pointer; + border-radius: .25rem; +} \ No newline at end of file