Removed max size for the avatar image but resizing it on the client to max 250px width or height if exceeding before sending to server
This commit is contained in:
parent
eb312590dc
commit
af0b191c5a
|
@ -84,31 +84,99 @@
|
||||||
<strong>${msg("avatarFileTooBig")}</strong> ${msg("avatarFileSizeMessage")}
|
<strong>${msg("avatarFileTooBig")}</strong> ${msg("avatarFileSizeMessage")}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input style="margin-top: 1em;" type="file" id="avatar" name="image">
|
<input style="margin-top: 1em;" type="file" id="avatar" name="imageSelector">
|
||||||
|
|
||||||
<input type="hidden" name="stateChecker" value="${stateChecker}">
|
<input type="hidden" name="stateChecker" value="${stateChecker}">
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
|
<div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
|
||||||
<div class="">
|
<div class="">
|
||||||
<button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="submitAction" value="Save">${msg("doSave")}</button>
|
<button type="button" onClick="sendAvatar()" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="submitAction" value="Save">${msg("doSave")}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var uploadField = document.getElementById("avatar")
|
function sendAvatar() {
|
||||||
|
var dataurl = null;
|
||||||
|
var filesToUpload = avatar.files;
|
||||||
|
var file = filesToUpload[0];
|
||||||
|
|
||||||
uploadField.onchange = function() {
|
// Create an image
|
||||||
let aiel = document.getElementById("avatarInfo")
|
var img = document.createElement("img");
|
||||||
if(this.files[0].size > (100*1024)) {
|
// Create a file reader
|
||||||
if (aiel) aiel.style.display='none'
|
var reader = new FileReader();
|
||||||
document.getElementById("avatarError").style.display='block'
|
// Set the image once loaded into file reader
|
||||||
this.value = ""
|
reader.onload = function(e) {
|
||||||
} else {
|
img.src = e.target.result;
|
||||||
if (aiel) aiel.style.display='block'
|
|
||||||
document.getElementById("avatarError").style.display='none'
|
img.onload = function () {
|
||||||
|
var canvas = document.createElement("canvas");
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
ctx.drawImage(img, 0, 0);
|
||||||
|
|
||||||
|
var MAX_WIDTH = 250;
|
||||||
|
var MAX_HEIGHT = 250;
|
||||||
|
var width = img.width;
|
||||||
|
var height = img.height;
|
||||||
|
|
||||||
|
if (width > height) {
|
||||||
|
if (width > MAX_WIDTH) {
|
||||||
|
height *= MAX_WIDTH / width;
|
||||||
|
width = MAX_WIDTH;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (height > MAX_HEIGHT) {
|
||||||
|
width *= MAX_HEIGHT / height;
|
||||||
|
height = MAX_HEIGHT;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canvas.width = width;
|
||||||
|
canvas.height = height;
|
||||||
|
ctx = canvas.getContext("2d");
|
||||||
|
ctx.drawImage(img, 0, 0, width, height);
|
||||||
|
|
||||||
|
dataurl = canvas.toDataURL("image/png");
|
||||||
|
|
||||||
|
var form = document.getElementById('theForm')
|
||||||
|
var formData = new FormData(form)
|
||||||
|
// Deleting the big image from the form data to prevent send
|
||||||
|
formData.delete('imageSelector')
|
||||||
|
// Adding new blob with new image with right size
|
||||||
|
formData.append("image", dataURItoBlob(dataurl));
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.onreadystatechange = function() {
|
||||||
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||||
|
location.reload();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.open(form.method, form.action, true);
|
||||||
|
xhr.send(formData);
|
||||||
|
} // img.onload
|
||||||
}
|
}
|
||||||
|
// Load files into file reader
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function dataURItoBlob(dataURI) {
|
||||||
|
// convert base64/URLEncoded data component to raw binary data held in a string
|
||||||
|
var byteString;
|
||||||
|
if (dataURI.split(',')[0].indexOf('base64') >= 0) {
|
||||||
|
byteString = atob(dataURI.split(',')[1]);
|
||||||
|
} else {
|
||||||
|
byteString = unescape(dataURI.split(',')[1]);
|
||||||
|
}
|
||||||
|
// separate out the mime component
|
||||||
|
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
|
||||||
|
|
||||||
|
// write the bytes of the string to a typed array
|
||||||
|
var ia = new Uint8Array(byteString.length);
|
||||||
|
for (var i = 0; i < byteString.length; i++) {
|
||||||
|
ia[i] = byteString.charCodeAt(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Blob([ia], {type:mimeString});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -6,8 +6,8 @@ authenticatorFinishSetUpMessage=Each time you sign in to your D4Science account,
|
||||||
authenticatorSMSMessage=D4Science will send the Verification code to your phone as the two-factor authentication.
|
authenticatorSMSMessage=D4Science will send the Verification code to your phone as the two-factor authentication.
|
||||||
|
|
||||||
changeAvatarHtmlTitle=Edit Avatar
|
changeAvatarHtmlTitle=Edit Avatar
|
||||||
noAvatarSet=Please upload an image (100x100px size is suggested) choosing a file and clicking on Save button.
|
noAvatarSet=Please upload an image (100x100px size is suggested, images exceding 250x250px will be resized to 250px width or height mantaining their ratio) choosing a file and clicking on Save button.
|
||||||
avatarFileSizeMessage=The maximum file size permitted is 100KB.
|
avatarFileSizeMessage=The maximum file size permitted is 1MB.
|
||||||
avatarFileTooBig=File too big error!
|
avatarFileTooBig=File too big error!
|
||||||
|
|
||||||
deleteAccountHtmlTitle=Delete your Account
|
deleteAccountHtmlTitle=Delete your Account
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
accountManagementTitle=D4Science Account Management
|
accountManagementTitle=D4Science Account Management
|
||||||
|
|
||||||
changeAvatarHtmlTitle=Modifica Avatar
|
changeAvatarHtmlTitle=Modifica Avatar
|
||||||
noAvatarSet=Caricare un'immagine (si consiglia una dimensione di 100x100 px) con Scegli file e premendo quindi su Salva
|
noAvatarSet=Caricare un'immagine (si consiglia una dimensione di 100x100 px, le immagini che eccedono 250x250px saranno ridimensionate a 250px di larchezza o altezza mantenendo il loro rapporto) con Scegli file e premendo quindi su Salva
|
||||||
avatarFileSizeMessage=La massima dimensione consentita del file è di 100KB.
|
avatarFileSizeMessage=La massima dimensione consentita del file è di 1MB.
|
||||||
avatarFileTooBig=Dimensione file eccessiva!
|
avatarFileTooBig=Dimensione file eccessiva!
|
||||||
|
|
||||||
deleteAccountHtmlTitle=Cancellazione Account
|
deleteAccountHtmlTitle=Cancellazione Account
|
||||||
|
|
Loading…
Reference in New Issue