I want to add a reset link/clear canvas function to the below script that shows a thumbnail preview of image upload/file field, can anyone helo please?:
function previewImage(el,widths,limit){
var files = el.files;
var wrap = el.parentNode;
var output = wrap.getElementsByClassName('imagePreview')[0];
var allowedTypes = ['JPG','JPEG','GIF','PNG','SVG','WEBP'];
output.innerHTML='Loading...';
var file = files[0];
var imageType = /image.*/;
// detect device
var device = detectDevice();
if (!device.android){ // Since android doesn't handle file types right, do not do this check for phones
if (!file.type.match(imageType)) {
var description = document.createElement('p');
output.innerHTML='';
description.innerHTML='<span class="KT_field_error" style="font-size:12px;font-weight:bold;">File format not accpeted. Allowed file types are '+allowedTypes.join(', ')+'</span>';
output.appendChild(description);
return false;
}
}
var img='';
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
output.innerHTML='';
var format = e.target.result.split(';');
format = format[0].split('/');
format = format[1].split('+');
format = format[0].toUpperCase();
// We will change this for an android
if (device.android){
format = file.name.split('.');
format = format[format.length-1].split('+');
format = format[0].toUpperCase();
}
var description = document.createElement('p');
description.innerHTML = '';
if (allowedTypes.indexOf(format)>=0 && e.total<(limit*1024*1024)){
for (var size in widths){
var image = document.createElement('img');
var src = e.target.result;
image.src = src;
image.width = widths[size];
image.title = 'Image preview '+widths[size]+'px';
output.appendChild(image);
}
}
if (e.total>(limit*1024*1024)){
description.innerHTML += '<span class="KT_field_error" style="font-size:12px;font-weight:bold;">Your image exceeds the file size limit of '+limit+'MB</span>';
}
output.appendChild(description);
};
})(img);
reader.readAsDataURL(file);
}
// Detect client's device
function detectDevice(){
var ua = navigator.userAgent;
var brand = {
apple: ua.match(/(iPhone|iPod|iPad)/),
blackberry: ua.match(/BlackBerry/),
android: ua.match(/Android/),
microsoft: ua.match(/Windows Phone/),
zune: ua.match(/ZuneWP7/)
}
return brand;
}