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:
Mauro Mugnaini
parent
eb312590dc
commit
af0b191c5a
|
|
@ -84,31 +84,99 @@
|
|||
<strong>${msg("avatarFileTooBig")}</strong> ${msg("avatarFileSizeMessage")}
|
||||
</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}">
|
||||
|
||||
<div class="form-group">
|
||||
<div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
|
||||
<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>
|
||||
|
||||
<script>
|
||||
var uploadField = document.getElementById("avatar")
|
||||
function sendAvatar() {
|
||||
var dataurl = null;
|
||||
var filesToUpload = avatar.files;
|
||||
var file = filesToUpload[0];
|
||||
|
||||
uploadField.onchange = function() {
|
||||
let aiel = document.getElementById("avatarInfo")
|
||||
if(this.files[0].size > (100*1024)) {
|
||||
if (aiel) aiel.style.display='none'
|
||||
document.getElementById("avatarError").style.display='block'
|
||||
this.value = ""
|
||||
} else {
|
||||
if (aiel) aiel.style.display='block'
|
||||
document.getElementById("avatarError").style.display='none'
|
||||
// Create an image
|
||||
var img = document.createElement("img");
|
||||
// Create a file reader
|
||||
var reader = new FileReader();
|
||||
// Set the image once loaded into file reader
|
||||
reader.onload = function(e) {
|
||||
img.src = e.target.result;
|
||||
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
changeAvatarHtmlTitle=Edit Avatar
|
||||
noAvatarSet=Please upload an image (100x100px size is suggested) choosing a file and clicking on Save button.
|
||||
avatarFileSizeMessage=The maximum file size permitted is 100KB.
|
||||
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 1MB.
|
||||
avatarFileTooBig=File too big error!
|
||||
|
||||
deleteAccountHtmlTitle=Delete your Account
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
accountManagementTitle=D4Science Account Management
|
||||
|
||||
changeAvatarHtmlTitle=Modifica Avatar
|
||||
noAvatarSet=Caricare un'immagine (si consiglia una dimensione di 100x100 px) con Scegli file e premendo quindi su Salva
|
||||
avatarFileSizeMessage=La massima dimensione consentita del file è di 100KB.
|
||||
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 1MB.
|
||||
avatarFileTooBig=Dimensione file eccessiva!
|
||||
|
||||
deleteAccountHtmlTitle=Cancellazione Account
|
||||
|
|
|
|||
Loading…
Reference in New Issue