filepond 4.32.9 → 5.0.0-alpha.0

package/{LICENSE → LICENSE.md}

@@ -1,6 +1,4 @@
-MIT License
-
-Copyright (c) 2019 PQINA | Rik Schennink <rik@pqina.nl>
+Copyright (c) 2019-2025 [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

@@ -1,195 +1,67 @@
-# [<img src="https://github.com/pqina/filepond-github-assets/blob/master/logo.svg" height="44" alt="FilePond"/>](https://pqina.nl/filepond/)
+# [<img src="https://github.com/pqina/filepond-github-assets/blob/master/logo.svg" height="44" alt="FilePond"/>](https://filepond.com)
+
+**This is the v5 beta branch**
+
+Some high priority TODO's
+
+-   Docs are on the way
+-   Naming of some types
+-   Safari flashing of video while dragginh
+-   Run more tests on mobile devices
+-   Add basic image manipulation extensions
+-   default styles for `:valid`, `:invalid, and `:focus`
 
 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)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/pqina/filepond/blob/v/LICENSE)
 [![npm version](https://badge.fury.io/js/filepond.svg)](https://www.npmjs.com/package/filepond)
 ![npm](https://img.shields.io/npm/dt/filepond)
-[![minzipped size](https://img.shields.io/bundlephobia/minzip/filepond)](https://bundlephobia.com/package/filepond)
-
-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)**
+[![Discord](https://img.shields.io/discord/1422126182924554291?label=discord)](https://discord.gg/KTyymsrTrX)
 
 ---
 
 [<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/)
-
----
-
-### Core Features
-
--   Accepts **directories**, **files**, blobs, local URLs, **remote URLs** and Data URIs.
--   **Drop files**, select on filesystem, **copy and paste files**, or add files using the API.
--   **Async uploads** with AJAX, supports **chunk uploads**, can encode files as base64 data and send along form post.
--   **Accessible**, tested with AT software like VoiceOver and JAWS, **navigable by Keyboard**.
--   **Image optimization**, automatic image resizing, **cropping**, filtering, and **fixes EXIF orientation**.
--   **Responsive**, automatically scales to available space, is functional on both **mobile and desktop devices**.
-
-[Learn more about FilePond](https://pqina.nl/filepond/)
+[Buy me a Coffee](https://www.buymeacoffee.com/rikschennink/) • [Use FilePond with Pintura](https://pqina.nl/pintura/?ref=github-filepond) • [Dev updates](https://rik.schenn.ink)
 
-[<img src="https://github.com/pqina/filepond-github-assets/blob/master/filepond-animation-01.gif?raw=true" width="370" alt=""/>](https://pqina.nl/filepond/)
+## Installing
 
----
-
-### Also need Image Editing?
-
-**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 Pintura](https://pqina.nl/pintura/?ref=github-filepond)
-
-[<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)
+We can install the `filepond` package by running the following command in our terminal:
 
----
-
-### Live Demos
-
--   [React](https://stackblitz.com/github/pqina/pintura-example-react?file=src%2FExampleFilePond.js)
--   [Angular](https://stackblitz.com/github/pqina/pintura-example-angular?file=src%2Fapp%2Ffilepond-example%2Ffilepond-example.component.ts)
--   [Svelte](https://stackblitz.com/github/pqina/pintura-example-svelte?file=src%2FApp.svelte%3AL152)
--   [Vue](https://stackblitz.com/github/pqina/pintura-example-vue-3?file=src%2FExampleFilePond.vue)
-
-### Plugins
-
--   [File encode](https://github.com/pqina/filepond-plugin-file-encode)
--   [File rename](https://github.com/pqina/filepond-plugin-file-rename)
--   [File size validation](https://github.com/pqina/filepond-plugin-file-validate-size)
--   [File type validation](https://github.com/pqina/filepond-plugin-file-validate-type)
--   [File metadata](https://github.com/pqina/filepond-plugin-file-metadata)
--   [File poster](https://github.com/pqina/filepond-plugin-file-poster)
--   [Image editor](https://github.com/pqina/filepond-plugin-image-edit)
--   [Image size validation](https://github.com/pqina/filepond-plugin-image-validate-size)
--   [Image preview](https://github.com/pqina/filepond-plugin-image-preview)
--   [Image crop](https://github.com/pqina/filepond-plugin-image-crop)
--   [Image filter](https://github.com/pqina/filepond-plugin-image-filter)
--   [Image resize](https://github.com/pqina/filepond-plugin-image-resize)
--   [Image transform](https://github.com/pqina/filepond-plugin-image-transform)
--   [Image EXIF orientation](https://github.com/pqina/filepond-plugin-image-exif-orientation)
--   [Image overlay](https://github.com/nielsboogaard/filepond-plugin-image-overlay) ([nielsboogaard/filepond-plugin-image-overlay](https://github.com/nielsboogaard/filepond-plugin-image-overlay))
--   [Media preview](https://github.com/nielsboogaard/filepond-plugin-media-preview) ([nielsboogaard/filepond-plugin-media-preview](https://github.com/nielsboogaard/filepond-plugin-media-preview))
--   [Media preview + PDF preview](https://github.com/ErnestBrandi/filepond-plugin-media-preview) ([ErnestBrandi/filepond-plugin-media-preview](https://github.com/ErnestBrandi/filepond-plugin-media-preview))
--   [Get file](https://github.com/nielsboogaard/filepond-plugin-get-file) ([nielsboogaard/filepond-plugin-get-file](https://github.com/nielsboogaard/filepond-plugin-get-file))
--   [Zip Directory Uploads](https://github.com/tzsk/filepond-plugin-zipper) ([tzsk/filepond-plugin-zipper](https://github.com/tzsk/filepond-plugin-zipper))
--   [PDF Preview](https://github.com/Adri-Glez/filepond-plugin-pdf-preview) ([Adri-Glez/filepond-plugin-pdf-preview](https://github.com/Adri-Glez/filepond-plugin-pdf-preview))
--   [PDF Convert](https://github.com/alexandreDavid/filepond-plugin-pdf-convert) ([alexandreDavid/filepond-plugin-pdf-convert](https://github.com/alexandreDavid/filepond-plugin-pdf-convert))
-
-### Adapters
-
--   [React](https://github.com/pqina/react-filepond)
--   [Vue](https://github.com/pqina/vue-filepond)
--   [Svelte](https://github.com/pqina/svelte-filepond)
--   [jQuery](https://github.com/pqina/jquery-filepond)
--   [Angular](https://github.com/pqina/ngx-filepond)
--   [Angular 1](https://github.com/johnnyasantoss/angularjs-filepond) ([johnnyasantoss/angularjs-filepond](https://github.com/johnnyasantoss/angularjs-filepond))
--   [Blazor](https://github.com/soenneker/soenneker.blazor.filepond) ([soenneker/soenneker.blazor.filepond](https://github.com/soenneker/soenneker.blazor.filepond))
--   [Ember](https://github.com/alexdiliberto/ember-filepond) ([alexdiliberto/ember-filepond](https://github.com/alexdiliberto/ember-filepond))
-
-### Backend
-
--   [PHP](https://github.com/pqina/filepond-boilerplate-php)
--   [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))
--   [Ruby on Rails](https://github.com/Code-With-Rails/filepond-rails) ([Code-With-Rails/filepond-rails](https://github.com/Code-With-Rails/filepond-rails))
-
-## Quick Start
-
-Install using npm:
-
-```bash
-npm install filepond
 ```
-
-Then import in your project:
-
-```js
-import * as FilePond from 'filepond';
-
-// Create a multi file upload component
-const pond = FilePond.create({
-    multiple: true,
-    name: 'filepond',
-});
-
-// Add it to the DOM
-document.body.appendChild(pond.element);
+npm install filepond@5.0.0-alpha
 ```
 
-Or get it from a CDN:
+## Getting Started
 
 ```html
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>FilePond from CDN</title>
-
-        <!-- Filepond stylesheet -->
-        <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" />
-    </head>
-    <body>
-        <!-- We'll transform this input into a pond -->
-        <input type="file" class="filepond" />
-
-        <!-- Load FilePond library -->
-        <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
-
-        <!-- Turn all file input elements into ponds -->
-        <script>
-            FilePond.parse(document.body);
-        </script>
-    </body>
-</html>
+<form action="/upload" method="POST">
+    <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>
+
+    <button type="submit">Upload</button>
+</form>
+
+<script type="module">
+    import { defineFilePond } from 'filepond';
+    import { en_GB } from 'filepond/locales';
+
+    // registers the <file-pond> custom element, returns found elements, and sets initial options
+    const elements = defineFilePond({
+        locale: en_GB,
+    });
+</script>
 ```
 
-[Getting started with FilePond](https://pqina.nl/filepond/docs/patterns/getting-started/)
-
-## Internationalization
-
-The [locale folder](./locale/) contains different language files, PR's are welcome, you can use locale files like this:
-
-```js
-import pt_BR from 'filepond/locale/pt-br.js';
-
-FilePond.setOptions(pt_BR);
-```
-
-## Contributing
-
-At the moment test coverage is not great, it's around 65%. To accept pull requests the tests need to be better, any help to improve them is very much appreciated.
-
-Tests are based on Jest and can be run with `npm run test`
-
-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)
--   [Smooth file uploading with React and FilePond](https://itnext.io/uploading-files-with-react-and-filepond-f8a798308557)
--   [5 interesting technical challenges I faced while building FilePond](https://itnext.io/filepond-frontend-trickery-a3073c934c77)
--   [Image uploads with Laravel and FilePond](https://devdojo.com/episode/image-uploads-with-laravel-and-filepond)
--   [Integrating FilePond with Ember](https://alexdiliberto.com/ember-filepond/)
--   [FilePond launch day post-mortem](https://pqina.nl/blog/filepond-launch-day-post-mortem)
--   [FilePond on ProductHunt](https://www.producthunt.com/posts/filepond-js)
-
-### Browser Compatibility
-
-FilePond is compatible with a wide range of desktop and mobile browsers, the oldest explicitly supported browser is IE11, for best cross browser support add [FilePond Polyfill](https://github.com/pqina/filepond-polyfill) and [Babel polyfill](https://babeljs.io/docs/en/babel-polyfill) to your project.
-
-FilePond uses [BrowserStack](https://www.browserstack.com/) for compatibility testing.
-
-[<img src="https://github.com/pqina/filepond-github-assets/blob/master/browserstack-logo.svg" height="32" alt="BrowserStack"/>](https://www.browserstack.com/)
-
 ## License
 
 **Please don't remove or change the disclaimers in the source files**
 
 MIT License
 
-Copyright (c) 2020 PQINA | [Rik Schennink](mailto:rik@pqina.nl)
+Copyright (c) 2025 Pqina
 
 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/dist/esm/assets/index.js

@@ -0,0 +1,37 @@
+const core = {
+  // generic remove
+  remove: '<path d="M7 7 L17 17 M17 7 L7 17"/>',
+  // checkmark for
+  check: '<path d="M20 6 9 17 4 12"/>',
+  // status
+  error: '<path stroke="none" fill="currentColor" d="M14.897 1a4 4 0 0 1 2.664 1.016l.165 .156l4.1 4.1a4 4 0 0 1 1.168 2.605l.006 .227v5.794a4 4 0 0 1 -1.016 2.664l-.156 .165l-4.1 4.1a4 4 0 0 1 -2.603 1.168l-.227 .006h-5.795a3.999 3.999 0 0 1 -2.664 -1.017l-.165 -.156l-4.1 -4.1a4 4 0 0 1 -1.168 -2.604l-.006 -.227v-5.794a4 4 0 0 1 1.016 -2.664l.156 -.165l4.1 -4.1a4 4 0 0 1 2.605 -1.168l.227 -.006h5.793zm-2.887 14l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />',
+  warning: '<path stroke="none" fill="currentColor" d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />',
+  info: '<path stroke="none" fill="currentColor" d="M12 2l.642 .005l.616 .017l.299 .013l.579 .034l.553 .046c4.687 .455 6.65 2.333 7.166 6.906l.03 .29l.046 .553l.041 .727l.006 .15l.017 .617l.005 .642l-.005 .642l-.017 .616l-.013 .299l-.034 .579l-.046 .553c-.455 4.687 -2.333 6.65 -6.906 7.166l-.29 .03l-.553 .046l-.727 .041l-.15 .006l-.617 .017l-.642 .005l-.642 -.005l-.616 -.017l-.299 -.013l-.579 -.034l-.553 -.046c-4.687 -.455 -6.65 -2.333 -7.166 -6.906l-.03 -.29l-.046 -.553l-.041 -.727l-.006 -.15l-.017 -.617l-.004 -.318v-.648l.004 -.318l.017 -.616l.013 -.299l.034 -.579l.046 -.553c.455 -4.687 2.333 -6.65 6.906 -7.166l.29 -.03l.553 -.046l.727 -.041l.15 -.006l.617 -.017c.21 -.003 .424 -.005 .642 -.005zm0 9h-1l-.117 .007a1 1 0 0 0 0 1.986l.117 .007v3l.007 .117a1 1 0 0 0 .876 .876l.117 .007h1l.117 -.007a1 1 0 0 0 .876 -.876l.007 -.117l-.007 -.117a1 1 0 0 0 -.764 -.857l-.112 -.02l-.117 -.006v-3l-.007 -.117a1 1 0 0 0 -.876 -.876l-.117 -.007zm.01 -3l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z" />',
+  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" />'
+};
+const store = {
+  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"/>'
+};
+const media = {
+  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>',
+  mediaPlay: '<path stroke="none" fill="currentColor" d="M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z" />',
+  mediaMute: '<g fill="currentColor"><path d="M8.5 9h-4v6h4l8.5 6.5v-19z"/><path d="M20 15c1.178 0 2-1.698 2-3s-.822-3-2-3c-.5 0-1 .667-1 1v4c0 .333.5 1 1 1" stroke="none"/></g>',
+  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" />'
+};
+const assets = {
+  ...core,
+  ...store,
+  ...media
+};
+export {
+  assets,
+  core,
+  media,
+  store
+};

package/dist/esm/common/console.js

@@ -0,0 +1,14 @@
+function warn(...args) {
+  console["warn"](...args);
+}
+function log(...args) {
+  console["log"](...args);
+}
+function clear() {
+  console["clear"]();
+}
+export {
+  clear,
+  log,
+  warn
+};

package/dist/esm/common/entry.js

@@ -0,0 +1,39 @@
+import { getExtensionFromMimeType } from "../utils/file.js";
+function getBasename(entry, blob) {
+  return "Untitled";
+}
+function getExtension(entry, blob, options) {
+  return getExtensionFromMimeType(blob.type, options.mimeTypeMap);
+}
+function getFilename(entry, blob, options) {
+  const basename = (options.getBasename ?? getBasename)(entry, blob);
+  const extension = (options.getExtension ?? getExtension)(entry, blob, {
+    mimeTypeMap: options.mimeTypeMap
+  });
+  return `${basename}${extension}`;
+}
+function getExtensionStatusItems(extensions) {
+  return extensions.filter((extension) => extension.status).map((extension) => extension.status);
+}
+function getExtensionStateByStatusCode(extensions, codes) {
+  const extensionState = extensions.filter((extension) => extension.status).find(
+    (extension) => codes.includes(
+      //@ts-ignore (we only get extensions that have a status)
+      extension.status.code
+    )
+  );
+  if (extensionState) {
+    return extensionState.status;
+  }
+  if (codes.includes(null)) {
+    return { progress: null };
+  }
+  return null;
+}
+export {
+  getBasename,
+  getExtension,
+  getExtensionStateByStatusCode,
+  getExtensionStatusItems,
+  getFilename
+};

package/dist/esm/common/perceivedPerformanceProxy.js

@@ -0,0 +1,94 @@
+import { randomNumberBetween } from "../utils/math.js";
+function createPerceivedPerformanceProcess(onprogress, abortController, config) {
+  return new Promise((resolve) => {
+    let timeoutId;
+    let duration = randomNumberBetween(config.minDuration, config.maxDuration);
+    const start = Date.now();
+    const lengthComputable = true;
+    const total = 1;
+    let loaded = 0;
+    abortController.signal.onabort = () => {
+      clearTimeout(timeoutId);
+    };
+    onprogress({ lengthComputable, loaded, total });
+    const tick = () => {
+      if (abortController.signal.aborted) {
+        return;
+      }
+      const runtime = Date.now() - start;
+      let delay = randomNumberBetween(config.minStep, config.maxStep);
+      if (runtime + delay > duration) {
+        delay = runtime + delay - duration;
+      }
+      loaded = runtime / duration * total;
+      onprogress({
+        lengthComputable,
+        loaded: Math.min(loaded, total),
+        total
+      });
+      if (loaded >= total) {
+        return resolve();
+      }
+      timeoutId = setTimeout(tick, delay);
+    };
+    tick();
+  });
+}
+function createPerceivedPerformanceProxy(fn, options) {
+  return async function(entry, {
+    onprogress,
+    onabort,
+    abortController
+  }) {
+    const perceivedPerformanceAbortController = new AbortController();
+    let perceivedProgress;
+    let actualProgress;
+    function handleProgressUpdate() {
+      if (!actualProgress || !perceivedProgress) {
+        return;
+      }
+      const perceivedProgressFraction = perceivedProgress.loaded / perceivedProgress.total;
+      const actualProgressFraction = actualProgress.loaded / actualProgress.total;
+      if (perceivedProgressFraction < actualProgressFraction) {
+        return onprogress({ ...perceivedProgress, lengthComputable: true });
+      }
+      onprogress(actualProgress);
+    }
+    const perceivedPromise = createPerceivedPerformanceProcess(
+      (progress) => {
+        const total = options?.total || actualProgress?.total || 100;
+        perceivedProgress = {
+          lengthComputable: true,
+          loaded: Math.round(progress.loaded * total),
+          total
+        };
+        handleProgressUpdate();
+      },
+      // if we abort we abort simulation as well
+      perceivedPerformanceAbortController,
+      options
+    );
+    const actualPromise = fn(entry, {
+      onprogress: (progress) => {
+        actualProgress = progress;
+        handleProgressUpdate();
+      },
+      onabort: () => {
+        perceivedPerformanceAbortController.abort();
+        onabort();
+      },
+      abortController
+    });
+    return new Promise((resolve, reject) => {
+      Promise.all([actualPromise, perceivedPromise]).then((res) => {
+        resolve(res[0]);
+      }).catch((err) => {
+        perceivedPerformanceAbortController.abort();
+        reject(err);
+      });
+    });
+  };
+}
+export {
+  createPerceivedPerformanceProxy
+};

package/dist/esm/common/readEntriesFromDataTransfer.js

@@ -0,0 +1,143 @@
+import { arrayRemoveFalsy } from "../utils/array.js";
+import { noop } from "../utils/placeholder.js";
+import { isFileSystemDirectoryEntry, isFunction, isFileSystemFileEntry } from "../utils/test.js";
+import { eachTree, mapTreeAsync } from "../utils/tree.js";
+import { idleCallbackPromise } from "../utils/window.js";
+async function readEntriesFromDataTransfer(dataTransfer, options) {
+  const { onprogress = noop, onabort = noop, abortController } = options ?? {};
+  const { items } = dataTransfer ?? {};
+  if (!items) {
+    return [];
+  }
+  let didCallOnAbort = false;
+  let totalFileEntries = 0;
+  let processedFileEntries = 0;
+  const entries = dataTransferItemsToEntries(items);
+  const entriesArray = await entriesToArray(entries, options);
+  if (abortController?.signal.aborted) {
+    onabort();
+    return;
+  }
+  eachTree(entriesArray, (entry) => {
+    if (!isFunction(entry)) {
+      return;
+    }
+    totalFileEntries++;
+  });
+  onprogress({ loaded: processedFileEntries, total: totalFileEntries });
+  return await mapTreeAsync(
+    entriesArray,
+    async (entry) => {
+      if (isFunction(entry)) {
+        if (abortController?.signal.aborted) {
+          if (!didCallOnAbort) {
+            onabort();
+          }
+          didCallOnAbort = true;
+          return;
+        }
+        const res = await entry();
+        processedFileEntries++;
+        onprogress({ loaded: processedFileEntries, total: totalFileEntries });
+        return res;
+      }
+      return entry;
+    },
+    "entries"
+  );
+}
+async function entriesToArray(entries, options) {
+  const { abortController, onabort = noop } = options ?? {};
+  let entriesArray = [];
+  for (const entry of entries) {
+    if (!entry) {
+      continue;
+    }
+    if (abortController?.signal.aborted) {
+      onabort();
+      return [];
+    }
+    let item;
+    if (isFileSystemDirectoryEntry(entry)) {
+      item = {
+        name: entry.name,
+        path: entry.fullPath,
+        entries: await entriesToArray(await readDirectory(entry), options)
+      };
+    } else if (isFileSystemFileEntry(entry)) {
+      item = async () => {
+        const file = await readFile(entry);
+        file.path = entry.fullPath;
+        return file;
+      };
+    } else {
+      continue;
+    }
+    entriesArray.push(item);
+  }
+  return entriesArray;
+}
+function dataTransferItemsToEntries(items) {
+  return Array.from(items).map(getAsEntry);
+}
+function dataTransferItemsToFiles(items) {
+  return Array.from(items).map(getAsFile);
+}
+function getAsEntry(item) {
+  return item.webkitGetAsEntry();
+}
+function getAsFile(item) {
+  return item.getAsFile();
+}
+async function readDirectory(entry) {
+  const dirReader = entry.createReader();
+  const entries = [];
+  while (true) {
+    const results = await new Promise((resolve, reject) => {
+      dirReader.readEntries(resolve, reject);
+    });
+    if (!results.length) {
+      break;
+    }
+    for (const entry2 of results) {
+      entries.push(entry2);
+    }
+  }
+  return entries;
+}
+async function readFile(entry) {
+  await idleCallbackPromise();
+  return getFileFromEntry(entry);
+}
+async function getFileFromEntry(entry) {
+  return new Promise((resolve) => entry.file(resolve));
+}
+function shouldLoadWithIdleCallback(dataTransfer) {
+  const entries = dataTransferItemsToEntries(dataTransfer.items);
+  return entries.some(isFileSystemDirectoryEntry) || entries.length > 10;
+}
+async function dataTransferToFiles(dataTransfer) {
+  let entries = dataTransferItemsToEntries(dataTransfer.items);
+  if (arrayRemoveFalsy(entries).length === 0) {
+    return dataTransferItemsToFiles(dataTransfer.items);
+  }
+  const res = [];
+  const promises = [];
+  for (const entry of entries) {
+    if (isFileSystemFileEntry(entry)) {
+      promises.push(getFileFromEntry(entry));
+    }
+  }
+  res.push(...await Promise.all(promises));
+  return res;
+}
+export {
+  dataTransferItemsToEntries,
+  dataTransferItemsToFiles,
+  dataTransferToFiles,
+  getAsEntry,
+  getAsFile,
+  readDirectory,
+  readEntriesFromDataTransfer,
+  shouldLoadWithIdleCallback
+};

package/dist/esm/common/ssr.js

@@ -0,0 +1,6 @@
+import { isBrowser } from "../utils/test.js";
+const HTMLElementSafe = isBrowser() ? HTMLElement : class {
+};
+export {
+  HTMLElementSafe
+};

package/dist/esm/common/status.js

@@ -0,0 +1,11 @@
+var Status = /* @__PURE__ */ ((Status2) => {
+  Status2["Info"] = "info";
+  Status2["Warning"] = "warning";
+  Status2["Success"] = "success";
+  Status2["Error"] = "error";
+  Status2["System"] = "system";
+  return Status2;
+})(Status || {});
+export {
+  Status
+};