hackpoint/plugin/hackpoint/js/component.js

function init_components_dropimage(input){

	if(input.data('picker')){
		var picker =  input.data('picker')
	}else{
		var picker = $('<div class="data-type-dropimage"><div class="dropimage-image"></div><input class="hidden" type="file"><div class="dropimage-edit" ><i class="fas fa-pencil-alt"></i></div></div>');
		input.after(picker);
		picker.find('.dropimage-image').append(input.detach());
		input.data('picker',picker).css('cursor','pointer');
	}

	var fileInput = picker.find('input');
	var imageInput = picker.find('.dropimage-image > img');

	
	fileInput.click(function(e){
		e.stopPropagation();
	});


	picker.click(function(e){

		e.preventDefault();
	
		fileInput.trigger('click');
		fileInput.change(function(){
			preloader(true);
			var file = fileInput.get(0).files[0];
			var reader  = new FileReader();
			reader.addEventListener("load", function () {
				
			    imageInput.attr('src',reader.result);
			    if(imageInput.attr('data-callback')!=""){
			    	var callback = imageInput.attr('data-callback');
			    	window[callback](picker,reader.result);
			    	preloader(false);
			    }

			}, false);
			reader.readAsDataURL(file);
		});
	});
	picker.on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
		   e.preventDefault();
		   e.stopPropagation();
	})
	picker.on('drop', function (e) {
		preloader(true);
		var droppedFiles = e.originalEvent.dataTransfer.files;
		var reader = new FileReader();
		   reader.readAsDataURL(droppedFiles[0]);
		   reader.onload = function () {
		   
		    input.attr('src',reader.result);
		    if(input.attr('data-callback')!=""){
			    var callback = input.attr('data-callback');
			    window[callback](input,reader.result);
			    preloader(false);
			 }
		   };
		   reader.onerror = function (error) {
		     console.log('Error: ', error);
		     preloader(false);
		   };

	});
}