Ineternet connection unavailable while uplaoding files

[amrutaranade]

Hello All,

I am facing this issue from last two days. What I am trying to achieve is when I hit submit button in my web page file uplaoding starts. While file uploading is going on consider internet goes OFF, in this scenario I want to alert my site user saying that "Internet connection Lost". Once it is back alert should say "Internet is back and file uploading is resumed" and dropzone should resume uplaoding.
Below is my entire code and out of it sending, error, queueComplete events are not getting invoked. A help here is highly appreciated.

<div>
                                                    <h1>File Upload</h1>
                                                    <div class="dropzone p-0" id="drop-zone">
                                                        <label for="file-input" class="file-drop-label" id="files-count">
                                                            <img src="/dist/assets/images/download.png" alt="">
                                                            Drop files here to upload
                                                        </label>
                                                        <input type="file" id="file-input" class="file-drop-input" multiple>
                                                        <input type="file" id="file-input-folder" class="file-drop-input" multiple webkitdirectory>
                                                        
                                                    </div>
                                                    <div id="connection-status" hidden>Checking connection...</div>
                                                    <button id="upload-btn" style="display: none">Upload</button>
                                                    <div id="file-list"></div>
                                                    <!-- <button id="confirm-upload">Confirm Upload</button> -->
                                                </div>
                                                <script>
                                                    function formatDate() {
                                                        // Create a new Date object from the date string
                                                        const date = new Date();
                                                        // Get the day, month, and year
                                                        const day = String(date.getDate()).padStart(2, '0'); // Ensure day is two digits
                                                        const month = String(date.getMonth() + 1).padStart(2, '0'); // Ensure month is two digits, getMonth() returns 0-11
                                                        const year = date.getFullYear();

                                                        // Get the hours and minutes
                                                        const hours = String(date.getHours()).padStart(2, '0'); // Ensure hours are two digits
                                                        const minutes = String(date.getMinutes()).padStart(2, '0'); // Ensure minutes are two digits
                                                        // Return the formatted date as dd-mm-yyyy
                                                        return `${day}/${month}/${year} - ${hours}:${minutes}`;
                                                    };
                                                   
                                                    document.addEventListener("DOMContentLoaded", () => {
                                                        const fileInput = document.getElementById("file-input");
                                                        const fileInputFolder = document.getElementById("file-input-folder");
                                                        const uploadBtn = document.getElementById("upload-btn");
                                                        const fileList = document.getElementById("file-list");
                                                        const filesCount = document.getElementById("files-count");
                                                        const dropZone = document.getElementById("drop-zone");
                                                        let filesArray = [];

                                                        //Below code will be come in picture when it will check for connection -- Start
                                                        setInterval(updateConnectionStatus, 3000);
                                                        var connectionStatus = document.getElementById('connection-status');
                                                        var uploadInProgress = false;

                                                        // Function to check the connection
                                                        function checkConnection() {
                                                            return new Promise((resolve) => {
                                                            if (navigator.onLine) {
                                                                // Try fetching a small image or resource to confirm the connection
                                                                fetch('/ping')
                                                                .then(() => resolve(true))
                                                                .catch(() => resolve(false));
                                                            } else {
                                                                resolve(false);
                                                            }
                                                            });
                                                        }

                                                        // Update the connection status
                                                        function updateConnectionStatus() {
                                                            checkConnection().then(isOnline => {
                                                            if (isOnline) {
                                                                connectionStatus.textContent = 'Connected';
                                                                if (uploadInProgress) {
                                                                    dropZone.processQueue(); // Resume the upload if it was paused
                                                                }
                                                            } else {
                                                                connectionStatus.textContent = 'Connection lost';
                                                                if (uploadInProgress) {
                                                                    dropZone.pause(); // Pause the upload
                                                                }
                                                            }
                                                            });
                                                        }

                                                       // Dropzone events using addEventListener
                                                        dropZone.addEventListener('sending', function(file) {
                                                            console.log("inside sending");
                                                            uploadInProgress = true;
                                                            updateConnectionStatus();
                                                        });

                                                        dropZone.addEventListener('error', function(file, errorMessage) {
                                                            console.log("inside error");
                                                            uploadInProgress = false;
                                                            console.log('Error during upload:', errorMessage);
                                                        });

                                                        dropZone.addEventListener('queuecomplete', function() {
                                                            console.log("inside queuecomplete");
                                                            uploadInProgress = false;
                                                        });

                                                        // Start upload manually when files are added
                                                        dropZone.addEventListener('addedfile', function(file) {
                                                            console.log("inside addedFile");
                                                            myDropzone.processQueue();
                                                        });
                                                        //Internet connection code ends here Ends

                                                        fileInput.addEventListener("change", (event) => {
                                                            handleFiles(event.target.files);
                                                        });

                                                        fileInputFolder.addEventListener("change", (event) => {
                                                            handleFiles(event.target.files);
                                                        });

                                                        uploadBtn.addEventListener("click", () => {
                                                            if (filesArray.length > 0) {
                                                                displayFiles(filesArray);
                                                                console.log("Files to upload:", filesArray);
                                                            } else {
                                                                alert("Please select files to upload");
                                                            }
                                                        });                                                        

                                                        dropZone.addEventListener("dragover", (event) => {
                                                            event.preventDefault();
                                                            dropZone.classList.add("dragover");
                                                        });

                                                        dropZone.addEventListener("dragleave", () => {
                                                            dropZone.classList.remove("dragover");
                                                        });

                                                        dropZone.addEventListener("drop", (event) => {
                                                            event.preventDefault();
                                                            dropZone.classList.remove("dragover");
                                                            handleDrop(event.dataTransfer.items);
                                                        });

                                                        document.getElementById("confirm-upload").addEventListener("click", uploadFiles);

                                                        function handleFiles(files) {
                                                            filesArray = filesArray.concat(Array.from(files));
                                                            updateFilesCount();
                                                            displayFiles(filesArray);
                                                        }

                                                        function handleDrop(items) {
                                                            for (const item of items) {
                                                                const entry = item.webkitGetAsEntry();
                                                                if (entry.isFile) {
                                                                    handleFile(entry);
                                                                } else if (entry.isDirectory) {
                                                                    handleDirectory(entry);
                                                                }
                                                            }
                                                        }

                                                        function handleFile(fileEntry) {
                                                            fileEntry.file((file) => {
                                                                filesArray.push(file);
                                                                updateFilesCount();
                                                                displayFiles(filesArray);
                                                            });
                                                        }

                                                        function handleDirectory(directoryEntry) {
                                                            const reader = directoryEntry.createReader();
                                                            reader.readEntries((entries) => {
                                                                for (const entry of entries) {
                                                                    if (entry.isFile) {
                                                                        handleFile(entry);
                                                                    } else if (entry.isDirectory) {
                                                                        handleDirectory(entry);
                                                                    }
                                                                }
                                                            });
                                                        }

                                                        function updateFilesCount() {
                                                            if (filesArray.length > 1) {
                                                                filesCount.innerHTML = `<b>${filesArray.length} files uploaded</b>`;
                                                            } else {
                                                                filesCount.innerHTML = `<b>${filesArray.length} file uploaded</b>`;
                                                            }
                                                        }

                                                        function displayFiles(files) {
                                                            const htmlString = files.map((item, ind) => `
                                                                <div class="stat-row">
                                                                    <div class="d-flex align-items-center">
                                                                        <img src="/dist/assets/images/photo.png" alt="${item.name}" style="max-width: 50px; margin-right: 10px;">
                                                                        <div class="pl-2"><b>Description:</b> ${item.name}</div>
                                                                    </div>
                                                                    <div class="d-flex align-items-center">
                                                                        <div class="pr-4">
                                                                            <b>Uploaded:</b> ${formatDate(new Date())}
                                                                        </div>
                                                                        <button class="delete-btn" onclick="removeFile(${ind})">
                                                                            <img src="/dist/assets/images/delete.png" alt="Delete">
                                                                            Delete
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            `).join("");
                                                            fileList.innerHTML = htmlString;
                                                            filesCount.innerHTML = `<img src="/dist/assets/images/download.png" alt="">Drop files here to upload`;
                                                        }

                                                        window.removeFile = function(index) {
                                                            filesArray.splice(index, 1);
                                                            displayFiles(filesArray);
                                                            updateFilesCount();
                                                        };

                                                        async function uploadFiles() {
                                                            uploadInProgress = true;
                                                            $('#loading-screen').show(); // Show loader
                                                            const apiUrl = "{{route('upload')}}";
                                                            const formData = new FormData();

                                                            for (const file of filesArray) {
                                                                formData.append("file[]", file);
                                                            }
                                                            formData.append("patient_id", document.getElementById("patientId").value);
                                                            formData.append("folder_id", document.getElementById("folder_id").value);
                                                            formData.append("patient_consulatation_number", document.getElementById("patient_consulatation_number").value);

                                                            try {
                                                                const response = await fetch(apiUrl, {
                                                                    method: "POST",
                                                                    body: formData,
                                                                    headers: {
                                                                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                                                                    },
                                                                });
                                                                
                                                                if (response.ok) {
                                                                    window.location = "/patient_consultation_view/{{ $patientDetails->id}}";
                                                                } else {
                                                                    console.error("Failed to upload files");
                                                                }
                                                            } catch (error) {
                                                                console.error("An error occurred while uploading files");
                                                            }
                                                        };

                                                        function formatDate(date) {
                                                            const day = String(date.getDate()).padStart(2, '0');
                                                            const month = String(date.getMonth() + 1).padStart(2, '0');
                                                            const year = date.getFullYear();
                                                            return `${day}-${month}-${year}`;
                                                        }

                                                        function readFileAsBinary(file) {
                                                            return new Promise((resolve, reject) => {
                                                                const reader = new FileReader();

                                                                reader.onload = () => {
                                                                    resolve(reader.result);
                                                                };

                                                                reader.onerror = () => {
                                                                    reject(new Error("Failed to read file as binary"));
                                                                };

                                                                reader.readAsBinaryString(file);
                                                            });
                                                        }
                                                    });
                                                </script>