Initial version

.gitignore

@@ -0,0 +1,3 @@
+npm-debug.log
+node_modules/
+.idea/

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Niels Boogaard
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,52 @@
+# Get File plugin for FilePond
+
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/nielsboogaard/filepond-plugin-get-file/blob/master/LICENSE)
+[![npm version](https://badge.fury.io/js/filepond-plugin-get-file.svg)](https://badge.fury.io/js/filepond-plugin-get-file)
+
+The Get File plugin will add a tiny 'download' icon in front of the filename to allow downloading the uploaded file.
+
+<img src="https://github.com/nielsboogaard/filepond-plugin-get-file/blob/master/demo.gif?raw=true" width="100%" alt=""/>
+
+
+## Quick Start
+
+Install using npm:
+
+```bash
+npm install filepond-plugin-get-file
+```
+
+Then import in your project:
+
+```js
+import * as FilePond from 'filepond';
+import FilePondPluginGetFile from 'filepond-plugin-get-file';
+```
+
+Register the plugin:
+```js
+FilePond.registerPlugin(FilePondPluginGetFile);
+```
+Create a new FilePond instance as normal.
+```js
+const pond = FilePond.create({
+    name: 'filepond'
+});
+
+// Add it to the DOM
+document.body.appendChild(pond.element);
+```
+ The functionality will become active after uploading a file.
+
+## Configuration
+
+The label of the download icon can be adjusted as follows:
+```js
+const pond = FilePond.create({
+    name: 'filepond',
+    labelButtonDownloadItem: 'custom label' // by default 'Download file'
+});
+```
+
+## Demo
+[View the demo](https://nielsboogaard.github.io/filepond-plugin-get-file/)

banner-cli.js

@@ -0,0 +1,8 @@
+const banner = require('./banner');
+const pkg = require('./package.json');
+const args = process.argv.slice(2);
+process.stdin.resume();
+process.stdin.setEncoding('utf8');
+process.stdin.on('data', function(data) {
+    process.stdout.write(banner({ id: args[0], ...pkg }) + data);
+});

banner.js

@@ -0,0 +1,8 @@
+module.exports = ({ id, version, license, homepage }) => `/*!
+ * ${ id } ${ version }
+ * Licensed under ${ license }, https://opensource.org/licenses/${ license }/
+ * Please visit ${ homepage } for details.
+ */
+
+/* eslint-disable */
+`;

dist/filepond-plugin-get-file.css

@@ -0,0 +1,30 @@
+/*!
+ * FilePondPluginmediaPreview 1.0.0
+ * Licensed under MIT, https://opensource.org/licenses/MIT/
+ * Please visit undefined for details.
+ */
+
+/* eslint-disable */
+.filepond--download-icon {
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  vertical-align: bottom;
+  margin-right: 0.5em;
+  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZG93bmxvYWQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iNyAxMCAxMiAxNSAxNyAxMCI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg==');
+  mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZG93bmxvYWQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iNyAxMCAxMiAxNSAxNyAxMCI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg==');
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+  background-color: #fff;
+  cursor: pointer;
+  pointer-events: auto;
+}
+.filepond--download-icon:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.filepond--magnify-icon:hover {
+  background: rgba(255, 255, 255, 0.5);
+}

dist/filepond-plugin-get-file.esm.js

@@ -0,0 +1,111 @@
+/*!
+ * FilePondPluginGetFile 1.0.0
+ * Licensed under MIT, https://opensource.org/licenses/MIT/
+ * Please visit undefined for details.
+ */
+
+/* eslint-disable */
+
+/**
+ * Register the download component by inserting the download icon
+ */
+const registerDownloadComponent = (item, el, labelButtonDownload) => {
+  const info = el.querySelector('.filepond--file-info-main'),
+    downloadIcon = getDownloadIcon(labelButtonDownload);
+
+  info.prepend(downloadIcon);
+  downloadIcon.addEventListener('click', () => downloadFile(item));
+};
+
+/**
+ * Generates the download icon
+ */
+const getDownloadIcon = labelButtonDownload => {
+  let icon = document.createElement('span');
+  icon.className = 'filepond--download-icon';
+  icon.title = labelButtonDownload;
+  return icon;
+};
+
+/**
+ * Triggers the actual download of the uploaded file
+ */
+const downloadFile = item => {
+  // create a temporary hyperlink to force the browser to download the file
+  const a = document.createElement('a');
+  const url = window.URL.createObjectURL(item.file);
+  document.body.appendChild(a);
+  a.style.display = 'none';
+  a.href = url;
+  a.download = item.file.name;
+  a.click();
+
+  window.URL.revokeObjectURL(url);
+  a.remove();
+};
+
+/**
+ * Download Plugin
+ */
+const plugin = fpAPI => {
+  const { addFilter, utils } = fpAPI;
+  const { Type, createRoute } = utils;
+
+  // called for each view that is created right after the 'create' method
+  addFilter('CREATE_VIEW', viewAPI => {
+    // get reference to created view
+    const { is, view, query } = viewAPI;
+
+    // only hook up to item view
+    if (!is('file')) {
+      return;
+    }
+
+    // create the get file plugin
+    const didLoadItem = ({ root, props }) => {
+      const { id } = props;
+      const item = query('GET_ITEM', id);
+
+      if (!item || item.archived) {
+        return;
+      }
+
+      const labelButtonDownload = root.query('GET_LABEL_BUTTON_DOWNLOAD_ITEM');
+      registerDownloadComponent(item, root.element, labelButtonDownload);
+    };
+
+    // start writing
+    view.registerWriter(
+      createRoute(
+        {
+          DID_LOAD_ITEM: didLoadItem
+        },
+        ({ root, props }) => {
+          const { id } = props;
+          const item = query('GET_ITEM', id);
+
+          // don't do anything while hidden
+          if (root.rect.element.hidden) return;
+        }
+      )
+    );
+  });
+
+  // expose plugin
+  return {
+    options: {
+      labelButtonDownloadItem: ['Download file', Type.STRING]
+    }
+  };
+};
+
+// fire pluginloaded event if running in browser, this allows registering the plugin when using async script tags
+const isBrowser =
+  typeof window !== 'undefined' && typeof window.document !== 'undefined';
+if (isBrowser) {
+  document.dispatchEvent(
+    new CustomEvent('FilePond:pluginloaded', { detail: plugin })
+  );
+}
+
+export default plugin;

dist/filepond-plugin-get-file.js

@@ -0,0 +1,118 @@
+/*!
+ * FilePondPluginGetFile 1.0.0
+ * Licensed under MIT, https://opensource.org/licenses/MIT/
+ * Please visit undefined for details.
+ */
+
+/* eslint-disable */
+
+(function(global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined'
+    ? (module.exports = factory())
+    : typeof define === 'function' && define.amd
+    ? define(factory)
+    : ((global = global || self), (global.FilePondPluginGetFile = factory()));
+})(this, function() {
+  'use strict';
+
+  /**
+   * Register the download component by inserting the download icon
+   */
+  const registerDownloadComponent = (item, el, labelButtonDownload) => {
+    const info = el.querySelector('.filepond--file-info-main'),
+      downloadIcon = getDownloadIcon(labelButtonDownload);
+    info.prepend(downloadIcon);
+    downloadIcon.addEventListener('click', () => downloadFile(item));
+  };
+  /**
+   * Generates the download icon
+   */
+
+  const getDownloadIcon = labelButtonDownload => {
+    let icon = document.createElement('span');
+    icon.className = 'filepond--download-icon';
+    icon.title = labelButtonDownload;
+    return icon;
+  };
+  /**
+   * Triggers the actual download of the uploaded file
+   */
+
+  const downloadFile = item => {
+    // create a temporary hyperlink to force the browser to download the file
+    const a = document.createElement('a');
+    const url = window.URL.createObjectURL(item.file);
+    document.body.appendChild(a);
+    a.style.display = 'none';
+    a.href = url;
+    a.download = item.file.name;
+    a.click();
+    window.URL.revokeObjectURL(url);
+    a.remove();
+  };
+
+  /**
+   * Download Plugin
+   */
+
+  const plugin = fpAPI => {
+    const { addFilter, utils } = fpAPI;
+    const { Type, createRoute } = utils; // called for each view that is created right after the 'create' method
+
+    addFilter('CREATE_VIEW', viewAPI => {
+      // get reference to created view
+      const { is, view, query } = viewAPI; // only hook up to item view
+
+      if (!is('file')) {
+        return;
+      } // create the get file plugin
+
+      const didLoadItem = ({ root, props }) => {
+        const { id } = props;
+        const item = query('GET_ITEM', id);
+
+        if (!item || item.archived) {
+          return;
+        }
+
+        const labelButtonDownload = root.query(
+          'GET_LABEL_BUTTON_DOWNLOAD_ITEM'
+        );
+        registerDownloadComponent(item, root.element, labelButtonDownload);
+      }; // start writing
+
+      view.registerWriter(
+        createRoute(
+          {
+            DID_LOAD_ITEM: didLoadItem
+          },
+          ({ root, props }) => {
+            const { id } = props;
+            const item = query('GET_ITEM', id); // don't do anything while hidden
+
+            if (root.rect.element.hidden) return;
+          }
+        )
+      );
+    }); // expose plugin
+
+    return {
+      options: {
+        labelButtonDownloadItem: ['Download file', Type.STRING]
+      }
+    };
+  }; // fire pluginloaded event if running in browser, this allows registering the plugin when using async script tags
+
+  const isBrowser =
+    typeof window !== 'undefined' && typeof window.document !== 'undefined';
+
+  if (isBrowser) {
+    document.dispatchEvent(
+      new CustomEvent('FilePond:pluginloaded', {
+        detail: plugin
+      })
+    );
+  }
+
+  return plugin;
+});