nuxt-file-storage 0.3.3-beta.0 → 0.3.3-beta.1
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
|
@@ -84,7 +84,19 @@ You can use Nuxt Storage to get the files from the `<input>` tag:
|
|
|
84
84
|
```
|
|
85
85
|
The `files` return a ref object that contains the files
|
|
86
86
|
|
|
87
|
-
The `clearFiles` function empties the files list without needing to reassign `files.value = []`
|
|
87
|
+
The `clearFiles` function empties the files list without needing to reassign `files.value = []`. It also accepts an optional `Ref<HTMLInputElement | null>` to clear the file input element in the DOM:
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<template>
|
|
91
|
+
<input type="file" ref="fileInputRef" @input="handleFileInput" multiple />
|
|
92
|
+
<button @click="clearFiles(fileInputRef)">Clear</button>
|
|
93
|
+
</template>
|
|
94
|
+
|
|
95
|
+
<script setup>
|
|
96
|
+
const fileInputRef = ref<HTMLInputElement | null>(null)
|
|
97
|
+
const { handleFileInput, clearFiles } = useFileStorage()
|
|
98
|
+
</script>
|
|
99
|
+
```
|
|
88
100
|
|
|
89
101
|
> `handleFileInput` returns a promise in case you need to check if the file input has concluded
|
|
90
102
|
|
package/dist/module.json
CHANGED
|
@@ -5,6 +5,6 @@ type Options = {
|
|
|
5
5
|
export default function (options?: Options): {
|
|
6
6
|
files: Ref<ClientFile[], ClientFile[]> & Iterable<ClientFile>;
|
|
7
7
|
handleFileInput: (event: any) => Promise<void>;
|
|
8
|
-
clearFiles: () => void;
|
|
8
|
+
clearFiles: (fileInputRef?: Ref<HTMLInputElement | null>) => void;
|
|
9
9
|
};
|
|
10
10
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ref } from "vue";
|
|
1
|
+
import { ref, unref } from "vue";
|
|
2
2
|
function createIterableRef(initialValue) {
|
|
3
3
|
const refObj = ref(initialValue);
|
|
4
4
|
Object.defineProperty(refObj, Symbol.iterator, {
|
|
@@ -32,8 +32,12 @@ export default function(options = { clearOldFiles: true }) {
|
|
|
32
32
|
reader.readAsDataURL(file);
|
|
33
33
|
});
|
|
34
34
|
};
|
|
35
|
-
const clearFiles = () => {
|
|
35
|
+
const clearFiles = (fileInputRef) => {
|
|
36
36
|
files.value.splice(0, files.value.length);
|
|
37
|
+
const el = fileInputRef ? unref(fileInputRef) : null;
|
|
38
|
+
if (el) {
|
|
39
|
+
el.value = "";
|
|
40
|
+
}
|
|
37
41
|
};
|
|
38
42
|
const handleFileInput = async (event) => {
|
|
39
43
|
if (options.clearOldFiles) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nuxt-file-storage",
|
|
3
|
-
"version": "0.3.3-beta.
|
|
3
|
+
"version": "0.3.3-beta.1",
|
|
4
4
|
"description": "Easy solution to store files in your nuxt apps. Be able to upload files from the frontend and recieve them from the backend to then save the files in your project.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": "NyllRE/nuxt-file-storage",
|