enterwell/wp-content/plugins/enterwell-prize/js/image-upload.js

jQuery( function ($) {
    'use strict';

    const form = $('.enterwell-prize__form');
    const imageInput = $('#image');
    const uploadLabel = $('.drop-zone__label');
    const dragLabel = $('.drop-zone__label-drag');
    const imageContainer = $('.image-container');
    const previewContainer = $('.image-container__preview');
    const previewImage = $('.preview-image');
    const droppedContent = $('.upload-icon, .support-notice');

    // Show a preview image of the file
    function showPreviewImage(fileOrUrl) {
        if (typeof fileOrUrl === 'string') {
            previewImage.attr('src', fileOrUrl);
        } else {
            // Read the file and create a Data URL for the preview image
            const reader = new FileReader();
            reader.onload = function(event) {
                previewImage.attr('src', event.target.result);
            };
            reader.readAsDataURL(fileOrUrl);
        }
    }

    // Handle the file upload
    function handleUpload(file) {
        const allowedTypes = ['image/png', 'image/jpg', 'application/pdf'];
        const errorMessage = $('<div>').addClass('error-message').text('Nedozvoljen format.');

        if (!allowedTypes.includes(file.type)) {
            // Display an error message and preview image
            imageContainer.addClass('has-error');
            if (!imageContainer.hasClass('dropped')) {
                droppedContent.hide();
            }
            showPreviewImage('wp-content/plugins/enterwell-prize/images/image-error-upload.png');
            previewContainer.find('figcaption').text('Prijenos nije uspio.');
            previewContainer.show();

            // Check if error message already exists and remove it
            if (imageContainer.parent().find('.error-message').length > 0) {
                imageContainer.parent().find('.error-message').remove();
            }
            imageContainer.parent('.image').append(errorMessage);
        } else {
            imageContainer.removeClass('has-error empty');
            imageInput.removeClass('has-error');
            imageInput.attr('value', 'uploaded');
            imageContainer.addClass('dropped');
            // Remove error message if present
            imageContainer.parent('.image').find('.error-message').remove();
            dragLabel.hide();
            droppedContent.hide();
            // Display the uploaded image and file name
            showPreviewImage(file);
            $('.preview-name').text(file.name);
            previewContainer.show();
        }
    }


    // Handle the file select event
    function handleFileSelect(event) {
        const file = this.files[0];
        handleUpload(file);
    }

    // Handle the file drop event
    function handleDrop(event) {
        event.preventDefault();
        imageContainer.removeClass('drag-over');
        form.removeClass('drag');
        uploadLabel.show();
        dragLabel.hide();
        droppedContent.hide();

        const file = event.originalEvent.dataTransfer.files[0];
        handleUpload(file);
        previewContainer.show();
    }

    // Handle the drag over event
    function handleDragOver(event) {
        event.preventDefault();
        event.stopPropagation();
        imageContainer.addClass('drag-over');
        form.addClass('drag');
        uploadLabel.hide();
        droppedContent.show();
        if (!imageContainer.hasClass('dropped') || imageContainer.hasClass('has-error')) {
            dragLabel.show();
            if (!imageContainer.hasClass('has-error')) {
                droppedContent.show();
            }
        }
        if (imageContainer.hasClass('has-error')) {
            previewContainer.hide();
            dragLabel.show();
        }
        if (imageContainer.hasClass('dropped')) {
            previewContainer.hide();
            dragLabel.show();
        }
    }

    function handleDragEnter(event) {
        event.preventDefault();
        imageContainer.addClass('drag-over');
    }

    // Handle the drag leave event
    function handleDragLeave(event) {
        if (!imageContainer.hasClass('drag-over')) {
            return;
        }

        // Ignore dragleave events when the mouse is over a child of imageContainer or droppedContent
        const relatedTarget = $(event.relatedTarget);
        if (relatedTarget.closest('.image-container, .upload-icon, .support-notice').length) {
            return;
        }
        event.preventDefault();
        imageContainer.removeClass('drag-over');
        if (!imageContainer.hasClass('dropped')) {
            uploadLabel.show();
            dragLabel.hide();
            droppedContent.show();
            if (imageContainer.hasClass('has-error')) {
                previewContainer.show();
                droppedContent.hide();
            }
        } else {
            uploadLabel.show();
            previewContainer.show();
            dragLabel.hide();
            droppedContent.hide();
        }
        form.removeClass('drag');
    }

    // Add event listeners
    imageInput.on('change', handleFileSelect);
    droppedContent.on('dragenter', handleDragEnter);
    imageContainer.on('dragover', handleDragOver);
    imageContainer.on('dragleave', handleDragLeave);
    imageContainer.on('drop', handleDrop);
});