@startupjs-ui/file-input 0.1.13 → 0.1.17
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/CHANGELOG.md +16 -0
- package/README.mdx +25 -2
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.1.17](https://github.com/startupjs/startupjs-ui/compare/v0.1.16...v0.1.17) (2026-02-12)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @startupjs-ui/file-input
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @startupjs-ui/file-input
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @startupjs-ui/file-input
|
package/README.mdx
CHANGED
|
@@ -8,7 +8,7 @@ import { Sandbox } from '@startupjs-ui/docs'
|
|
|
8
8
|
|
|
9
9
|
# FileInput
|
|
10
10
|
|
|
11
|
-
FileInput lets users pick a file (or image) and upload it to your StartupJS backend. The `value` is a `fileId` pointing to a document in the `files` model.
|
|
11
|
+
FileInput lets users pick a file (or image) and upload it to your StartupJS backend. The `value` is a `fileId` pointing to a document in the `files` model, and `onChange` is called with the new `fileId` after a successful upload.
|
|
12
12
|
|
|
13
13
|
```jsx
|
|
14
14
|
import { FileInput } from 'startupjs-ui'
|
|
@@ -28,6 +28,8 @@ return (
|
|
|
28
28
|
|
|
29
29
|
## Image picker
|
|
30
30
|
|
|
31
|
+
Set `image` to `true` to open an image picker instead of a document picker.
|
|
32
|
+
|
|
31
33
|
```jsx
|
|
32
34
|
const $avatarFileId = $()
|
|
33
35
|
const $file = useSub($.files[$avatarFileId.get() ?? '__DUMMY__'])
|
|
@@ -48,7 +50,28 @@ return (
|
|
|
48
50
|
)
|
|
49
51
|
```
|
|
50
52
|
|
|
51
|
-
**Note:**
|
|
53
|
+
**Note:** Appending `?` and the `updatedAt` timestamp to the URL is optional. It forces the browser to reload the image after it has been changed, instead of showing a cached version. This is useful for profile picture editors and similar use cases.
|
|
54
|
+
|
|
55
|
+
## Props
|
|
56
|
+
|
|
57
|
+
- **value** -- the current `fileId` (stored in the `files` model on the server)
|
|
58
|
+
- **onChange** -- called with the new `fileId` after a successful upload
|
|
59
|
+
- **image** -- when `true`, opens an image picker instead of a document picker
|
|
60
|
+
- **mimeTypes** -- a string or array of MIME types accepted by the picker
|
|
61
|
+
- **uploadImmediately** -- upload the selected file right after picking (default `true`)
|
|
62
|
+
- **beforeUpload** -- a hook called before the upload starts (can be async)
|
|
63
|
+
- **afterUpload** -- a hook called after the upload finishes (can be async)
|
|
64
|
+
- **render** -- a custom render function to replace the default Upload/Change/Delete buttons
|
|
65
|
+
- **style** -- custom styles for the component
|
|
66
|
+
- **ref** -- a ref object to access imperative methods (see below)
|
|
67
|
+
|
|
68
|
+
## Imperative methods
|
|
69
|
+
|
|
70
|
+
Pass a `ref` to access the following methods:
|
|
71
|
+
|
|
72
|
+
- **pickFile()** -- opens the native picker and optionally uploads the selected file
|
|
73
|
+
- **deleteFile()** -- deletes the currently selected file
|
|
74
|
+
- **uploadFile(asset, fileId?)** -- uploads a picked asset to the server and returns the new `fileId`
|
|
52
75
|
|
|
53
76
|
## Storage providers
|
|
54
77
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/file-input",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.17",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -18,10 +18,10 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@fortawesome/free-solid-svg-icons": "^7.1.0",
|
|
21
|
-
"@startupjs-ui/button": "^0.1.
|
|
21
|
+
"@startupjs-ui/button": "^0.1.16",
|
|
22
22
|
"@startupjs-ui/core": "^0.1.11",
|
|
23
|
-
"@startupjs-ui/dialogs": "^0.1.
|
|
24
|
-
"@startupjs-ui/div": "^0.1.
|
|
23
|
+
"@startupjs-ui/dialogs": "^0.1.17",
|
|
24
|
+
"@startupjs-ui/div": "^0.1.16",
|
|
25
25
|
"busboy": "^1.6.0",
|
|
26
26
|
"expo-document-picker": ">=14.0.0",
|
|
27
27
|
"expo-image-picker": ">=17.0.0",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"optional": true
|
|
47
47
|
}
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "902cb7536d017b53dc268cc54e8e54818279744c"
|
|
50
50
|
}
|