how to resolve blob error while reading a file?

i am getting this error on uploading a file in the input text box.

Uncaught DOMException: Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading Blobs.

i have to upload the html file and preview the text in that file but while uploading it is throwing this error in the console. how to resolve this error. here is my javascript code--

>  $(".image-preview-input input:file").change(function (){    
>                   var file = this.files[0];
>                   var reader = new FileReader();
>                   var FileExtension = file.name.split('.')[file.name.split('.').length - 1].toLowerCase();
>                   if(FileExtension !== 'html'){
>                     $('#ValidationMessage').css("color", "red");
>                     $('#ValidationMessage').html("Please select the html extension file.");
>                     this.set('template','');  
>                     $('.image-preview-input input:file').val(""); 
>                   }
>                   // Set preview image into the popover data-content
>                   reader.readAsText(file);
>                   reader.onload = function (e) {                      
>                       $('#ValidationMessage').empty();
>                       $(".image-preview-input-title").text("Change");
>                       $(".image-preview-clear").show();
>                       $(".image-preview-filename").val(file.name);                      
>                       self.set('template',e.target.result);
>                   }    
>                   reader.readAsDataURL(file);
>               });