refactor function to upload image file to server

This commit is contained in:
Mike Ng
2018-06-04 10:14:28 +04:00
parent 275730c3fb
commit acefc8ab19

View File

@@ -44,10 +44,6 @@
$(this).closest('td').siblings().find('input').prop('checked', false); $(this).closest('td').siblings().find('input').prop('checked', false);
}); });
$("#general_personalize-logo-choice_personalizeLogoInput").change(function () {
readURL(this);
});
$("#download-image-template").on('click', function (event) { $("#download-image-template").on('click', function (event) {
event.preventDefault(); event.preventDefault();
var imageInBase64 = $('#original-image-placeholder').attr('src'); var imageInBase64 = $('#original-image-placeholder').attr('src');
@@ -69,56 +65,86 @@
return result; return result;
}; };
function readURL(input) { $("#setupForm").fileupload({
if (input.files && input.files[0]) { dataType: 'html',
var reader = new FileReader(); add: function (e, data) {
$.each(data.files, function (i, file) {
var reader = new FileReader();
reader.onload = function (e) { reader.readAsDataURL(data.files[0]);
var image = new Image(); reader.data = data;
image.src = e.target.result; reader.file = data.files[0];
//Validate the File Height and Width. reader.onload = function (_file) {
image.onload = function () { var image = new Image();
var height = this.height;
var width = this.width;
//check file extension image.src = _file.target.result;
var ext = $('#general_personalize-logo-choice_personalizeLogoInput').val().split('.').pop().toLowerCase(); image.file = this.file;
if (ext != 'png') { image.data = this.data;
$('#general_personalize-logo-choice_personalizeLogoInput').val(""); image.onload = function () {
$('#error-text').text(errorFileType); var w = this.width,
$('#error-text').show(); h = this.height;
$('#help-text').hide();
$('#personalize-image-container').hide(); var ext = this.file.type.split('/').pop().toLowerCase();
return false; if (ext != 'png') {
$('#general_personalize-logo-choice_personalizeLogoInput').val("");
$('#error-text').text(errorFileType);
$('#error-text').show();
$('#help-text').hide();
$('#personalize-image-container').hide();
return false;
}
if (h > 42 || w > 52) {
$('#error-text').text(errorDimension);
$('#error-text').show();
$('#help-text').hide();
$('#personalize-image-container').hide();
$('#general_personalize-logo-choice_personalizeLogoInput').val("");
return false;
}
require([
"blueimp.loadimage"
], function (loadImage) {
loadImage(file, function (img) {
$('#personalize-image-container').show();
$('#error-text').hide();
$('#help-text').hide();
$('#personalize-image-container').empty().append(img);
}, {
fileType: /^image\/(png)$/,
maxSize: 5242880, // 5MB
maxWidth: 52,
maxHeight: 42,
});
});
fileToUpload = this.data;
} }
}
//check dimensions });
if (height > 42 || width > 52) {
$('#error-text').text(errorDimension);
$('#error-text').show();
$('#help-text').hide();
$('#personalize-image-container').hide();
$('#general_personalize-logo-choice_personalizeLogoInput').val("");
return false;
}
fileToUpload = input.files[0]; return false;
$('#personalize-image-container').show(); },
$('#error-text').hide(); submit: function (e, data) {
$('#help-text').hide(); },
$('#personalise-image-placeholder').attr('src', e.target.result); done: function (e, data) {
return true;
};
}
reader.readAsDataURL(input.files[0]);
} }
} });
$("#submitSetupForm").bind('click', function () {
if (fileToUpload != null) {
fileToUpload.submit();
} else {
$("#setupForm").submit();
}
});
}); });
</script> </script>