Add reset / clear canvas link to imahe upload preview
I want to add a reset link to tis script that shows a thubnail preview of image upload, can ayone help 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;
- }