fix issue with rendering 0 items per row

Author: rikschennink

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 4.26.0
+
+-   Fix problem with rendering 0 items per row. #676
+-   The `headers` property of the `server.process` end point can now be a function.
+
 ## 4.25.3
 
 -   Fix issue with `chunkRetryDelays`. #671

dist/filepond.css

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.25.3
+ * FilePond 4.26.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.25.3
+ * FilePond 4.26.0
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -3062,6 +3062,18 @@ const createFileProcessorFunction = (apiUrl, action, name, options) => (
     const onload = action.onload || (res => res);
     const onerror = action.onerror || (res => null);
 
+    const headers =
+        typeof action.headers === 'function'
+            ? action.headers(file, metadata) || {}
+            : {
+                  ...action.headers,
+              };
+
+    const requestParams = {
+        ...action,
+        headers,
+    };
+
     // create formdata object
     var formData = new FormData();
 
@@ -3080,7 +3092,7 @@ const createFileProcessorFunction = (apiUrl, action, name, options) => (
     });
 
     // send request object
-    const request = sendRequest(ondata(formData), buildURL(apiUrl, action.url), action);
+    const request = sendRequest(ondata(formData), buildURL(apiUrl, action.url), requestParams);
     request.onload = xhr => {
         load(createResponse('load', xhr.status, onload(xhr.response), xhr.getAllResponseHeaders()));
     };
@@ -6049,7 +6061,7 @@ const item = createView({
 var getItemsPerRow = (horizontalSpace, itemWidth) => {
     // add one pixel leeway, when using percentages for item width total items can be 1.99 per row
 
-    return Math.floor((horizontalSpace + 1) / itemWidth);
+    return Math.max(1, Math.floor((horizontalSpace + 1) / itemWidth));
 };
 
 const getItemIndexByPosition = (view, children, positionInView) => {

dist/filepond.esm.min.js

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.25.3
+ * FilePond 4.26.0
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -5177,6 +5177,19 @@
                     return null;
                 };
 
+            var headers =
+                typeof action.headers === 'function'
+                    ? action.headers(file, metadata) || {}
+                    : Object.assign(
+                          {},
+
+                          action.headers
+                      );
+
+            var requestParams = Object.assign({}, action, {
+                headers: headers,
+            });
+
             // create formdata object
             var formData = new FormData();
 
@@ -5195,7 +5208,11 @@
             });
 
             // send request object
-            var request = sendRequest(ondata(formData), buildURL(apiUrl, action.url), action);
+            var request = sendRequest(
+                ondata(formData),
+                buildURL(apiUrl, action.url),
+                requestParams
+            );
             request.onload = function(xhr) {
                 load(
                     createResponse(
@@ -8599,7 +8616,7 @@
     var getItemsPerRow = function(horizontalSpace, itemWidth) {
         // add one pixel leeway, when using percentages for item width total items can be 1.99 per row
 
-        return Math.floor((horizontalSpace + 1) / itemWidth);
+        return Math.max(1, Math.floor((horizontalSpace + 1) / itemWidth));
     };
 
     var getItemIndexByPosition = function getItemIndexByPosition(view, children, positionInView) {

dist/filepond.js

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

dist/filepond.min.css

@@ -14,47 +14,78 @@ function signature:
   }
 }
 */
-export const createFileProcessorFunction = (apiUrl, action, name, options) => (file, metadata, load, error, progress, abort, transfer) => {
-
+export const createFileProcessorFunction = (apiUrl, action, name, options) => (
+    file,
+    metadata,
+    load,
+    error,
+    progress,
+    abort,
+    transfer
+) => {
     // no file received
     if (!file) return;
 
     // if was passed a file, and we can chunk it, exit here
     const canChunkUpload = options.chunkUploads;
     const shouldChunkUpload = canChunkUpload && file.size > options.chunkSize;
     const willChunkUpload = canChunkUpload && (shouldChunkUpload || options.chunkForce);
-    if (file instanceof Blob && willChunkUpload) return processFileChunked(apiUrl, action, name, file, metadata, load, error, progress, abort, transfer, options);
-    
+    if (file instanceof Blob && willChunkUpload)
+        return processFileChunked(
+            apiUrl,
+            action,
+            name,
+            file,
+            metadata,
+            load,
+            error,
+            progress,
+            abort,
+            transfer,
+            options
+        );
+
     // set handlers
     const ondata = action.ondata || (fd => fd);
     const onload = action.onload || (res => res);
     const onerror = action.onerror || (res => null);
 
+    const headers =
+        typeof action.headers === 'function'
+            ? action.headers(file, metadata) || {}
+            : {
+                  ...action.headers,
+              };
+
+    const requestParams = {
+        ...action,
+        headers,
+    };
+
     // create formdata object
     var formData = new FormData();
 
     // add metadata under same name
-    if (isObject(metadata)) { formData.append(name, JSON.stringify(metadata)); }
+    if (isObject(metadata)) {
+        formData.append(name, JSON.stringify(metadata));
+    }
 
     // Turn into an array of objects so no matter what the input, we can handle it the same way
     (file instanceof Blob ? [{ name: null, file }] : file).forEach(item => {
-        formData.append(name, item.file, item.name === null ? item.file.name : `${item.name}${item.file.name}`);
+        formData.append(
+            name,
+            item.file,
+            item.name === null ? item.file.name : `${item.name}${item.file.name}`
+        );
     });
 
     // send request object
-    const request = sendRequest(ondata(formData), buildURL(apiUrl, action.url), action);
-    request.onload = (xhr) => {
-        load(
-            createResponse(
-                'load',
-                xhr.status,
-                onload(xhr.response),
-                xhr.getAllResponseHeaders()
-            )
-        );
+    const request = sendRequest(ondata(formData), buildURL(apiUrl, action.url), requestParams);
+    request.onload = xhr => {
+        load(createResponse('load', xhr.status, onload(xhr.response), xhr.getAllResponseHeaders()));
     };
 
-    request.onerror = (xhr) => {
+    request.onerror = xhr => {
         error(
             createResponse(
                 'error',
@@ -71,4 +102,4 @@ export const createFileProcessorFunction = (apiUrl, action, name, options) => (f
 
     // should return request
     return request;
-};
+};

dist/filepond.min.js

@@ -1,5 +1,5 @@
 export default (horizontalSpace, itemWidth) => {
     // add one pixel leeway, when using percentages for item width total items can be 1.99 per row
 
-    return Math.floor((horizontalSpace + 1) / itemWidth);
+    return Math.max(1, Math.floor((horizontalSpace + 1) / itemWidth));
 };