add fallback for loading remote URLs instead of instantly throwing 40…

…0 automatically

CHANGELOG.md

@@ -1,10 +1,13 @@
 # Changelog
 
-## 4.17.2
+## 4.18.0
 
+- Add fallback for `fetch` when loading remote URLs, if no custom fetch supplied, will use default request.
+- Add TypeScript dynamic label types.
 - Fix issue where order of files wasn't correct when setting initial files.
 
 
+
 ## 4.17.1
 
 - Fix issue where reorder event was fired on each drag interaction, now only fires when order changes.

dist/filepond.css

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.17.1
+ * FilePond 4.18.0
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */

dist/filepond.esm.js

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.17.1
+ * FilePond 4.18.0
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -3997,7 +3997,7 @@ const getItemById = (items, itemId) => {
   return items[index] || null;
 };
 
-const fetchLocal = (url, load, error, progress, abort, headers) => {
+const fetchBlob = (url, load, error, progress, abort, headers) => {
   const request = sendRequest(null, url, {
     method: 'GET',
     responseType: 'blob'
@@ -4647,10 +4647,12 @@ const actions = (dispatch, query, state) => ({
       // this creates a function that loads the file based on the type of file (string, base64, blob, file) and location of file (local, remote, limbo)
       createFileLoader(
         origin === FileOrigin.INPUT
-          ? // input
+          ? // input, if is remote, see if should use custom fetch, else use default fetchBlob
             isString(source) && isExternalURL(source)
-            ? createFetchFunction(url, fetch) // remote url
-            : fetchLocal // local url
+            ? fetch
+              ? createFetchFunction(url, fetch)
+              : fetchBlob // remote url
+            : fetchBlob // try to fetch url
           : // limbo or local
           origin === FileOrigin.LIMBO
           ? createFetchFunction(url, restore) // limbo

dist/filepond.js

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.17.1
+ * FilePond 4.18.0
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -6378,7 +6378,7 @@
     return items[index] || null;
   };
 
-  var fetchLocal = function fetchLocal(
+  var fetchBlob = function fetchBlob(
     url,
     load,
     error,
@@ -7117,10 +7117,12 @@
           // this creates a function that loads the file based on the type of file (string, base64, blob, file) and location of file (local, remote, limbo)
           createFileLoader(
             origin === FileOrigin.INPUT
-              ? // input
+              ? // input, if is remote, see if should use custom fetch, else use default fetchBlob
                 isString(source) && isExternalURL(source)
-                ? createFetchFunction(url, fetch) // remote url
-                : fetchLocal // local url
+                ? fetch
+                  ? createFetchFunction(url, fetch)
+                  : fetchBlob // remote url
+                : fetchBlob // try to fetch url
               : // limbo or local
               origin === FileOrigin.LIMBO
               ? createFetchFunction(url, restore) // limbo

index.html

@@ -33,17 +33,7 @@
         // Create the FilePond instance
         const pond = FilePond.create(inputElement, {
             allowMultiple: true,
-            allowReorder: true,
-            instantUpload: false,
-            server: {
-                load: (source,load) => {
-                    fetch(source).then(res => res.blob()).then(load);
-                }
-            },
-            files: [
-                { source:'index.html', options: { type:'local'} },
-                { source:'banner.js', options: { type:'local'} },
-            ]
+            allowReorder: true
         });
 
         // Easy console access for testing purposes

package.json

@@ -1,6 +1,6 @@
 {
     "name": "filepond",
-    "version": "4.17.1",
+    "version": "4.18.0",
     "description": "FilePond, Where files go to stretch their bits.",
     "license": "MIT",
     "author": {

src/js/app/actions.js

@@ -17,7 +17,7 @@ import { InteractionMethod } from './enum/InteractionMethod';
 import { applyFilterChain, applyFilters } from '../filter';
 import { createItemAPI } from './utils/createItemAPI';
 import { createResponse } from '../utils/createResponse';
-import { fetchLocal } from './utils/fetchLocal';
+import { fetchBlob } from './utils/fetchBlob';
 import { isExternalURL } from '../utils/isExternalURL';
 import { isString } from '../utils/isString';
 import { isFile } from '../utils/isFile';
@@ -586,10 +586,10 @@ export const actions = (dispatch, query, state) => ({
             // this creates a function that loads the file based on the type of file (string, base64, blob, file) and location of file (local, remote, limbo)
             createFileLoader(
                 origin === FileOrigin.INPUT 
-                    // input
+                    // input, if is remote, see if should use custom fetch, else use default fetchBlob
                     ? isString(source) && isExternalURL(source)
-                        ? createFetchFunction(url, fetch) // remote url
-                        : fetchLocal // local url
+                        ? (fetch ? createFetchFunction(url, fetch) : fetchBlob) // remote url
+                        : fetchBlob // try to fetch url
                     // limbo or local
                     : origin === FileOrigin.LIMBO
                         ? createFetchFunction(url, restore) // limbo

src/js/app/utils/createFileLoader.js

@@ -47,7 +47,7 @@ export const createFileLoader = fetchFn => {
 
     // loads a url
     const loadURL = url => {
-        
+
         // is remote url and no fetch method supplied
         if (!fetchFn) {
             api.fire('error', {

src/js/app/utils/fetchLocal.js → src/js/app/utils/fetchBlob.js

@@ -5,7 +5,7 @@ import { getFileFromBlob } from '../../utils/getFileFromBlob';
 import { getFileInfoFromHeaders } from '../../utils/getFileInfoFromHeaders';
 import { getFilenameFromURL } from '../../utils/getFilenameFromURL';
 
-export const fetchLocal = (url, load, error, progress, abort, headers) => {
+export const fetchBlob = (url, load, error, progress, abort, headers) => {
     const request = sendRequest(null, url, {
         method: 'GET',
         responseType: 'blob'