Merge pull request #53 from VeliovGroup/upload-configs

Added accept values to filter selectable files by type or extension on file select

Author: dr-dimitru

README.md

@@ -142,6 +142,35 @@ Generate the form with `{{> quickform}}` or `{{#autoform}}` e.g.:
 
 Autoform should be wrapped in `{{#if Template.subscriptionsReady }}` which makes sure that template level subscription is ready. Without it the picture preview won't be shown. You can see update mode example [here](https://github.com/VeliovGroup/meteor-autoform-file/issues/9).
 
+## Accept configuration
+
+### Usage
+
+You can configure the file selector, to only allow certain types of files using the `accept` property:
+
+```js
+Schemas.Posts = new SimpleSchema({
+  title: {
+    type: String,
+    max: 60
+  },
+  picture: {
+    type: String,
+    autoform: {
+      afFieldInput: {
+        type: 'fileUpload',
+        collection: 'Images',
+        accept: 'image/*' // or use explicit ext names like .png,.jpg
+      }
+    }
+  }
+});
+```
+
+The accept values works makes use of the native HTML `accept` attribute. Read more at the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers).
+
+Please read the section on **custom upload templates** and how to integrate configs like *accept* to your custom template.
+
 ## Multiple images
 
 Multiple images — __not fully supported yet__
@@ -191,13 +220,20 @@ Your custom file preview template data context will be:
 });
 ```
 
+```handlebars
+<template name="myFileUpload">
+  <a href="{{file.link}}">{{file.original.name}}</a>
+</template>
+```
+
 ## Custom upload template
 
 Your custom file upload template data context will be:
 
 - *file* - FS.File instance
 - *progress*
 - *status*
+- *config* an object containing several configs to upload behavior, such as `accept`
 - Other fields from [`FileUpload` instance](https://github.com/VeliovGroup/Meteor-Files/wiki/Insert-(Upload)#fileupload-methods-and-properties)
 
 ```js
@@ -216,11 +252,28 @@ Your custom file upload template data context will be:
 ```
 
 ```handlebars
-<template name="myFilePreview">
-  <a href="{{file.link}}">{{file.original.name}}</a>
+<template name="myFileUpload">
+  {{#with progress}}
+    <!-- if there is a progress present, we can use it to determine the upload progress -->
+    <progress value="{{this.get}}" max="100"></progress>
+  {{/with}}
+  {{#with file}}
+    <!-- if there is a file present, we have a file selected for upload -->
+    <span>Uploading {{this.name}}</span>
+  {{else}}
+     <!-- otherwise we provide the upload -->
+     <input data-files-collection-upload class="form-control af-file-upload-capture" type="file" accept="{{config.accept}}" />
+  {{/if}}
 </template>
 ```
 
+### Note on upload configs: 
+
+If you pass any config, like `accept` your upload data won't be falsey anymore,
+so you should update your template to the example above and check for each of the given properties.
+This is however backwards-compatible and will not break your older templates if you don't need any of the upload config
+introduced in > 2.1.4 releases.
+
 ## Support this project:
 
 - [Become a patron](https://www.patreon.com/bePatron?u=20396046) — support my open source contributions with monthly donation

lib/client/fileUpload.html

@@ -16,15 +16,15 @@
     {{/if}}
   {{else}}
     {{#if uploadTemplate}}
-      {{>Template.dynamic template=uploadTemplate data=currentUpload}}
+      {{>Template.dynamic template=uploadTemplate data=uploadTemplateData}}
     {{else}}
       {{#with currentUpload}}
         Uploading <b>{{file.name}}</b>:
         <progress value="{{progress.get}}" max="100"></progress>
         &nbsp;
         <span class="progress">{{progress.get}}%</span>
       {{else}}
-        <input data-files-collection-upload class="form-control af-file-upload-capture" type="file" />
+        <input data-files-collection-upload class="form-control af-file-upload-capture" type="file" accept="{{accept}}" />
       {{/with}}
     {{/if}}
   {{/with}}

lib/client/fileUpload.js

@@ -51,6 +51,7 @@ Template.afFileUpload.onCreated(function () {
 
   this.uploadTemplate  = this.data.atts.uploadTemplate || null;
   this.previewTemplate = this.data.atts.previewTemplate || null;
+  this.accept          = this.data.atts.accept || null;
   this.insertConfig    = Object.assign({}, this.data.atts.insertConfig || {});
   delete this.data.atts.insertConfig;
   this.insertConfig    = Object.assign(this.insertConfig, _.pick(this.data.atts, Object.keys(defaultInsertOpts)));
@@ -80,6 +81,20 @@ Template.afFileUpload.helpers({
   uploadTemplate() {
     return Template.instance().uploadTemplate;
   },
+  uploadTemplateData() {
+    const instance = Template.instance();
+    const currentUpload = instance.currentUpload.get();
+    const { accept } = instance;
+
+    // here we can check for upload template configs, that have been added after 2.1.4 and return either
+    // an object with "config" merged with "currentUpload" to stay backwards compatible as popssible
+    if (accept) {
+      const config = { config: { accept } };
+      return Object.assign({}, config, currentUpload);
+    } else {
+      return currentUpload;
+    }
+  },
   currentUpload() {
     return Template.instance().currentUpload.get();
   },
@@ -93,6 +108,9 @@ Template.afFileUpload.helpers({
       return null;
     }
     return template.collection.findOne({_id});
+  },
+  accept() {
+    return Template.instance().accept;
   }
 });