41 lines
1.4 KiB
JavaScript
41 lines
1.4 KiB
JavaScript
jQuery( document ).ready( function( $ ) {
|
|
|
|
var $dropZone = $('#pexpo-core-image-drop-zone');
|
|
var $fileInput = $('#pexpo-core-image-logo');
|
|
var $preview = $('#pexpo-core-image-preview');
|
|
var $dropText = $dropZone.find('.pexpo-core-image-drop-text');
|
|
|
|
// Add a class when a file is dragged over the box
|
|
$dropZone.on('dragover dragenter', function() {
|
|
$dropZone.addClass('is-dragover');
|
|
});
|
|
|
|
// Remove the class when the file leaves or is dropped
|
|
$dropZone.on('dragleave dragend drop', function() {
|
|
$dropZone.removeClass('is-dragover');
|
|
});
|
|
|
|
// Handle the file selection (Click or Drop)
|
|
$fileInput.on('change', function( event ) {
|
|
var file = event.target.files[0];
|
|
|
|
if ( file ) {
|
|
var reader = new FileReader();
|
|
|
|
reader.onload = function( e ) {
|
|
// Show the image preview
|
|
$preview.attr('src', e.target.result).css('display', 'block');
|
|
|
|
// Optional: Change the text inside the box
|
|
$dropText.text('Kép kiválasztva. Kattintson vagy húzzon ide egy újat a cseréhez.');
|
|
};
|
|
|
|
reader.readAsDataURL( file );
|
|
} else {
|
|
// Reset if user cancels
|
|
$preview.hide().attr('src', '');
|
|
$dropText.text('Húzza ide a képet, vagy kattintson a tallózáshoz');
|
|
}
|
|
});
|
|
|
|
}); |