$(document).ready(function () { // Init $('.image-section').hide(); $('.loader').hide(); $('#result').hide(); // Upload Preview function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#imagePreview').css('background-image', 'url(' + e.target.result + ')'); $('#imagePreview').hide(); $('#imagePreview').fadeIn(650); } reader.readAsDataURL(input.files[0]); } } $("#imageUpload").change(function () { $('.image-section').show(); $('#btn-predict').show(); $('#result').text(''); $('#result').hide(); readURL(this); }); // Predict $('#btn-predict').click(function () { var form_data = new FormData($('#upload-file')[0]); // Show loading animation $(this).hide(); $('.loader').show(); // Make prediction by calling api /predict $.ajax({ type: 'POST', url: '/predict', data: form_data, contentType: false, cache: false, processData: false, async: true, success: function (data) { // Get and display the result $('.loader').hide(); $('#result').fadeIn(600); $('#result').text(' Result: ' + data); console.log('Success!'); }, }); }); });