initial push

js/add-image.js

@@ -0,0 +1,38 @@
+//Global Variable
+var imgBlob;
+var imgMimeType  
+
+// Create a hidden file input dynamically
+const fileInput = document.createElement('input');
+fileInput.type = 'file';
+fileInput.accept = 'image/*';
+fileInput.style.display = 'none';
+document.body.appendChild(fileInput);
+
+
+function uploadButtonHandler() {
+    fileInput.click();
+};
+
+fileInput.addEventListener('change', () => {
+    const imageDiv = document.querySelector('.popup .image');
+    const file = fileInput.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+        imageDiv.innerHTML = ''; // clear previous content
+        const img = document.createElement('img');
+        img.src = e.target.result;
+        img.alt = 'Uploaded Image';
+        img.style.width = '100%';
+        img.style.height = '100%';
+        img.style.objectFit = 'cover';
+        img.style.borderRadius = '10px';
+        imageDiv.appendChild(img);
+        // Use the original file as the blob and store its MIME type
+        imgBlob = file;
+        imgMimeType = file.type;
+    };
+    reader.readAsDataURL(file);
+});