Update index.html

index.html

@@ -143,14 +143,13 @@
             text-align: center;
             cursor: pointer;
             transition: all 0.3s ease;
-            min-height: 140px; /* برای حفظ اندازه */
+            min-height: 140px;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
         }
         
-        /* ===== CHANGE HERE: Style for when image is previewed ===== */
         .file-upload.has-preview {
             padding: 5px;
             border-style: solid;
@@ -166,10 +165,9 @@
             left: -9999px;
         }
 
-        /* ===== CHANGE HERE: Style for the preview image ===== */
         .file-upload img {
             max-width: 100%;
-            max-height: 120px; /* Adjust as needed */
+            max-height: 120px;
             height: auto;
             border-radius: 8px;
             object-fit: contain;
@@ -337,7 +335,8 @@
             <div class="form-group">
                 <label class="label">تصویر QR کد را انتخاب کنید:</label>
                 <div class="file-upload" onclick="document.getElementById('file-input').click()">
-                    <input type="file" id="file-input" accept="image/*">
+                    <!-- ===== CHANGE HERE: The `accept` attribute is removed ===== -->
+                    <input type="file" id="file-input">
                     <div class="upload-content">
                         <div class="upload-icon">📷</div>
                         <div class="upload-text">انتخاب تصویر</div>
@@ -372,10 +371,8 @@
         const generateLoader = document.getElementById('generate-loader');
         const readLoader = document.getElementById('read-loader');
         
-        // ===== CHANGE HERE: Select file upload container and store its original state =====
         const fileUpload = document.querySelector('.file-upload');
         const uploadContent = document.querySelector('.upload-content');
-        const originalUploadHTML = fileUpload.innerHTML;
 
         // تعویض تب‌ها
         tabs.forEach(tab => {
@@ -389,31 +386,43 @@
             });
         });
 
-        // ===== CHANGE HERE: Rewritten logic for file selection and preview =====
         fileInput.addEventListener('change', () => {
             const file = fileInput.files[0];
             if (file) {
-                const reader = new FileReader();
-                reader.onload = function(e) {
-                    // Create an image element for preview
-                    const previewImage = document.createElement('img');
-                    previewImage.src = e.target.result;
-                    
-                    // Clear the upload box and show the preview
-                    uploadContent.style.display = 'none'; // Hide icon and text
-                    if(fileUpload.querySelector('img')) {
-                       fileUpload.querySelector('img').remove(); // Remove old preview if exists
+                // Check if the file is an image before creating a preview
+                if (file.type.startsWith('image/')) {
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        const previewImage = document.createElement('img');
+                        previewImage.src = e.target.result;
+                        
+                        uploadContent.style.display = 'none';
+                        if(fileUpload.querySelector('img')) {
+                           fileUpload.querySelector('img').remove();
+                        }
+                        fileUpload.appendChild(previewImage);
+                        fileUpload.classList.add('has-preview');
                     }
-                    fileUpload.appendChild(previewImage);
-                    fileUpload.classList.add('has-preview');
+                    reader.readAsDataURL(file);
+                } else {
+                    // If not an image, just show the file name
+                    uploadContent.style.display = 'block';
+                     if(fileUpload.querySelector('img')) {
+                        fileUpload.querySelector('img').remove();
+                    }
+                    fileUpload.classList.remove('has-preview');
+                    // Display file name instead of icon
+                    uploadContent.querySelector('.upload-icon').textContent = '📄';
+                    uploadContent.querySelector('.upload-text').textContent = file.name;
                 }
-                reader.readAsDataURL(file); // Read the file as a Data URL
             } else {
-                // If no file is selected, reset the view
+                // Reset if no file is selected
                 if(fileUpload.querySelector('img')) {
                     fileUpload.querySelector('img').remove();
                 }
                 uploadContent.style.display = 'block';
+                uploadContent.querySelector('.upload-icon').textContent = '📷';
+                uploadContent.querySelector('.upload-text').textContent = 'انتخاب تصویر';
                 fileUpload.classList.remove('has-preview');
             }
         });
@@ -484,6 +493,10 @@
                 alert("لطفاً یک تصویر انتخاب کنید.");
                 return;
             }
+            if (!file.type.startsWith('image/')) {
+                 alert("لطفاً یک فایل تصویری انتخاب کنید.");
+                 return;
+            }
             readLoader.style.display = 'block';
             decodedText.innerHTML = '';
             readBtn.disabled = true;
@@ -519,7 +532,7 @@
             }
         });
 
-        // Drag & Drop برای فایل
+        // Drag & Drop
         ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
             fileUpload.addEventListener(eventName, (e) => {
                 e.preventDefault();