filepond 5.0.0-alpha.1 → 5.0.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,38 +1,34 @@
|
|
|
1
1
|
# [<img src="https://github.com/pqina/filepond-github-assets/blob/master/logo.svg" height="44" alt="FilePond"/>](https://filepond.com)
|
|
2
2
|
|
|
3
|
-
**This is the v5 beta branch**
|
|
4
|
-
|
|
5
|
-
Some high priority TODO's
|
|
6
|
-
|
|
7
|
-
- Docs are on the way
|
|
8
|
-
- Naming of some types
|
|
9
|
-
- Safari flashing of video while dragginh
|
|
10
|
-
- Run more tests on mobile devices
|
|
11
|
-
- Add basic image manipulation extensions
|
|
12
|
-
- default styles for `:valid`, `:invalid, and `:focus`
|
|
13
|
-
|
|
14
|
-
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.
|
|
15
|
-
|
|
16
3
|
[](https://github.com/pqina/filepond/blob/v/LICENSE)
|
|
17
4
|
[](https://www.npmjs.com/package/filepond)
|
|
18
5
|
|
|
19
6
|
[](https://discord.gg/KTyymsrTrX)
|
|
20
7
|
|
|
21
|
-
|
|
8
|
+
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.
|
|
9
|
+
|
|
10
|
+
**This is the v5 alpha/beta branch. [Take me to the v4 branch](https://github.com/pqina/filepond)**
|
|
22
11
|
|
|
23
|
-
|
|
12
|
+
TODO:
|
|
24
13
|
|
|
25
|
-
|
|
14
|
+
- Docs are on the way
|
|
15
|
+
- Naming of some types
|
|
16
|
+
- Safari flashing of video while dragging
|
|
17
|
+
- Run more tests on mobile devices
|
|
18
|
+
- Add basic image manipulation extensions
|
|
19
|
+
- default styles for `:valid`, `:invalid`, and `:focus`
|
|
20
|
+
|
|
21
|
+
If you're trying out v5, please share your feedback on [Discord](https://discord.gg/KTyymsrTrX)
|
|
26
22
|
|
|
27
|
-
##
|
|
23
|
+
## Install
|
|
28
24
|
|
|
29
25
|
We can install the `filepond` package by running the following command in our terminal:
|
|
30
26
|
|
|
31
27
|
```
|
|
32
|
-
npm install filepond@
|
|
28
|
+
npm install filepond@alpha
|
|
33
29
|
```
|
|
34
30
|
|
|
35
|
-
|
|
31
|
+
We wrap an `<input type="file">` with the `<file-pond>` custom element and then register the custom element using the `defineFilePond` function.
|
|
36
32
|
|
|
37
33
|
```html
|
|
38
34
|
<form action="/upload" method="POST">
|
|
@@ -48,7 +44,6 @@ npm install filepond@5.0.0-alpha
|
|
|
48
44
|
import { defineFilePond } from 'filepond';
|
|
49
45
|
import { en_GB } from 'filepond/locales';
|
|
50
46
|
|
|
51
|
-
// registers the <file-pond> custom element, returns found elements, and sets initial options
|
|
52
47
|
const elements = defineFilePond({
|
|
53
48
|
locale: en_GB,
|
|
54
49
|
});
|
|
@@ -57,11 +52,7 @@ npm install filepond@5.0.0-alpha
|
|
|
57
52
|
|
|
58
53
|
## License
|
|
59
54
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
MIT License
|
|
63
|
-
|
|
64
|
-
Copyright (c) 2025 Pqina
|
|
55
|
+
Copyright (c) 2017-2025 Pqina
|
|
65
56
|
|
|
66
57
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
67
58
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -80,3 +71,7 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
|
80
71
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
81
72
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
82
73
|
SOFTWARE.
|
|
74
|
+
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
```
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const defaultStyles = "/* Default FilePond Styles */\n:host {\n --default-
|
|
1
|
+
const defaultStyles = "/* Default FilePond Styles */\n:host {\n --default-color: currentColor;\n --default-background-color: hsl(from var(--default-color) calc(h + 180) s calc(100 - l));\n --default-padding: 1em;\n --default-border-radius: 1.25em;\n --default-backdrop-filter: blur(20px) saturate(1.25);\n --default-primary-color: deepskyblue;\n --default-border: 1px solid\n rgb(from var(--default-color) r g b / calc(0.1 + var(--default-contrast-factor, 0) * 0.065));\n\n /* entry list positioning */\n display: flex;\n flex-direction: column;\n gap: var(--default-padding);\n\n /* used to detect theme changes and calculate colors */\n & .pipet {\n position: absolute;\n pointer-events: none;\n width: 0;\n height: 0;\n color: var(--default-color);\n background-color: var(--default-background-color);\n transition:\n color 1ms,\n background-color 1ms;\n }\n\n /* slot element layout */\n & slot {\n position: relative;\n isolation: isolate;\n }\n}\n\nfile-pond-entry-list[empty] {\n margin-top: calc(-1 * var(--default-padding));\n}\n\n/* slot and slotted element styles */\n::slotted(input[type='file']) {\n position: absolute;\n width: 100%;\n padding: 0;\n margin: 0;\n z-index: -1;\n pointer-events: none;\n user-select: none;\n\n /* hide from view */\n mask: linear-gradient(transparent, transparent);\n\n /* we align it to the top so Safari tooltip points to the field */\n top: 0;\n left: 0;\n}\n\n::slotted(label) {\n --width-px: calc(var(--width) * 1px);\n --center-px: calc((var(--width-px) - (2 * var(--default-padding))) * 0.5);\n\n display: inline-block;\n transform: translateX(calc(var(--center-px) - 50%));\n align-self: flex-start;\n\n padding-top: var(--default-padding);\n padding-bottom: var(--default-padding);\n\n color: var(--default-color);\n}\n\n/* sub elements */\nfile-pond-drop-area {\n --border-radius: var(--default-border-radius);\n --border: var(--default-border);\n}\n\nfile-pond-drop-indicator {\n --border-radius: var(--default-border-radius);\n --background-color: color-mix(\n in srgb,\n var(--default-color) 10%,\n var(--default-background-color)\n );\n}\n\nfile-pond-entry-list {\n --entry-color: var(--default-color);\n --entry-background-color: var(--default-background-color);\n\n --entry-shadow: 0 1px 4px rgb(0 0 0 / 0.2);\n --entry-lifted-shadow: 0 4px 8px rgb(0 0 0 / 0.5);\n\n --entry-button-outline: 0 0 0 1.5px currentColor;\n\n &::part(entry-button) {\n --btn-size: 1.5em;\n --btn-border-radius: calc(var(--entry-border-radius) - var(--entry-padding) * 0.625);\n --btn-background-color: rgb(from var(--entry-color) r g b / 0.15);\n --btn-icon-stroke: 2.5;\n\n box-shadow: 0 0 0 0 transparent;\n transition:\n box-shadow var(--_150ms, 0) ease-in-out,\n background-color var(--_150ms, 0) ease-in-out;\n }\n\n &::part(entry-button):hover {\n background-color: rgb(\n from var(--entry-color) r g b / calc(0.25 + var(--default-contrast-factor, 0) * 0.075)\n );\n box-shadow: var(--entry-button-outline);\n }\n\n &::part(entry-button):focus-visible {\n box-shadow: var(--entry-button-outline);\n }\n\n &::part(media-button) {\n --btn-border-radius: var(--panel-border-radius);\n transition:\n box-shadow var(--_150ms, 0) ease-in-out,\n background-color var(--_150ms, 0) ease-in-out;\n }\n\n &::part(media-button):hover {\n background-color: rgb(from currentColor r g b / 0.15);\n box-shadow: var(--entry-button-outline);\n }\n\n &::part(media-button):focus-visible {\n box-shadow: var(--entry-button-outline);\n }\n\n &::part(list) {\n display: flex;\n flex-direction: column;\n gap: calc(var(--default-padding) * 0.5);\n }\n\n &::part(entry) {\n display: grid;\n grid: min-content 1fr min-content / min-content 1fr min-content;\n }\n\n &::part(entry-load-state) {\n grid-row: 1;\n grid-column: 1;\n padding: var(--entry-padding);\n }\n\n &::part(entry-info) {\n grid-row: 1;\n grid-column: 2;\n padding-top: var(--entry-padding);\n padding-bottom: var(--entry-padding);\n }\n\n &::part(entry-store-state) {\n grid-row: 1;\n grid-column: 3;\n padding: var(--entry-padding);\n }\n\n &::part(entry-status) {\n grid-row: 2;\n grid-column: 1 / 4;\n }\n\n &::part(entry-media) {\n grid-row: 2;\n grid-column: 1 / 4;\n }\n\n &::part(media-controls) {\n grid-row: 2;\n grid-column: 1 / 4;\n align-self: end;\n color: #fff;\n margin: 0.6125em;\n\n /* style for buttons in this component */\n --btn-size: 1.25em;\n --btn-icon-stroke: 2.5;\n --btn-icon-size: 0.75em;\n\n /* panel style in this component */\n --panel-border-radius: 0.25em;\n --panel-border-radius: calc(var(--entry-border-radius) - 0.3125em);\n --panel-background-color: rgb(0 0 0 / 0.35);\n --panel-backdrop-filter: var(--default-backdrop-filter);\n }\n}\n\n/* Powered by FilePond */\n:host a {\n --font-size: 0.625;\n --inset: calc(var(--default-padding) / var(--font-size));\n --text-opacity: calc(0.5 - var(--default-contrast-factor, 0) * 0.1);\n --line-opacity: calc(0.2 + var(--default-contrast-factor, 0) * 0.05);\n position: absolute;\n top: 0;\n left: 0;\n line-height: 2;\n transform: translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px))\n translateX(calc(-100% - var(--inset)));\n font-size: calc(var(--font-size) * 1em);\n color: rgb(from var(--default-color) r g b / var(--text-opacity));\n text-underline-offset: 1px;\n text-decoration-color: rgb(from var(--default-color) r g b / var(--line-opacity));\n text-transform: lowercase;\n transition: color var(--_150ms) ease-in-out;\n user-select: none;\n &:hover {\n --text-opacity: 0.75;\n --line-opacity: 0.25;\n }\n}\n";
|
|
2
2
|
export {
|
|
3
3
|
defaultStyles as default
|
|
4
4
|
};
|