fix: remove delete button on uploader files

This commit is contained in:
tglide
2022-12-21 20:38:27 +00:00
parent f52eafbbe8
commit 43a21ea661
5 changed files with 229 additions and 311 deletions
+100 -86
View File
@@ -1900,16 +1900,17 @@
"peer": true
},
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.41.0.tgz",
"integrity": "sha512-DXUS22Y57/LAFSg3x7Vi6RNAuLpTXwxB9S2nIA7msBb/Zt8p7XqMwdpdc1IU7CkOQUPgAqR5fWvxuKCbneKGmA==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.47.0.tgz",
"integrity": "sha512-AHZtlXAMGkDmyLuLZsRpH3p4G/1iARIwc/T0vIem2YB+xW6pZaXYXzCBnZSF/5fdM97R9QqZWZ+h3iW10XgevQ==",
"dev": true,
"dependencies": {
"@typescript-eslint/scope-manager": "5.41.0",
"@typescript-eslint/type-utils": "5.41.0",
"@typescript-eslint/utils": "5.41.0",
"@typescript-eslint/scope-manager": "5.47.0",
"@typescript-eslint/type-utils": "5.47.0",
"@typescript-eslint/utils": "5.47.0",
"debug": "^4.3.4",
"ignore": "^5.2.0",
"natural-compare-lite": "^1.4.0",
"regexpp": "^3.2.0",
"semver": "^7.3.7",
"tsutils": "^3.21.0"
@@ -1932,14 +1933,14 @@
}
},
"node_modules/@typescript-eslint/parser": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.41.0.tgz",
"integrity": "sha512-HQVfix4+RL5YRWZboMD1pUfFN8MpRH4laziWkkAzyO1fvNOY/uinZcvo3QiFJVS/siNHupV8E5+xSwQZrl6PZA==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.47.0.tgz",
"integrity": "sha512-udPU4ckK+R1JWCGdQC4Qa27NtBg7w020ffHqGyAK8pAgOVuNw7YaKXGChk+udh+iiGIJf6/E/0xhVXyPAbsczw==",
"dev": true,
"dependencies": {
"@typescript-eslint/scope-manager": "5.41.0",
"@typescript-eslint/types": "5.41.0",
"@typescript-eslint/typescript-estree": "5.41.0",
"@typescript-eslint/scope-manager": "5.47.0",
"@typescript-eslint/types": "5.47.0",
"@typescript-eslint/typescript-estree": "5.47.0",
"debug": "^4.3.4"
},
"engines": {
@@ -1959,13 +1960,13 @@
}
},
"node_modules/@typescript-eslint/scope-manager": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.41.0.tgz",
"integrity": "sha512-xOxPJCnuktUkY2xoEZBKXO5DBCugFzjrVndKdUnyQr3+9aDWZReKq9MhaoVnbL+maVwWJu/N0SEtrtEUNb62QQ==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.47.0.tgz",
"integrity": "sha512-dvJab4bFf7JVvjPuh3sfBUWsiD73aiftKBpWSfi3sUkysDQ4W8x+ZcFpNp7Kgv0weldhpmMOZBjx1wKN8uWvAw==",
"dev": true,
"dependencies": {
"@typescript-eslint/types": "5.41.0",
"@typescript-eslint/visitor-keys": "5.41.0"
"@typescript-eslint/types": "5.47.0",
"@typescript-eslint/visitor-keys": "5.47.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1976,13 +1977,13 @@
}
},
"node_modules/@typescript-eslint/type-utils": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.41.0.tgz",
"integrity": "sha512-L30HNvIG6A1Q0R58e4hu4h+fZqaO909UcnnPbwKiN6Rc3BUEx6ez2wgN7aC0cBfcAjZfwkzE+E2PQQ9nEuoqfA==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.47.0.tgz",
"integrity": "sha512-1J+DFFrYoDUXQE1b7QjrNGARZE6uVhBqIvdaXTe5IN+NmEyD68qXR1qX1g2u4voA+nCaelQyG8w30SAOihhEYg==",
"dev": true,
"dependencies": {
"@typescript-eslint/typescript-estree": "5.41.0",
"@typescript-eslint/utils": "5.41.0",
"@typescript-eslint/typescript-estree": "5.47.0",
"@typescript-eslint/utils": "5.47.0",
"debug": "^4.3.4",
"tsutils": "^3.21.0"
},
@@ -2003,9 +2004,9 @@
}
},
"node_modules/@typescript-eslint/types": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.41.0.tgz",
"integrity": "sha512-5BejraMXMC+2UjefDvrH0Fo/eLwZRV6859SXRg+FgbhA0R0l6lDqDGAQYhKbXhPN2ofk2kY5sgGyLNL907UXpA==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.47.0.tgz",
"integrity": "sha512-eslFG0Qy8wpGzDdYKu58CEr3WLkjwC5Usa6XbuV89ce/yN5RITLe1O8e+WFEuxnfftHiJImkkOBADj58ahRxSg==",
"dev": true,
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2016,13 +2017,13 @@
}
},
"node_modules/@typescript-eslint/typescript-estree": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.41.0.tgz",
"integrity": "sha512-SlzFYRwFSvswzDSQ/zPkIWcHv8O5y42YUskko9c4ki+fV6HATsTODUPbRbcGDFYP86gaJL5xohUEytvyNNcXWg==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.47.0.tgz",
"integrity": "sha512-LxfKCG4bsRGq60Sqqu+34QT5qT2TEAHvSCCJ321uBWywgE2dS0LKcu5u+3sMGo+Vy9UmLOhdTw5JHzePV/1y4Q==",
"dev": true,
"dependencies": {
"@typescript-eslint/types": "5.41.0",
"@typescript-eslint/visitor-keys": "5.41.0",
"@typescript-eslint/types": "5.47.0",
"@typescript-eslint/visitor-keys": "5.47.0",
"debug": "^4.3.4",
"globby": "^11.1.0",
"is-glob": "^4.0.3",
@@ -2043,16 +2044,16 @@
}
},
"node_modules/@typescript-eslint/utils": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.41.0.tgz",
"integrity": "sha512-QlvfwaN9jaMga9EBazQ+5DDx/4sAdqDkcs05AsQHMaopluVCUyu1bTRUVKzXbgjDlrRAQrYVoi/sXJ9fmG+KLQ==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.47.0.tgz",
"integrity": "sha512-U9xcc0N7xINrCdGVPwABjbAKqx4GK67xuMV87toI+HUqgXj26m6RBp9UshEXcTrgCkdGYFzgKLt8kxu49RilDw==",
"dev": true,
"dependencies": {
"@types/json-schema": "^7.0.9",
"@types/semver": "^7.3.12",
"@typescript-eslint/scope-manager": "5.41.0",
"@typescript-eslint/types": "5.41.0",
"@typescript-eslint/typescript-estree": "5.41.0",
"@typescript-eslint/scope-manager": "5.47.0",
"@typescript-eslint/types": "5.47.0",
"@typescript-eslint/typescript-estree": "5.47.0",
"eslint-scope": "^5.1.1",
"eslint-utils": "^3.0.0",
"semver": "^7.3.7"
@@ -2069,12 +2070,12 @@
}
},
"node_modules/@typescript-eslint/visitor-keys": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.41.0.tgz",
"integrity": "sha512-vilqeHj267v8uzzakbm13HkPMl7cbYpKVjgFWZPIOHIJHZtinvypUhJ5xBXfWYg4eFKqztbMMpOgFpT9Gfx4fw==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.47.0.tgz",
"integrity": "sha512-ByPi5iMa6QqDXe/GmT/hR6MZtVPi0SqMQPDx15FczCBXJo/7M8T88xReOALAfpBLm+zxpPfmhuEvPb577JRAEg==",
"dev": true,
"dependencies": {
"@typescript-eslint/types": "5.41.0",
"@typescript-eslint/types": "5.47.0",
"eslint-visitor-keys": "^3.3.0"
},
"engines": {
@@ -5713,6 +5714,12 @@
"integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
"dev": true
},
"node_modules/natural-compare-lite": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
"integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
"dev": true
},
"node_modules/node-fetch": {
"version": "2.6.7",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
@@ -7230,9 +7237,9 @@
"dev": true
},
"node_modules/typescript": {
"version": "4.8.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
"integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
"version": "4.9.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
"dev": true,
"bin": {
"tsc": "bin/tsc",
@@ -9169,69 +9176,70 @@
"peer": true
},
"@typescript-eslint/eslint-plugin": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.41.0.tgz",
"integrity": "sha512-DXUS22Y57/LAFSg3x7Vi6RNAuLpTXwxB9S2nIA7msBb/Zt8p7XqMwdpdc1IU7CkOQUPgAqR5fWvxuKCbneKGmA==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.47.0.tgz",
"integrity": "sha512-AHZtlXAMGkDmyLuLZsRpH3p4G/1iARIwc/T0vIem2YB+xW6pZaXYXzCBnZSF/5fdM97R9QqZWZ+h3iW10XgevQ==",
"dev": true,
"requires": {
"@typescript-eslint/scope-manager": "5.41.0",
"@typescript-eslint/type-utils": "5.41.0",
"@typescript-eslint/utils": "5.41.0",
"@typescript-eslint/scope-manager": "5.47.0",
"@typescript-eslint/type-utils": "5.47.0",
"@typescript-eslint/utils": "5.47.0",
"debug": "^4.3.4",
"ignore": "^5.2.0",
"natural-compare-lite": "^1.4.0",
"regexpp": "^3.2.0",
"semver": "^7.3.7",
"tsutils": "^3.21.0"
}
},
"@typescript-eslint/parser": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.41.0.tgz",
"integrity": "sha512-HQVfix4+RL5YRWZboMD1pUfFN8MpRH4laziWkkAzyO1fvNOY/uinZcvo3QiFJVS/siNHupV8E5+xSwQZrl6PZA==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.47.0.tgz",
"integrity": "sha512-udPU4ckK+R1JWCGdQC4Qa27NtBg7w020ffHqGyAK8pAgOVuNw7YaKXGChk+udh+iiGIJf6/E/0xhVXyPAbsczw==",
"dev": true,
"requires": {
"@typescript-eslint/scope-manager": "5.41.0",
"@typescript-eslint/types": "5.41.0",
"@typescript-eslint/typescript-estree": "5.41.0",
"@typescript-eslint/scope-manager": "5.47.0",
"@typescript-eslint/types": "5.47.0",
"@typescript-eslint/typescript-estree": "5.47.0",
"debug": "^4.3.4"
}
},
"@typescript-eslint/scope-manager": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.41.0.tgz",
"integrity": "sha512-xOxPJCnuktUkY2xoEZBKXO5DBCugFzjrVndKdUnyQr3+9aDWZReKq9MhaoVnbL+maVwWJu/N0SEtrtEUNb62QQ==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.47.0.tgz",
"integrity": "sha512-dvJab4bFf7JVvjPuh3sfBUWsiD73aiftKBpWSfi3sUkysDQ4W8x+ZcFpNp7Kgv0weldhpmMOZBjx1wKN8uWvAw==",
"dev": true,
"requires": {
"@typescript-eslint/types": "5.41.0",
"@typescript-eslint/visitor-keys": "5.41.0"
"@typescript-eslint/types": "5.47.0",
"@typescript-eslint/visitor-keys": "5.47.0"
}
},
"@typescript-eslint/type-utils": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.41.0.tgz",
"integrity": "sha512-L30HNvIG6A1Q0R58e4hu4h+fZqaO909UcnnPbwKiN6Rc3BUEx6ez2wgN7aC0cBfcAjZfwkzE+E2PQQ9nEuoqfA==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.47.0.tgz",
"integrity": "sha512-1J+DFFrYoDUXQE1b7QjrNGARZE6uVhBqIvdaXTe5IN+NmEyD68qXR1qX1g2u4voA+nCaelQyG8w30SAOihhEYg==",
"dev": true,
"requires": {
"@typescript-eslint/typescript-estree": "5.41.0",
"@typescript-eslint/utils": "5.41.0",
"@typescript-eslint/typescript-estree": "5.47.0",
"@typescript-eslint/utils": "5.47.0",
"debug": "^4.3.4",
"tsutils": "^3.21.0"
}
},
"@typescript-eslint/types": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.41.0.tgz",
"integrity": "sha512-5BejraMXMC+2UjefDvrH0Fo/eLwZRV6859SXRg+FgbhA0R0l6lDqDGAQYhKbXhPN2ofk2kY5sgGyLNL907UXpA==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.47.0.tgz",
"integrity": "sha512-eslFG0Qy8wpGzDdYKu58CEr3WLkjwC5Usa6XbuV89ce/yN5RITLe1O8e+WFEuxnfftHiJImkkOBADj58ahRxSg==",
"dev": true
},
"@typescript-eslint/typescript-estree": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.41.0.tgz",
"integrity": "sha512-SlzFYRwFSvswzDSQ/zPkIWcHv8O5y42YUskko9c4ki+fV6HATsTODUPbRbcGDFYP86gaJL5xohUEytvyNNcXWg==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.47.0.tgz",
"integrity": "sha512-LxfKCG4bsRGq60Sqqu+34QT5qT2TEAHvSCCJ321uBWywgE2dS0LKcu5u+3sMGo+Vy9UmLOhdTw5JHzePV/1y4Q==",
"dev": true,
"requires": {
"@typescript-eslint/types": "5.41.0",
"@typescript-eslint/visitor-keys": "5.41.0",
"@typescript-eslint/types": "5.47.0",
"@typescript-eslint/visitor-keys": "5.47.0",
"debug": "^4.3.4",
"globby": "^11.1.0",
"is-glob": "^4.0.3",
@@ -9240,28 +9248,28 @@
}
},
"@typescript-eslint/utils": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.41.0.tgz",
"integrity": "sha512-QlvfwaN9jaMga9EBazQ+5DDx/4sAdqDkcs05AsQHMaopluVCUyu1bTRUVKzXbgjDlrRAQrYVoi/sXJ9fmG+KLQ==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.47.0.tgz",
"integrity": "sha512-U9xcc0N7xINrCdGVPwABjbAKqx4GK67xuMV87toI+HUqgXj26m6RBp9UshEXcTrgCkdGYFzgKLt8kxu49RilDw==",
"dev": true,
"requires": {
"@types/json-schema": "^7.0.9",
"@types/semver": "^7.3.12",
"@typescript-eslint/scope-manager": "5.41.0",
"@typescript-eslint/types": "5.41.0",
"@typescript-eslint/typescript-estree": "5.41.0",
"@typescript-eslint/scope-manager": "5.47.0",
"@typescript-eslint/types": "5.47.0",
"@typescript-eslint/typescript-estree": "5.47.0",
"eslint-scope": "^5.1.1",
"eslint-utils": "^3.0.0",
"semver": "^7.3.7"
}
},
"@typescript-eslint/visitor-keys": {
"version": "5.41.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.41.0.tgz",
"integrity": "sha512-vilqeHj267v8uzzakbm13HkPMl7cbYpKVjgFWZPIOHIJHZtinvypUhJ5xBXfWYg4eFKqztbMMpOgFpT9Gfx4fw==",
"version": "5.47.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.47.0.tgz",
"integrity": "sha512-ByPi5iMa6QqDXe/GmT/hR6MZtVPi0SqMQPDx15FczCBXJo/7M8T88xReOALAfpBLm+zxpPfmhuEvPb577JRAEg==",
"dev": true,
"requires": {
"@typescript-eslint/types": "5.41.0",
"@typescript-eslint/types": "5.47.0",
"eslint-visitor-keys": "^3.3.0"
}
},
@@ -12062,6 +12070,12 @@
"integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
"dev": true
},
"natural-compare-lite": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
"integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
"dev": true
},
"node-fetch": {
"version": "2.6.7",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
@@ -13159,9 +13173,9 @@
"dev": true
},
"typescript": {
"version": "4.8.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
"integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
"version": "4.9.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
"dev": true
},
"undici": {
+6 -2
View File
@@ -1,3 +1,7 @@
<div class="table-row" role="row">
<script lang="ts">
export let href: string | undefined = undefined;
</script>
<svelte:element this={href ? 'a' : 'div'} {href} class="table-row" role="row">
<slot />
</div>
</svelte:element>
+34 -37
View File
@@ -10,35 +10,26 @@ type UploaderFile = {
completed: boolean;
failed: boolean;
error?: string;
size: number;
};
export type Uploader = {
isOpen: boolean;
isCollapsed: boolean;
files: UploaderFile[];
};
const initialState: Uploader = {
isOpen: false,
isCollapsed: false,
files: []
};
const createUploader = () => {
const { subscribe, set, update } = writable<Uploader>({
isOpen: false,
isCollapsed: false,
files: []
});
const updateFile = (id: string, file: Partial<UploaderFile>) => {
return update((n) => {
const index = n.files.findIndex((f) => f.$id === id);
n.files[index] = {
...n.files[index],
...file
};
return n;
});
};
const { subscribe, set, update } = writable<Uploader>({ ...initialState });
return {
subscribe,
close: () =>
update((n) => {
n.isOpen = !n.isOpen;
@@ -50,20 +41,32 @@ const createUploader = () => {
return n;
}),
reset: () =>
set({
isOpen: false,
isCollapsed: false,
files: []
}),
uploadFile: async (bucketId: string, id: string, file: File, permissions: string[]) => {
reset: () => set({ ...initialState }),
updateFile: (id: string, file: Partial<UploaderFile>) => {
update((n) => {
const index = n.files.findIndex((f) => f.$id === id);
n.files[index] = {
...n.files[index],
...file
};
return n;
});
},
uploadFile: async function (
bucketId: string,
id: string,
file: File,
permissions: string[]
) {
const newFile: UploaderFile = {
$id: id,
bucketId: bucketId,
bucketId,
name: file.name,
progress: 0,
completed: false,
failed: false
failed: false,
size: file.size
};
update((n) => {
n.isOpen = true;
@@ -80,13 +83,13 @@ const createUploader = () => {
newFile.$id = p.$id;
newFile.progress = p.progress;
newFile.completed = p.progress === 100 ? true : false;
updateFile(p.$id, newFile);
this.updateFile(p.$id, newFile);
}
);
newFile.$id = uploadedFile.$id;
newFile.progress = 100;
newFile.completed = true;
updateFile(newFile.$id, newFile);
this.updateFile(newFile.$id, newFile);
},
removeFromQueue: (id: string) => {
update((n) => {
@@ -94,14 +97,8 @@ const createUploader = () => {
return n;
});
},
removeFile: async (file: Models.File) => {
if (file.chunksTotal === file.chunksUploaded) {
return update((n) => {
n.files = n.files.filter((f) => f.$id !== file.$id);
return n;
});
}
removeFile: async function (file: Models.File) {
if (file.chunksTotal === file.chunksUploaded) this.removeFromQueue(file.$id);
}
};
};
@@ -23,8 +23,7 @@
TableCellHead,
TableCellText,
TableHeader,
TableRow,
TableRowLink
TableRow
} from '$lib/elements/table';
import { toLocaleDate } from '$lib/helpers/date';
import { calculateSize } from '$lib/helpers/sizeConvertion';
@@ -34,14 +33,13 @@
import { uploader } from '$lib/stores/uploader';
import { wizard } from '$lib/stores/wizard';
import type { Models } from '@aw-labs/appwrite-console';
import Create from '../create.svelte';
import CreateFile from '../createFile/createFile.svelte';
import Delete from '../deleteFile.svelte';
import type { PageData } from './$types';
export let data: PageData;
let showCreate = false;
let showDelete = false;
let showDropdown = [];
let selectedFile: Models.File = null;
@@ -51,11 +49,6 @@
const getPreview = (fileId: string) =>
sdkForProject.storage.getFilePreview(bucketId, fileId, 32, 32).toString() + '&mode=admin';
function fileCreated() {
showCreate = false;
invalidate(Dependencies.FILES);
}
function fileDeleted(event: CustomEvent<Models.File>) {
showDelete = false;
uploader.removeFile(event.detail);
@@ -68,6 +61,10 @@
uploader.removeFile(file);
invalidate(Dependencies.FILES);
trackEvent('submit_file_delete');
addNotification({
type: 'success',
message: `${file.name} has been deleted`
});
} catch (error) {
addNotification({
type: 'error',
@@ -75,14 +72,37 @@
});
}
}
enum FileStatus {
PENDING,
UPLOADING,
DONE,
}
type TableFile = Models.File & { status: FileStatus };
$: files = [
...$uploader.files
.filter((f) => !f.completed)
.map((file) => ({
...file,
status: FileStatus.UPLOADING,
$createdAt: new Date().toISOString(),
$updatedAt: new Date().toISOString(),
mimeType: '',
$permissions: [],
sizeOriginal: file.size,
signature: '',
chunksTotal: 1,
chunksUploaded: 0
})),
...data.files.files.map((file) => ({
...file,
status: file.chunksTotal / file.chunksUploaded !== 1 ? FileStatus.PENDING : FileStatus.DONE
}))
] satisfies TableFile[];
</script>
<Container>
<SearchQuery search={data.search} placeholder="Search by filename">
<Button on:click={() => (showCreate = true)} event="create_file">
<span class="icon-plus" aria-hidden="true" /> <span class="text">Old create file</span>
</Button>
<Button on:click={() => wizard.start(CreateFile)} event="create_file">
<span class="icon-plus" aria-hidden="true" /> <span class="text">Create file</span>
</Button>
@@ -98,34 +118,32 @@
<TableCellHead width={30} />
</TableHeader>
<TableBody>
{#each data.files.files as file, index}
{#if file.chunksTotal / file.chunksUploaded !== 1}
<TableRow>
<TableCell title="Name">
<div class="u-flex u-gap-12 u-main-space-between">
{#each files as file, index}
{@const href = `${base}/projects/${projectId}/buckets/${bucketId}/files/${file.$id}`}
<TableRow href={file.status === FileStatus.PENDING ? undefined : href}>
<TableCell title="Name">
<div class="u-flex u-gap-12 u-cross-center">
{#if file.status !== FileStatus.DONE}
<span class="avatar is-size-small is-color-empty" />
<span class="text u-trim"> {file.name}</span>
<div>
<Pill warning>Pending</Pill>
</div>
</div>
</TableCell>
<TableCellText title="Type">{file.mimeType}</TableCellText>
<TableCellText title="Size">
{calculateSize(file.sizeOriginal)}
</TableCellText>
<TableCellText title="Date Created">
{toLocaleDate(file.$createdAt)}
</TableCellText>
{:else}
<Avatar size={32} src={getPreview(file.$id)} name={file.name} />
{/if}
<span class="text u-trim"> {file.name}</span>
{#if file.status !== FileStatus.DONE}
<Pill warning>Pending</Pill>
{/if}
</div>
</TableCell>
<TableCellText title="Type">{file.mimeType}</TableCellText>
<TableCellText title="Size">
{calculateSize(file.sizeOriginal)}
</TableCellText>
<TableCellText title="Date Created">
{toLocaleDate(file.$createdAt)}
</TableCellText>
{#if file.status === FileStatus.PENDING}
<TableCell>
<div class="u-flex u-main-center">
<button
class="button is-only-icon is-text"
aria-label="Delete item"
on:click|preventDefault>
<span class="icon-refresh" aria-hidden="true" />
</button>
<button
class="button is-only-icon is-text"
aria-label="Delete item"
@@ -136,55 +154,41 @@
</button>
</div>
</TableCell>
</TableRow>
{:else}
<TableRowLink
href={`${base}/console/project-${projectId}/storage/bucket-${bucketId}/file-${file.$id}`}>
<TableCell title="Name">
<div class="u-flex u-gap-12">
<Avatar size={32} src={getPreview(file.$id)} name={file.name} />
<span class="text u-trim"> {file.name}</span>
{:else if file.status === FileStatus.DONE}
<TableCell showOverflow>
<div class="u-flex u-main-center">
<DropList
bind:show={showDropdown[index]}
placement="bottom-start"
noArrow>
<button
class="button is-only-icon is-text"
aria-label="More options"
on:click|preventDefault={() => {
showDropdown[index] = !showDropdown[index];
}}>
<span class="icon-dots-horizontal" aria-hidden="true" />
</button>
<svelte:fragment slot="list">
<DropListLink
on:click={() => {
showDropdown[index] = false;
}}
href={`${base}/console/project-${projectId}/storage/bucket-${bucketId}/file-${file.$id}`}
icon="pencil">Update</DropListLink>
<DropListItem
icon="trash"
on:click={() => {
showDropdown[index] = false;
selectedFile = file;
showDelete = true;
}}>Delete</DropListItem>
</svelte:fragment>
</DropList>
</div>
</TableCell>
<TableCellText title="Type">{file.mimeType}</TableCellText>
<TableCellText title="Size">
{calculateSize(file.sizeOriginal)}
</TableCellText>
<TableCellText title="Date Created">
{toLocaleDate(file.$createdAt)}
</TableCellText>
<TableCell showOverflow>
<DropList
bind:show={showDropdown[index]}
placement="bottom-start"
noArrow>
<button
class="button is-only-icon is-text"
aria-label="More options"
on:click|preventDefault={() => {
showDropdown[index] = !showDropdown[index];
}}>
<span class="icon-dots-horizontal" aria-hidden="true" />
</button>
<svelte:fragment slot="list">
<DropListLink
on:click={() => {
showDropdown[index] = false;
}}
href={`${base}/console/project-${projectId}/storage/bucket-${bucketId}/file-${file.$id}`}
icon="pencil">Update</DropListLink>
<DropListItem
icon="trash"
on:click={() => {
showDropdown[index] = false;
selectedFile = file;
showDelete = true;
}}>Delete</DropListItem>
</svelte:fragment>
</DropList>
</TableCell>
</TableRowLink>
{/if}
{/if}
</TableRow>
{/each}
</TableBody>
</Table>
@@ -222,7 +226,6 @@
{/if}
</Container>
<Create bind:showCreate on:created={fileCreated} />
{#if selectedFile}
<Delete file={selectedFile} bind:showDelete on:deleted={fileDeleted} />
{/if}
@@ -1,100 +0,0 @@
<script lang="ts">
import { Button, FormList, InputFile } from '$lib/elements/forms';
import { Pill } from '$lib/elements';
import { Modal, CustomId, Heading, Alert } from '$lib/components';
import { createEventDispatcher } from 'svelte';
import { page } from '$app/stores';
import { uploader } from '$lib/stores/uploader';
import { bucket } from './store';
import { calculateSize } from '$lib/helpers/sizeConvertion';
import { Permissions } from '$lib/components/permissions';
import { addNotification } from '$lib/stores/notifications';
import { trackEvent } from '$lib/actions/analytics';
export let showCreate = false;
const bucketId = $page.params.bucket;
const dispatch = createEventDispatcher();
let files: FileList;
let permissions: string[] = [];
let id: string = null;
let error: string;
let showCustomId = false;
async function create() {
try {
showCreate = false;
await uploader.uploadFile(bucketId, id, files[0], permissions);
files = null;
showCustomId = false;
// uploader.addFile(file);
dispatch('created');
addNotification({
type: 'success',
message: `File has been uploaded`
});
trackEvent('submit_file_create');
} catch ({ message }) {
error = message;
}
}
$: if (!showCreate) {
id = files = error = null;
permissions = [];
}
</script>
<Modal size="big" {error} bind:show={showCreate} on:submit={create}>
<svelte:fragment slot="header">Create File</svelte:fragment>
<FormList>
<div>
<InputFile bind:files allowedFileExtensions={$bucket.allowedFileExtensions} />
<p>Max file size: {calculateSize($bucket.maximumFileSize)}</p>
</div>
{#if !showCustomId}
<div>
<Pill button on:click={() => (showCustomId = !showCustomId)}>
<span class="icon-pencil" aria-hidden="true" /><span class="text">
File ID
</span>
</Pill>
</div>
{:else}
<CustomId bind:show={showCustomId} name="File" bind:id />
{/if}
<Heading tag="h6" size="7">Update Permissions</Heading>
<p class="text">
Choose who can access your buckets and files. For more information, check out the
<a
href="https://appwrite.io/docs/permissions"
target="_blank"
rel="noopener noreferrer"
class="link">Permissions Guide</a> in our documentation.
</p>
{#if $bucket.fileSecurity}
<div class="common-section">
<Alert type="info">
<svelte:fragment slot="title">File security enabled</svelte:fragment>
Users will be able to access this file if they have been granted
<b>either File or Bucket permissions</b>.
</Alert>
</div>
<div class="common-section">
<Permissions bind:permissions />
</div>
{:else}
<Alert type="info">
<svelte:fragment slot="title">File security disabled</svelte:fragment>
If you want to assign file permissions, navigate to Bucket settings and enable file security.
Otherwise, only Bucket permissions will be used.
</Alert>
{/if}
</FormList>
<svelte:fragment slot="footer">
<Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
<Button submit>Create</Button>
</svelte:fragment>
</Modal>