filepond 5.0.0-beta.6 → 5.0.0-beta.61

package/LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) 2019-2025 [Pqina](https://pqina.nl)
+Copyright (c) 2019-2026 [Pqina](https://pqina.nl)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -11,11 +11,7 @@ A JavaScript library that can upload anything you throw at it, optimizes images
 
 TODO:
 
--   [Docs are in development](https://v5.filepond.com/)
--   Naming of various types
--   Run additional tests on mobile devices
--   Add basic image manipulation extensions
--   default styles for `:valid`, `:invalid`, and `:focus`
+- [Finish docs](https://v5.filepond.com/)
 
 If you're trying out v5, please share your feedback on [Discord](https://discord.gg/KTyymsrTrX)
 
@@ -27,12 +23,12 @@ We can install the `filepond` package by running the following command in our te
 npm install filepond@beta
 ```
 
-We wrap an `<input type="file">` with the `<file-pond>` custom element and then register the custom element using the `defineFilePond` function.
+We wrap an `<input type="file">` with the `<file-pond>` custom element and then register the custom element using the `defineFilePond` function. [Getting started](https://v5.filepond.com/docs/start-here/getting-started)
 
 ```html
 <form action="/upload" method="POST">
+    <label for="my-file">Files</label>
     <file-pond>
-        <label for="my-file">Drop files here, or <u>browse</u></label>
         <input id="my-file" type="file" name="files" required />
     </file-pond>
 
@@ -49,6 +45,56 @@ We wrap an `<input type="file">` with the `<file-pond>` custom element and then
 </script>
 ```
 
+When integrating with a framework like React, Svelte, or Vue, we can use the `<file-pond>` custom element as if it were a Component. [Framework integration](https://v5.filepond.com/docs/start-here/framework-integration)
+
+```tsx
+import { useState } from 'react';
+
+// FilePond imports
+import { defineFilePond, type FilePondEntrySource, type FilePondElement } from 'filepond';
+import { locale } from 'filepond/locales/en-gb.js';
+
+// Optionally import React <file-pond> component types
+import 'filepond/types/react';
+
+// Define <file-pond> element and sets English locale
+defineFilePond({
+    locale,
+});
+
+export default function App() {
+    // two-way data binding
+    const [entries, setEntries] = useState<FilePondEntrySource[]>([
+        new File(['hello'], 'world.txt', {
+            type: 'text/plain',
+        }),
+    ]);
+
+    // handle form submit
+    function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
+        e.preventDefault();
+
+        console.log('submit', e);
+    }
+
+    return (
+        <form onSubmit={handleSubmit} method="POST">
+            <label htmlFor="my-files">Documents</label>
+            <file-pond
+                onentrieschange={({ detail: currentEntries }) => {
+                    setEntries(currentEntries);
+                }}
+                entries={entries}
+            >
+                <input id="my-files" name="my-files" type="file" required multiple />
+            </file-pond>
+
+            <button type="submit">Sumbit</button>
+        </form>
+    );
+}
+```
+
 ## License
 
 [MIT](LICENSE.md)

package/cdn/assets/index.js

@@ -1,5 +1,5 @@
 /*!
-* FilePond v5.0.0-beta.6
+* FilePond v5.0.0-beta.61
 * Copyright (c) 2017-2026 Pqina B.V.
 * Released under the MIT License
 * https://filepond.com
@@ -7,6 +7,8 @@
 const l = {
   // generic remove
   remove: '<path d="M7 7 L17 17 M17 7 L7 17"/>',
+  // generic close
+  close: '<path d="M7 7 L17 17 M17 7 L7 17"/>',
   // checkmark for
   check: '<path d="M20 6 9 17 4 12"/>',
   // status
@@ -16,9 +18,15 @@ const l = {
   system: '<path stroke="none" fill="currentColor" d="M17 3.34a10 10 0 1 1 -15 8.66l.005 -.324a10 10 0 0 1 14.995 -8.336m-6.293 5.953a1 1 0 0 0 -1.414 0l-2 2a1 1 0 0 0 0 1.414l2 2a1 1 0 0 0 1.414 0l.083 -.094a1 1 0 0 0 -.083 -1.32l-1.292 -1.293l1.292 -1.293a1 1 0 0 0 0 -1.414m4 0a1 1 0 0 0 -1.414 0l-.083 .094a1 1 0 0 0 .083 1.32l1.292 1.293l-1.292 1.293a1 1 0 0 0 1.414 1.414l2 -2a1 1 0 0 0 0 -1.414z" />',
   success: '<path stroke="none" fill="currentColor" d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" />'
 }, a = {
+  // folder icon for browse button
+  device: '<g fill="currentColor" stroke="none"><path d="M2 6c0 -.796 .316 -1.558 .879 -2.121c.563 -.563 1.325 -.879 2.121 -.879h4l.099 .005c.229 .023 .444 .124 .608 .288l2.707 2.707h6.586c.796 0 1.558 .316 2.121 .879c.319 .319 .559 .703 .707 1.121l-14.523 0c-.407 0 -.805 .125 -1.14 .356c-.292 .203 -.525 .48 -.674 .801l-.058 .141l-1.379 3.676c-.194 .517 .068 1.093 .585 1.287c.517 .194 1.094 -.068 1.288 -.585l1.134 -3.027c.146 -.39 .519 -.649 .937 -.649h13.002l.217 .012c.216 .024 .426 .082 .624 .173c.054 .025 .107 .053 .159 .083c.199 .115 .377 .263 .525 .439c.188 .222 .325 .482 .403 .762c.077 .28 .092 .573 .045 .859c-.001 .008 -.003 .016 -.005 .024l-.995 5.21c-.131 .686 -.497 1.304 -1.036 1.749c-.47 .389 -1.046 .624 -1.65 .677l-.261 .012h-14.026c-.796 0 -1.558 -.316 -2.121 -.879c-.563 -.563 -.879 -1.325 -.879 -2.121v-11z" /></g>',
+  camera: '<g fill="currentColor" stroke="none"><path d="M15 3a2 2 0 0 1 1.995 1.85l.005 .15a1 1 0 0 0 .883 .993l.117 .007h1a3 3 0 0 1 2.995 2.824l.005 .176v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-9a3 3 0 0 1 2.824 -2.995l.176 -.005h1a1 1 0 0 0 1 -1a2 2 0 0 1 1.85 -1.995l.15 -.005h6zm-3 7a3 3 0 0 0 -2.985 2.698l-.011 .152l-.004 .15l.004 .15a3 3 0 1 0 2.996 -3.15z" /></g>',
+  cameraOff: '<path fill="currentColor" d="M8.297 4.289A1 1 0 0 1 9 4h6a1 1 0 0 1 1 1 2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v8M6.834 6.819l5.754 5.768-2.166-2.139a3 3 0 1 0 4.139 4.117l5.252 5.263c-.249.11-.524.172-.813.172H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1c.298 0 .58-.065.834-.181"/><path stroke="currentColor" d="m3 3 18 18"/></g>',
+  link: '<path d="M9 15l6 -6" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />'
+}, e = {
   store: '<path d="M7 19 L17 19 M12 14 L12 5 M7 10 L12 5 L17 10"/>',
   revert: '<path d="M5.057 18.484A9.5 9.5 0 1 0 4.593 6.05"/><path d="M4.5 2 4 6.5l4.5.5"/>'
-}, e = {
+}, t = {
   mediaEdit: '<path d="m18 5 2-2 1 1-2 2zM15.5 7.5l1 1L6 19l-2.5 1.5L5 18z"/>',
   mediaReset: '<path d="M5.057 18.484A9.5 9.5 0 1 0 4.593 6.05"/><path d="M4.5 2 4 6.5l4.5.5"/>',
   mediaPause: '<g stroke="none" fill="currentColor"><path d="M9 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z" /><path d="M17 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z" /></g>',
@@ -27,14 +35,16 @@ const l = {
   mediaUnmute: '<path fill="currentColor" d="M17 4V2.5L8.5 9h-4v6H6zM12 18l5 3.5V13z"/><path d="M21 4.5 5.5 20"/>',
   mediaSilent: '<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/>',
   mediaFullscreen: '<path d="M4 8v-2a2 2 0 0 1 2 -2h2 M4 16v2a2 2 0 0 0 2 2h2 M16 4h2a2 2 0 0 1 2 2v2 M16 20h2a2 2 0 0 0 2 -2v-2" />'
-}, t = {
+}, r = {
   ...l,
-  ...a,
-  ...e
+  ...e,
+  ...t,
+  ...a
 };
 export {
-  t as assets,
+  r as assets,
   l as core,
-  e as media,
-  a as store
+  t as media,
+  a as source,
+  e as store
 };

package/cdn/dev/index.js

@@ -0,0 +1 @@
+export * from '../main.js'

package/cdn/extensions/blob-loader.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/camera-source.js

@@ -0,0 +1 @@
+export * from '../main.js'

package/cdn/extensions/canvas-loader.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/chunked-upload-store.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/clipboard-source.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/console-view.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/data-transfer-loader.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/data-url-store.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/drag-drop-source.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/entry-list-view.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/file-extension-validator.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/file-input-source.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/file-input-store.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/file-mime-type-validator.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/file-name-transform.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/file-name-validator.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/file-size-validator.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/form-post-store.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/image-bitmap-transform.js

@@ -0,0 +1 @@
+export * from '../main.js'

package/cdn/extensions/index.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/list-count-validator.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/list-size-validator.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/media-resolution-validator.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/object-url-resource.js

@@ -0,0 +1 @@
+export * from '../main.js'

package/cdn/extensions/simulated-loader.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/simulated-store.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/source-description-view.js

@@ -0,0 +1 @@
+export * from '../main.js'

package/cdn/extensions/source-list-view.js

@@ -0,0 +1 @@
+export * from '../main.js'

package/cdn/extensions/text-input-store.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/url-input-source.js

@@ -0,0 +1 @@
+export * from '../main.js'

package/cdn/extensions/url-loader.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'

package/cdn/extensions/value-callback-store.js

@@ -1 +1 @@
-export * from '../index.js'
+export * from '../main.js'