Reset file field and clear canvas

android
images
#1

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;
}