Merge pull request #1 from jevgenijsp/master

Added possibility to download file by URL

README.md

@@ -44,7 +44,8 @@ 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'
+    labelButtonDownloadItem: 'custom label', // by default 'Download file'
+    allowDownloadByUrl: false, // by default downloading by URL disabled
 });
 ```
 

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

@@ -9,12 +9,19 @@
 /**
  * Register the download component by inserting the download icon
  */
-const registerDownloadComponent = (item, el, labelButtonDownload) => {
+const registerDownloadComponent = (
+  item,
+  el,
+  labelButtonDownload,
+  allowDownloadByUrl
+) => {
   const info = el.querySelector('.filepond--file-info-main'),
     downloadIcon = getDownloadIcon(labelButtonDownload);
 
   info.prepend(downloadIcon);
-  downloadIcon.addEventListener('click', () => downloadFile(item));
+  downloadIcon.addEventListener('click', () =>
+    downloadFile(item, allowDownloadByUrl)
+  );
 };
 
 /**
@@ -30,18 +37,23 @@ const getDownloadIcon = labelButtonDownload => {
 /**
  * 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();
+const downloadFile = (item, allowDownloadByUrl) => {
+  // if client want to download file from remote server
+  if (allowDownloadByUrl && item.getMetadata('url')) {
+    location.href = item.getMetadata('url'); // full path to remote server is stored in metadata with key 'url'
+  } else {
+    // 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();
+  }
 };
 
 /**
@@ -71,7 +83,15 @@ const plugin = fpAPI => {
       }
 
       const labelButtonDownload = root.query('GET_LABEL_BUTTON_DOWNLOAD_ITEM');
-      registerDownloadComponent(item, root.element, labelButtonDownload);
+
+      const allowDownloadByUrl = root.query('GET_ALLOW_DOWNLOAD_BY_URL');
+
+      registerDownloadComponent(
+        item,
+        root.element,
+        labelButtonDownload,
+        allowDownloadByUrl
+      );
     };
 
     // start writing
@@ -94,7 +114,8 @@ const plugin = fpAPI => {
   // expose plugin
   return {
     options: {
-      labelButtonDownloadItem: ['Download file', Type.STRING]
+      labelButtonDownloadItem: ['Download file', Type.STRING],
+      allowDownloadByUrl: [false, Type.BOOLEAN]
     }
   };
 };

dist/filepond-plugin-get-file.js

@@ -18,11 +18,18 @@
   /**
    * Register the download component by inserting the download icon
    */
-  const registerDownloadComponent = (item, el, labelButtonDownload) => {
+  const registerDownloadComponent = (
+    item,
+    el,
+    labelButtonDownload,
+    allowDownloadByUrl
+  ) => {
     const info = el.querySelector('.filepond--file-info-main'),
       downloadIcon = getDownloadIcon(labelButtonDownload);
     info.prepend(downloadIcon);
-    downloadIcon.addEventListener('click', () => downloadFile(item));
+    downloadIcon.addEventListener('click', () =>
+      downloadFile(item, allowDownloadByUrl)
+    );
   };
   /**
    * Generates the download icon
@@ -38,17 +45,22 @@
    * 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();
+  const downloadFile = (item, allowDownloadByUrl) => {
+    // if client want to download file from remote server
+    if (allowDownloadByUrl && item.getMetadata('url')) {
+      location.href = item.getMetadata('url'); // full path to remote server is stored in metadata with key 'url'
+    } else {
+      // 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();
+    }
   };
 
   /**
@@ -78,7 +90,13 @@
         const labelButtonDownload = root.query(
           'GET_LABEL_BUTTON_DOWNLOAD_ITEM'
         );
-        registerDownloadComponent(item, root.element, labelButtonDownload);
+        const allowDownloadByUrl = root.query('GET_ALLOW_DOWNLOAD_BY_URL');
+        registerDownloadComponent(
+          item,
+          root.element,
+          labelButtonDownload,
+          allowDownloadByUrl
+        );
       }; // start writing
 
       view.registerWriter(
@@ -98,7 +116,8 @@
 
     return {
       options: {
-        labelButtonDownloadItem: ['Download file', Type.STRING]
+        labelButtonDownloadItem: ['Download file', Type.STRING],
+        allowDownloadByUrl: [false, Type.BOOLEAN]
       }
     };
   }; // fire pluginloaded event if running in browser, this allows registering the plugin when using async script tags

package.json

@@ -36,7 +36,7 @@
         "@babel/preset-env": "^7.4.2",
         "autoprefixer": "^9.5.0",
         "cssnano": "^4.1.10",
-        "node-sass": "^4.11.0",
+        "node-sass": "^4.12.0",
         "postcss-cli": "^6.1.2",
         "prettier": "^1.16.4",
         "rollup": "^1.7.0",