TEST.html

<script>
    function initializeViewer(imageSrc) {
        if (viewer) {
            viewer.destroy();
        }

        viewer = OpenSeadragon({
            id: "viewer",
            prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.0/images/",
            tileSources: {
                type: 'image',
                url: imageSrc || 'path_to_default_image_or_IIIF_source',
                buildPyramid: true,  // Enable pyramidal TIFF support
                tileSize: 256,       // Set tile size for pyramidal images
                crossOriginPolicy: 'Anonymous',
                formats: ["tiff", "jpeg", "jpg", "png"]  // Add TIFF support
            },
            showNavigationControl: false,
            maxZoomPixelRatio: 10,
            gestureSettingsMouse: {
                clickToZoom: false
            }
        });

        viewer.addHandler('zoom', function() {
            updateZoomLevel();
        });
    }

    document.getElementById('image-upload').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(event) {
                initializeViewer(event.target.result);
                displayFileName(file.name);
            };
            reader.readAsDataURL(file); // This will work for non-TIFF images.
        }
    });

    initializeViewer();
</script>