title: Angularjs Show Image preview only if selected file is image
body: <p>Here is my AngularJS code to show image preview when user selects the file</p>
  
  <pre><code>  &lt;form action="&lt;?php echo $this-&gt;getFormAction();?&gt;" id="contactproForm" method="post" ng-app="myApp" ng-controller="myCtrl" enctype="multipart/form-data"&gt;
  
       &lt;label for="file"&gt;&lt;?php echo Mage::helper('contactpro')-&gt;__('Attachment') ?&gt;&lt;/label&gt;
  
      &lt;div class="input-box"&gt;
         &lt;input  type="file" id="file" class="input-text" ngf-select ng-model="picFile" name="attachement" accept="image/png, image/jpeg, image/jpg, application/msword, application/vnd.ms-excel, application/pdf " /&gt;
      &lt;/div&gt;
  
      &lt;label for="file"&gt;&lt;?php echo Mage::helper('contactpro')-&gt;__('Image Preview') ?&gt;&lt;/label&gt;
      &lt;img ng-show="picFile[0] != null" ngf-src="picFile[0]" class="thumb"&gt;
  
     &lt;/form&gt;
  </code></pre>
  
  <p>This line is displaying thumb image preview when image is selected</p>
  
  <pre><code>   &lt;img ng-show="picFile[0] != null" ngf-src="picFile[0]" class="thumb"&gt;
  </code></pre>
  
  <p>Now problem is when I'm selecting the image, image thumb displays correctly but when I'm selecting pdf, doc or any other file format, it displays crack image thumb. How can I put some AngularJs condition here such that it should display image thumb only if image is selected, otherwise it displays nothing.</p>