filepond 4.28.1 → 4.30.0

package/README.md

@@ -1,15 +1,20 @@
-# <img src="https://github.com/pqina/filepond-github-assets/blob/master/logo.svg" height="44" alt="FilePond"/>
+# [<img src="https://github.com/pqina/filepond-github-assets/blob/master/logo.svg" height="44" alt="FilePond"/>](https://pqina.nl/filepond/)
 
 A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
 
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/pqina/filepond/blob/master/LICENSE)
 [![npm version](https://badge.fury.io/js/filepond.svg)](https://www.npmjs.com/package/filepond)
+![npm](https://img.shields.io/npm/dt/filepond)
 
 21 KB gzipped. FilePond adapters are available for **[React](https://github.com/pqina/react-filepond)**, **[Vue](https://github.com/pqina/vue-filepond)**, **[Angular](https://github.com/pqina/ngx-filepond)**, **[Svelte](https://github.com/pqina/svelte-filepond)**, and **[jQuery](https://github.com/pqina/jquery-filepond)**
 
-FilePond is maintained by **[Rik Schennink](https://twitter.com/rikschennink/)**
+---
+
+[<img src="https://github.com/pqina/filepond-github-assets/blob/master/header.svg" alt="FilePond"/>](https://www.buymeacoffee.com/rikschennink/)
+
+[Buy me a Coffee](https://www.buymeacoffee.com/rikschennink/) / [Use FilePond with Pintura](https://pqina.nl/pintura/?ref=github-filepond) / [Dev updates on Twitter](https://twitter.com/rikschennink/)
 
-<img src="https://github.com/pqina/filepond-github-assets/blob/master/filepond-animation-01.gif?raw=true" width="370" alt=""/>
+---
 
 ### Core Features
 
@@ -22,15 +27,17 @@ FilePond is maintained by **[Rik Schennink](https://twitter.com/rikschennink/)**
 
 [Learn more about FilePond](https://pqina.nl/filepond/)
 
+[<img src="https://github.com/pqina/filepond-github-assets/blob/master/filepond-animation-01.gif?raw=true" width="370" alt=""/>](https://pqina.nl/filepond/)
+
 ---
 
 ### Also need Image Editing?
 
-**Doka.js** is what you're looking for. It's a Modern JavaScript Image Editor, Doka supports setting **crop aspect ratios**, **resizing**, **rotating**, **cropping**, and **flipping** images. Above all, it integrates beautifully with FilePond.
+**Pintura the modern JavaScript Image Editor** is what you're looking for. Pintura supports setting **crop aspect ratios**, **resizing**, **rotating**, **cropping**, and **flipping** images. Above all, it integrates beautifully with FilePond.
 
-[Learn more about Doka](https://pqina.nl/doka/?ref=github-filepond)
+[Learn more about Pintura](https://pqina.nl/pintura/?ref=github-filepond)
 
-<img src="https://github.com/pqina/filepond-github-assets/blob/master/filepond_doka.gif?raw=true" width="600" alt=""/>
+[<img src="https://github.com/pqina/filepond-github-assets/blob/master/filepond_pintura.gif?raw=true" width="600" alt=""/>](https://pqina.nl/pintura/?ref=github-filepond)
 
 ---
 
@@ -76,7 +83,7 @@ FilePond is maintained by **[Rik Schennink](https://twitter.com/rikschennink/)**
 *   [Django](https://github.com/ImperialCollegeLondon/django-drf-filepond)  ([ImperialCollegeLondon/django-drf-filepond](https://github.com/ImperialCollegeLondon/django-drf-filepond))
 *   [Laravel](https://github.com/Sopamo/laravel-filepond) ([Sopamo/laravel-filepond](https://github.com/Sopamo/laravel-filepond))
 *   [Laravel](https://github.com/Albert221/laravel-filepond) ([Albert221/laravel-filepond](https://github.com/Albert221/laravel-filepond))
-
+*   [SilverStripe](https://github.com/lekoala/silverstripe-filepond) ([lekoala/silverstripe-filepond](https://github.com/lekoala/silverstripe-filepond))
 
 ## Quick Start
 
@@ -155,6 +162,7 @@ To build the library run `npm run build`
 
 ## Publications
 
+* [Using FilePond with NodeJS](https://www.infoworld.com/article/3627248/how-to-use-filepond-with-nodejs.html)
 * [Applying Watermarks to Images with FilePond](https://pqina.nl/blog/applying-watermarks-to-images-with-filepond/)
 * [Generating Image Thumbnails in the Browser using JavaScript and FilePond](https://dev.to/pqina/generating-image-thumbnails-in-the-browser-using-javascript-and-filepond-10b8)
 * [How to upload files with Vue and FilePond](https://dev.to/pqina/how-to-upload-files-with-vue-and-filepond-1m02)

package/dist/filepond.css

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

package/dist/filepond.esm.js

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.28.1
+ * FilePond 4.30.0
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -1872,6 +1872,11 @@ const defaultOptions = {
     fileSizeBase: [1000, Type.INT],
 
     // Labels and status messages
+    labelFileSizeBytes: ['bytes', Type.STRING],
+    labelFileSizeKilobytes: ['KB', Type.STRING],
+    labelFileSizeMegabytes: ['MB', Type.STRING],
+    labelFileSizeGigabytes: ['GB', Type.STRING],
+
     labelDecimalSeparator: [getDecimalSeparator(), Type.STRING], // Default is locale separator
     labelThousandsSeparator: [getThousandsSeparator(), Type.STRING], // Default is locale separator
 
@@ -2113,6 +2118,13 @@ const queries = state => ({
         state.options.storeAsFile && canUpdateFileInput() && !isAsync(state),
 
     IS_ASYNC: () => isAsync(state),
+
+    GET_FILE_SIZE_LABELS: query => ({
+        labelBytes: query('GET_LABEL_FILE_SIZE_BYTES') || undefined,
+        labelKilobytes: query('GET_LABEL_FILE_SIZE_KILOBYTES') || undefined,
+        labelMegabytes: query('GET_LABEL_FILE_SIZE_MEGABYTES') || undefined,
+        labelGigabytes: query('GET_LABEL_FILE_SIZE_GIGABYTES') || undefined,
+    }),
 });
 
 const hasRoomForItem = state => {
@@ -3734,7 +3746,6 @@ const createItem = (origin = null, serverFileReference = null, file = null) => {
             state.activeProcessor = null;
 
             // if file was uploaded but processing was cancelled during perceived processor time store file reference
-            state.transferId = null;
             state.serverFileReference = serverFileReference;
 
             setStatus(ItemStatus.IDLE);
@@ -3798,18 +3809,24 @@ const createItem = (origin = null, serverFileReference = null, file = null) => {
     //
     const revert = (revertFileUpload, forceRevert) =>
         new Promise((resolve, reject) => {
+            // a completed upload will have a serverFileReference, a failed chunked upload where
+            // getting a serverId succeeded but >=0 chunks have been uploaded will have transferId set
+            const serverTransferId =
+                state.serverFileReference !== null ? state.serverFileReference : state.transferId;
+
             // cannot revert without a server id for this process
-            if (state.serverFileReference === null) {
+            if (serverTransferId === null) {
                 resolve();
                 return;
             }
 
             // revert the upload (fire and forget)
             revertFileUpload(
-                state.serverFileReference,
+                serverTransferId,
                 () => {
-                    // reset file server id as now it's no available on the server
+                    // reset file server id and transfer id as now it's not available on the server
                     state.serverFileReference = null;
+                    state.transferId = null;
                     resolve();
                 },
                 error => {
@@ -3857,7 +3874,7 @@ const createItem = (origin = null, serverFileReference = null, file = null) => {
 
     const api = {
         id: { get: () => id },
-        origin: { get: () => origin },
+        origin: { get: () => origin, set: value => (origin = value) },
         serverId: { get: () => state.serverFileReference },
         transferId: { get: () => state.transferId },
         status: { get: () => state.status },
@@ -4127,6 +4144,15 @@ const actions = (dispatch, query, state) => ({
                 return;
             }
 
+            // if is local item we need to enable upload button so change can be propagated to server
+            if (item.origin === FileOrigin.LOCAL) {
+                dispatch('DID_LOAD_ITEM', {
+                    id: item.id,
+                    error: null,
+                    serverFileReference: item.source,
+                });
+            }
+
             // for async scenarios
             const upload = () => {
                 // we push this forward a bit so the interface is updated correctly
@@ -4485,8 +4511,13 @@ const actions = (dispatch, query, state) => ({
                         handleAdd
                     );
                 })
-                .catch(() => {
-                    handleAdd(false);
+                .catch(e => {
+                    if (!e || !e.error || !e.status) return handleAdd(false);
+                    dispatch('DID_THROW_ITEM_INVALID', {
+                        id,
+                        error: e.error,
+                        status: e.status,
+                    });
                 });
         });
 
@@ -4756,6 +4787,16 @@ const actions = (dispatch, query, state) => ({
             success(createItemAPI(item));
             processNext();
 
+            // if origin is local, and we're instant uploading, trigger remove of original
+            // as revert will remove file from list
+            const server = state.options.server;
+            const instantUpload = state.options.instantUpload;
+            if (instantUpload && item.origin === FileOrigin.LOCAL && isFunction(server.remove)) {
+                const noop = () => {};
+                item.origin = FileOrigin.LIMBO;
+                state.options.server.remove(item.source, noop, noop);
+            }
+
             // All items processed? No errors?
             const allItemsProcessed =
                 query('GET_ITEMS_BY_STATUS', ItemStatus.PROCESSING_COMPLETE).length ===
@@ -4836,7 +4877,8 @@ const actions = (dispatch, query, state) => ({
             success(createItemAPI(item));
         };
 
-        // if this is a local file and the server.remove function has been configured, send source there so dev can remove file from server
+        // if this is a local file and the `server.remove` function has been configured,
+        // send source there so dev can remove file from server
         const server = state.options.server;
         if (
             item.origin === FileOrigin.LOCAL &&
@@ -4862,7 +4904,14 @@ const actions = (dispatch, query, state) => ({
             );
         } else {
             // if is requesting revert and can revert need to call revert handler (not calling request_ because that would also trigger beforeRemoveHook)
-            if (options.revert && item.origin !== FileOrigin.LOCAL && item.serverId !== null) {
+            if (
+                (options.revert && item.origin !== FileOrigin.LOCAL && item.serverId !== null) ||
+                // if chunked uploads are enabled and we're uploading in chunks for this specific file
+                // or if the file isn't big enough for chunked uploads but chunkForce is set then call
+                // revert before removing from the view...
+                (state.options.chunkUploads && item.file.size > state.options.chunkSize) ||
+                (state.options.chunkUploads && state.options.chunkForce)
+            ) {
                 item.revert(
                     createRevertFunction(state.options.server.url, state.options.server.revert),
                     query('GET_FORCE_REVERT')
@@ -5119,7 +5168,14 @@ const fileActionButton = createView({
     write: write$1,
 });
 
-const toNaturalFileSize = (bytes, decimalSeparator = '.', base = 1000) => {
+const toNaturalFileSize = (bytes, decimalSeparator = '.', base = 1000, options = {}) => {
+    const {
+        labelBytes = 'bytes',
+        labelKilobytes = 'KB',
+        labelMegabytes = 'MB',
+        labelGigabytes = 'GB',
+    } = options;
+
     // no negative byte sizes
     bytes = Math.round(Math.abs(bytes));
 
@@ -5129,21 +5185,21 @@ const toNaturalFileSize = (bytes, decimalSeparator = '.', base = 1000) => {
 
     // just bytes
     if (bytes < KB) {
-        return `${bytes} bytes`;
+        return `${bytes} ${labelBytes}`;
     }
 
     // kilobytes
     if (bytes < MB) {
-        return `${Math.floor(bytes / KB)} KB`;
+        return `${Math.floor(bytes / KB)} ${labelKilobytes}`;
     }
 
     // megabytes
     if (bytes < GB) {
-        return `${removeDecimalsWhenZero(bytes / MB, 1, decimalSeparator)} MB`;
+        return `${removeDecimalsWhenZero(bytes / MB, 1, decimalSeparator)} ${labelMegabytes}`;
     }
 
     // gigabytes
-    return `${removeDecimalsWhenZero(bytes / GB, 2, decimalSeparator)} GB`;
+    return `${removeDecimalsWhenZero(bytes / GB, 2, decimalSeparator)} ${labelGigabytes}`;
 };
 
 const removeDecimalsWhenZero = (value, decimalCount, separator) => {
@@ -5182,7 +5238,8 @@ const updateFile = ({ root, props }) => {
         toNaturalFileSize(
             root.query('GET_ITEM_SIZE', props.id),
             '.',
-            root.query('GET_FILE_SIZE_BASE')
+            root.query('GET_FILE_SIZE_BASE'),
+            root.query('GET_FILE_SIZE_LABELS', root.query)
         )
     );
     text(root.ref.fileName, formatFilename(root.query('GET_ITEM_NAME', props.id)));
@@ -5191,6 +5248,7 @@ const updateFile = ({ root, props }) => {
 const updateFileSizeOnError = ({ root, props }) => {
     // if size is available don't fallback to unknown size message
     if (isInt(root.query('GET_ITEM_SIZE', props.id))) {
+        updateFile({ root, props });
         return;
     }