var fileobj;
function file_dropped(e) 
{
        e.preventDefault();
        fileobj = e.dataTransfer.files[0];
        filename = e.dataTransfer.files[0].name;
        upload_file(fileobj,filename);
}

function file_explorer() {
        document.getElementById('uploadfile').click();
        document.getElementById('uploadfile').onchange = function()
        {
                fileobj = document.getElementById('uploadfile').files[0];
                filename = document.getElementById('uploadfile').files[0].name;
                upload_file(fileobj,filename);
        };
}

function copytoclipboard() 
{
        var elm = document.getElementById("divresponse");
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(elm);
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand("Copy");
}

function upload_file(file_obj, file_name) 
{
        const divresponse = document.getElementById('divresponse');
        divresponse.innerHTML = "Uploading file...";

        const copyToClipboard = document.getElementById('copytoclipboard');
        copyToClipboard.style.visibility = "hidden";

        const progressContainer = document.getElementById('progress-container');

        // Update progress bar
        const progressBar = document.getElementById('progress-bar');
        progressBar.value = 0;
        const progressText = document.getElementById('progress-text');
        progressText.innerText = "0%";
        progressContainer.style.display = ''; // <- become visible by style
        
        const request = async () => {
                // Create XMLHttpRequest for progress tracking
                const xhr = new XMLHttpRequest();
                
                
                // Track upload progress
                xhr.upload.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                                const percentComplete = Math.round((e.loaded / e.total) * 100);
                                
                                if (progressBar && progressText) {
                                        progressBar.value = percentComplete;
                                        progressText.innerText = percentComplete + '%';
                                }
                        }
                });
                
                // Handle completion
                xhr.addEventListener('load', function() {
                        if (xhr.status === 200) {
                                divresponse.innerHTML = xhr.responseText;
                                progressContainer.style.display = 'none';
                                copyToClipboard.style.visibility = 'visible';
                                
                                if (xhr.responseText.startsWith("http")) {
                                        var fturl = document.getElementsByTagName("fturl");
                                        Array.from(fturl).forEach(tag => tag.innerHTML = xhr.responseText);
                                }
                        } else {
                                divresponse.innerHTML = "Upload failed. Please try again.";
                        }
                });
                
                // Handle errors
                xhr.addEventListener('error', function() {
                        progressContainer.style.display = 'none';
                        divresponse.innerHTML = "Upload failed. Please try again.";
                });
                
                // Setup and send request
                xhr.open('PUT', '/index.php?name=' + encodeURIComponent(file_name));
                xhr.send(file_obj);
        }
        request();
}

function change_color_ondrag(event)
{
        if (event === "ondragenter") 
        {
                var element = document.getElementById('dragzone');
                element.classList.add("dragover");
        }
        else if (event === "ondragleave")
        {
                var element = document.getElementById('dragzone');
                element.classList.remove("dragover");
        }
}