[raw]
'use strict';
;( function( $, window, document, undefined ) { $(document).ready(function() {
// feature detection for drag&drop upload var originImageContainer = $(".image-match-container .image-match-origin-image"), imageMatchResultsContainer = $(".image-match-container .image-match-results"); var isAdvancedUpload = function() { var div = document.createElement( 'div' ); return ( ( 'draggable' in div ) || ( 'ondragstart' in div && 'ondrop' in div ) ) && 'FormData' in window && 'FileReader' in window; }(); var uploadingFileName = "";
// applying the effect for every form var $anotherSearch = $( '.another-search'); $( '.another-search h2 a').click(function(e){ $('.upload-box').show(); $anotherSearch.hide(); originImageContainer.hide(); originImageContainer.html(''); imageMatchResultsContainer.html(''); });
$( '.upload-box' ).each( function() { var $form = $( this ), $input = $form.find( 'input[type="file"]' ), $label = $form.find( 'label' ), $errorMsg = $form.find( '.box__error span' ), $restart = $form.find( '.box__restart' ), droppedFiles = false,
showFiles = function( files ) { uploadingFileName = files[ 0 ].name; };
// letting the server side to know we are going to make an Ajax request $form.append( '' );
// automatically submit the form on file select $input.on( 'change', function( e ) { showFiles( e.target.files );
$form.trigger( 'submit' );
});
// drag&drop files if the feature is available if( isAdvancedUpload ) { $form .addClass( 'has-advanced-upload' ) // letting the CSS part to know drag&drop is supported by the browser .on( 'drag dragstart dragend dragover dragenter dragleave drop', function( e ) { // preventing the unwanted behaviours e.preventDefault(); e.stopPropagation(); }) .on( 'dragover dragenter', function() // { $form.addClass( 'is-dragover' ); }) .on( 'dragleave dragend drop', function() { $form.removeClass( 'is-dragover' ); }) .on( 'drop', function( e ) { droppedFiles = e.originalEvent.dataTransfer.files; // the files that were dropped showFiles( droppedFiles );
$form.trigger( 'submit' ); // automatically submit the form on file drop
}); }
// if the form was submitted
$form.on( 'submit', function( e ) { originImageContainer.html(''); originImageContainer.hide(); imageMatchResultsContainer.html('');
var currentFileName = uploadingFileName; // preventing the duplicate submissions if the current one is in progress if( $form.hasClass( 'is-uploading' ) ) return false;
$form.addClass( 'is-uploading' ).removeClass( 'is-error' );
if( isAdvancedUpload ) // ajax file upload for modern browsers { e.preventDefault();
// gathering the form data var ajaxData = new FormData( $form.get( 0 ) ); if( droppedFiles ) { $.each( droppedFiles, function( i, file ) { ajaxData.append( $input.attr( 'name' ), file ); }); }
// ajax request $.ajax({ url: 'https://www.bellazon.com/image-match/upload-api.php', data: ajaxData, type: 'POST', processData:false, contentType:false, dataType: "json", success: function(data){ if (data.status == "ok") {
var resultString = ""; if (data.matches.length == 0) { resultString = "No images found"; } else if (data.matches.length == 1) { resultString = "1 image found"; } else if (data.matches.length > 1) { resultString = data.matches.length + " images found"; } $form.removeClass('is-uploading'); originImageContainer.show(); originImageContainer.html( '
dimension: ' + data.width + 'x' + data.height + '
' + '
' + '
' + resultString + '
' + '
Searched over 5 million images.
' + '
for: ' + currentFileName + '
' + '
'
);
jQuery.each(data.matches, function(){ var match = this; var matchContent = '
Score: ' + Math.floor(match.score) + '
' + '
' + '' + match.title + '
' + '
dimension: ' + match.width + 'x' + match.height + '
' + '
'; imageMatchResultsContainer.append(matchContent); });
$form.hide(); $anotherSearch.show();
} else { $form.removeClass('is-uploading'); $form.addClass( 'is-error' ); $form.show(); $anotherSearch.hide(); }
}, error: function() { $form.removeClass('is-uploading'); $form.addClass( 'is-error' ); $form.show(); $anotherSearch.hide(); } });
} });
// restart the form if has a state of error/success
$restart.on( 'click', function( e ) { e.preventDefault(); $form.removeClass( 'is-error is-success' ); $input.trigger( 'click' ); });
// Firefox focus bug fix for file input $input .on( 'focus', function(){ $input.addClass( 'has-focus' ); }) .on( 'blur', function(){ $input.removeClass( 'has-focus' ); }); }); });
})( jQuery, window, document );
[/raw]