Javascript jQuery .change (); event. on Input [type = “file”]

I will give an example of a simple code.

<input type="file" name="file" id="input"> <button id="click">CLICK</button> <script> (function(){ var input = $('#input'), click = $('#click'); input.change( function() { click.click( function() { console.log('here'); } ); } ); })(); </script> 

The code is easy, everything is clear. I need to do when input.change () occurs; event to click. When you click on a click, naturally in this case, it will give console.log ('here'); 'here'. It seems that everything works, only when I select a file 1 time, but if I select a file 2 times and click on a click, then 2 clicks will appear in the console (2) here. How to make it 1 time? I gave a simple example to make it clear. And the production is a 400-line code, the purpose of which is to display it when you select a file, and after clicking on the button to load it, then when you select a file 2 times inside, everything happens 2 times, if 3 times then 3 times, etc. All selected files are downloaded.

thank

Production code:

 window.App.Module.Partial.Photo = { OBJ : { Window : {}, Document : {}, Body : {}, ProfilePhotoBox : {}, ProfilePhotoImage : {}, ProfilePhotoPreview : {}, PhotoSettingContainer : {}, PhotoSetting : {}, PhotoSettingBox : {}, ProgressBar : {}, ProfilePhotoUploadInput : {}, ProfilePhotoRenderContainer : {}, ProfilePhotoRenderBox : {}, ProfilePhotoRenderImage : {}, ProfilePhotoRenderLoader : {}, ProfilePhotoRenderCancel : {}, ProfilePhotoUploadForm : {}, PhotoDeleteForm : {}, }, Init : function() { this.OBJ.Window = window; this.OBJ.Document = document; this.OBJ.Body = $('body'); this.OBJ.ProfilePhotoBox = $('#profile-photo-box'); this.OBJ.ProfilePhotoImage = '#profile-photo-image'; this.OBJ.ProfilePhotoPreview = '#profile-photo-preview'; this.OBJ.PhotoSettingContainer = $('#photo-setting-container'); this.OBJ.PhotoSetting = '#photo-setting'; this.OBJ.PhotoSettingBox = '#photo-setting-box'; this.OBJ.ProgressBar = $('#progress-bar'); this.OBJ.ProfilePhotoUploadInput = '#profile-photo-upload-input'; this.OBJ.ProfilePhotoRenderContainer = '#profile-photo-render-container'; this.OBJ.ProfilePhotoRenderBox = '#profile-photo-render-box'; this.OBJ.ProfilePhotoRenderImage = '#profile-photo-render-image'; this.OBJ.ProfilePhotoRenderLoader = '#profile-photo-render-loader'; this.OBJ.ProfilePhotoRenderCancel = '#profile-photo-render-cancel'; this.OBJ.ProfilePhotoUploadForm = '#profile-photo-upload-form'; this.OBJ.PhotoDeleteForm = '#photo-delete-form'; this.SetProfileImage(); this.SetProfilePhotoBox(); }, SetProfileImage : function() { $(this.OBJ.ProfilePhotoImage).fadeIn(0); }, SetProfilePhotoBox : function() { this.ListenProfilePhotoBox(); }, ListenProfilePhotoBox : function() { var th = this, cache = false; this.OBJ.ProfilePhotoBox.click( function(event) { event.preventDefault(); if (cache) return; cache = true; $(this).blur(); th.SetPhotoSettingContainer(); setTimeout( function() { cache = false; }, 200 ); } ); }, SetPhotoSettingContainer : function() { this.GetPhotoSetting(); }, RemovePhotoSettingContainer : function() { this.RemoveProfilePhotoPreview(); this.RemovePhotoSetting(); this.RemoveBody(); }, SetPhotoSetting : function() { $(this.OBJ.PhotoSetting).fadeIn(80); this.SetBody(); this.SetProfilePhotoInputChange(); this.SetProfilePhotoDeleteForm(); }, GetPhotoSetting : function() { var th = this; new GET( { URL : this.OBJ.ProfilePhotoBox.prop('href'), GE1 : this.OBJ.PhotoSettingContainer, Loader : this.OBJ.ProgressBar, Callback : this.ListenPhotoSetting.bind(this) } ); }, RemovePhotoSetting : function() { $(this.OBJ.PhotoSetting).parent(this.OBJ.PhotoSettingContainer).html(''); }, ListenPhotoSetting : function() { this.SetPhotoSetting(); }, SetBody : function() { this.OBJ.Body.addClass('veil'); this.SetWindow(); }, RemoveBody : function() { $(this.OBJ.Body).removeClass('veil'); }, SetWindow : function() { this.ListenWindow(); }, ListenWindow : function() { var th = this; $(this.OBJ.Window).resize( function() { $(th.OBJ.PhotoSettingBox).css( { top: ( ($(this).outerHeight() / 2) - ($(th.OBJ.PhotoSettingBox).outerHeight() / 2) ) } ); } ); $(this.OBJ.Window).trigger('resize'); $(th.OBJ.Window).on('keyup.RemovePhotoSettingContainer', function(event) { if (event.which == 27) { th.RemovePhotoSettingContainer(event); $(this).off('click.RemovePhotoSettingContainer'); $(this).off('keyup.RemovePhotoSettingContainer'); } } ).on('click.RemovePhotoSettingContainer', function(event) { if ( $(event.target).closest($(th.OBJ.PhotoSettingBox)).length ) return; if ( $(event.target).closest($(th.OBJ.ProfilePhotoRenderContainer)).length ) return; th.RemovePhotoSettingContainer(event); $(this).off('click.RemovePhotoSettingContainer'); $(this).off('keyup.RemovePhotoSettingContainer'); } ); }, SetProfilePhotoInputChange : function() { this.ListenProfilePhotoInputChange(); }, ListenProfilePhotoInputChange : function() { var th = this; $(this.OBJ.ProfilePhotoUploadInput).click( function () { this.value = null; } ).change( function(event) { $(this).blur(); th.SetProfilePhotoRenderContainer(event); } ); }, SetProfilePhotoRenderContainer : function(event) { var th = this, photo = event.target.files[0]; if (!photo) { return new Message( { MSG : 'File is not found', Output : '#g-messages', Status : 'gm-error' } ); } if (photo.size > 1e+7) { return new Message( { MSG : 'File upload max size is 10 MB', Output : '#g-messages', Status : 'gm-error' } ); } $(this.OBJ.ProfilePhotoRenderContainer).fadeIn('slow'); $(this.OBJ.ProfilePhotoRenderLoader).fadeIn(0); this.SetProfilePhotoRender(photo); }, RemoveProfilePhotoRenderContainer : function() { this.RemoveProfilePhotoPreview(); $(this.OBJ.ProfilePhotoRenderContainer).fadeOut(0); $(this.OBJ.ProfilePhotoRenderImage).prop('src', ''); }, SetProfilePhotoRender : function(photo) { this.ListenProfilePhotoRender(photo); }, ListenProfilePhotoRender : function(photo) { var th = this, reader = new FileReader(), imageBase64 = ''; reader.onload = function(event) { imageBase64 = ( 'data:image/jpeg;base64,' + btoa(event.target.result) ); }; reader.readAsBinaryString(photo); setTimeout( function() { $(th.OBJ.ProfilePhotoRenderImage).prop('src', imageBase64); th.SetProfilePhotoRenderImageCropper(); $(th.OBJ.ProfilePhotoRenderLoader).fadeOut(0); }, 500 ); }, SetProfilePhotoRenderImageCropper : function() { $(this.OBJ.ProfilePhotoPreview).addClass('profile-photo-preview-visible'); $(this.OBJ.ProfilePhotoPreview).fadeIn(200); var cropper = new Cropper( this.OBJ.Document.querySelector(this.OBJ.ProfilePhotoRenderImage), { aspectRatio : 1 / 1, viewMode : 1, preview : this.OBJ.ProfilePhotoPreview } ); this.ListenProfilePhotoRenderImageCropper(cropper); }, RemoveProfilePhotoRenderImageCropper : function(cropper) { cropper.destroy(); }, ListenProfilePhotoRenderImageCropper : function(cropper) { var th = this; cropper.getCroppedCanvas( { fillColor : '#fff' } ).toBlob( function(fileBlob) { th.SetProfilePhotoUploadForm(fileBlob); }, "image/jpeg", 0.8 ); $(this.OBJ.ProfilePhotoRenderCancel).on('click.ProfilePhotoRenderCancel', function() { th.RemoveProfilePhotoRenderImageCropper(cropper); th.RemoveProfilePhotoRenderContainer(); $(this).off('click.ProfilePhotoRenderCancel'); } ); }, SetProfilePhotoUploadForm : function(fileBlob) { this.ListenProfilePhotoUploadForm(fileBlob); }, ListenProfilePhotoUploadForm : function(fileBlob) { var th = this; console.log(fileBlob); $(this.OBJ.ProfilePhotoUploadForm).on('submit.ProfilePhotoUploadForm', function(event) { event.preventDefault(); th.SetProfilePhotoUpload(this, fileBlob); $(this).off('submit.ProfilePhotoUploadForm'); } ); }, SetProfilePhotoUpload : function(form, fileBlob) { new Post( { Form : form, Loader : this.OBJ.ProgressBar, FilePhoto : fileBlob, PE1 : this.OBJ.ProfilePhotoBox, PE2 : this.OBJ.ProfilePhotoImage, Callback : this.ListenProfilePhotoUpload.bind(this), } ); }, ListenProfilePhotoUpload : function(response) { if (response.status === 'view') { this.RemovePhotoSettingContainer(); } }, RemoveProfilePhotoPreview : function() { if ($(this.OBJ.ProfilePhotoPreview).filter(':visible')) { $(this.OBJ.ProfilePhotoPreview).fadeOut(0).html(''); } if ($(this.OBJ.ProfilePhotoPreview).hasClass('profile-photo-preview-visible')) { $(this.OBJ.ProfilePhotoPreview).removeClass('profile-photo-preview-visible'); } }, SetProfilePhotoDeleteForm : function() { this.ListenProfilePhotoDeleteForm(); }, ListenProfilePhotoDeleteForm : function() { var th = this; $(this.OBJ.PhotoDeleteForm).submit( function(event) { event.preventDefault(); new Post( { Form : this, Loader : th.OBJ.ProgressBar, PE1 : th.OBJ.ProfilePhotoBox, PE2 : th.OBJ.ProfilePhotoImage, Callback : function(response) { if (response.status === 'view') { th.RemovePhotoSettingContainer(); } } } ); } ); } }