Added image preview and the ability to remove existing file

cfs-autoform-hooks.js

@@ -183,8 +183,13 @@ Hooks = {
         CfsAutoForm.Util.deepDelete(doc,key);
       }
 
+      // If there are no files and if the user have clicked the remove link,
+      // remove the file
+      else if ( elem.data("remove") ) {
+        doc.$set[key] = '';
+
       // Otherwise it might be a multiple files field
-      else {
+      } else {
         var fileListList = elem.data("cfsaf_files_multi");
         if (fileListList) {
           //we delete the id only if we uploaded another file
@@ -207,7 +212,7 @@ Hooks = {
     if (totalFiles === 0) {
       return doc;
     }
-    
+
     // Create the callback that will be called either
     // upon file insert error or upon each file being uploaded.
     var doneFiles = 0;
@@ -249,7 +254,7 @@ Hooks = {
         }
       }
     }
-    
+
     // Loop through all hidden file fields, inserting
     // and uploading all files that have been attached to them.
     template.$('.cfsaf-hidden').each(function () {

cfs-autoform.css

@@ -1,8 +1,21 @@
 /* CSS declarations go here */
+
 .cfsaf-hidden {
-	display: none !important;
+  display: none !important;
 }
-
 .cfsaf-field {
-	cursor: pointer !important;
-}
+  cursor: pointer !important;
+}
+.af-file-preview {
+  width: 50%;
+  display: block;
+  border: 1px solid #ddd;
+  padding: 4px;
+  margin-bottom: 14px;
+}
+.input-cont {
+  display: flex;
+}
+.af-remove-file {
+  margin-right: 5px;
+}

cfs-autoform.html

@@ -1,9 +1,21 @@
 <template name="cfsFileField_bootstrap3">
-  <input type="file" class="cfsaf-hidden" data-cfs-collection="{{this.atts.collection}}" {{fileInputAtts}}>
-  <input type="text" readonly {{textInputAtts}}>
+  <input type="file" class="cfsaf-hidden" data-cfs-collection="{{this.atts.collection}}" data-remove="false" {{fileInputAtts}}>
+
+  <!-- Show the image preview only if the file is a image  -->
+  {{#if url}}
+    <img src="{{url}}" alt="Preview" class="af-file-preview">
+  {{/if}}
+
+  <!-- If there's a file attached show the remove link -->
+  <div class="input-cont">
+    {{#if available}}
+      <a href="#" class="af-remove-file btn btn-danger"><i class="fa fa-times"></i> Remove file</a>
+    {{/if}}
+    <input type="text" readonly {{textInputAtts}}>
+  </div>
 </template>
 
 <template name="cfsFilesField_bootstrap3">
   <input type="file" class="cfsaf-hidden" multiple data-cfs-collection="{{this.atts.collection}}" {{fileInputAtts}}>
   <input type="text" readonly {{textInputAtts}}>
-</template>
+</template>

cfs-autoform.js

@@ -17,7 +17,7 @@ if (Meteor.isClient) {
   AutoForm.addInputType("cfs-file", {
     template:"cfsFileField",
     valueOut: function () {
-      return "dummyId";
+      return 'dummyId';
     },
     contextAdjust: function (context) {
       context.atts.placeholder = context.atts.placeholder || "Click to upload a file or drop it here";
@@ -54,7 +54,45 @@ if (Meteor.isClient) {
 
   Template.cfsFileField_bootstrap3.helpers({
     textInputAtts: textInputAtts,
-    fileInputAtts: fileInputAtts
+    fileInputAtts: fileInputAtts,
+    value: function() {
+      var id = Template.currentData().value
+      if(id) {
+        return id
+      } else {
+        return null
+      }
+    },
+    available: function() {
+      // If there's a file attached
+      var id = Template.currentData().value
+
+      return id
+    },
+    url: function () {
+      // Get the id of the file
+      var id = Template.currentData().value
+
+      // If there's a file...
+      if (id) {
+        // Get the file and the file data
+        var collection = FS._collections[this.atts.collection]
+
+        var file = collection.findOne({ _id: id })
+        var fileType = file.type()
+
+        // If the file is a image return the url
+        if(fileType.match(/image/g)) {
+          return file.url()
+        } else {
+          return false
+        }
+      } else {
+        return false
+      }
+
+
+    },
   });
 
   Template.cfsFilesField_bootstrap3.helpers({
@@ -98,7 +136,19 @@ if (Meteor.isClient) {
       template.$('.cfsaf-hidden').click();
     },
     'change .cfsaf-hidden': singleHandler,
-    'dropped .cfsaf-field': singleHandler
+    'dropped .cfsaf-field': singleHandler,
+    'click .af-remove-file': function(event, template) {
+      // When the remove link is clicked...
+      event.preventDefault();
+
+      // Set the data attributes marking it for removal upon save
+      // Actual removing will happen only if saved through hooks
+      template.$('.cfsaf-hidden').data('remove', 'true');
+
+      // Remove the file preview and the remove link
+      template.$('.af-file-preview').fadeOut();
+      template.$(event.target).fadeOut();
+    }
   });
 
   var multipleHandler = function (event, template) {