upload: show partial size, while for the percentage you can hover the progress-bar
Massimo Melina committed
Jan 15, 2025 at 20:35 UTC
5bcd9e409d3ae4b650584db6a8ff225d86d8d7d1
1 file changed
+7
-6
frontend/src/upload.ts
+7
-6
@@ -93,7 +93,7 @@ export function showUpload() {
93
)
94
),
95
),
96
- h(FilesList, {
96
+ h(FileList, {
97
entries: uploadState.adding,
98
actions: {
99
cancel: rec => _.remove(uploadState.adding, rec),
@@ -133,7 +133,7 @@ export function showUpload() {
133
qs.map((q,idx) =>
134
h('div', { key: q.to },
135
h(Link, { to: q.to, onClick: close }, t`Destination`, ' ', decodeURI(q.to)),
136
- h(FilesList, {
136
+ h(FileList, {
137
entries: uploadState.qs[idx].entries,
138
actions: {
139
cancel: f => {
@@ -159,8 +159,8 @@ export function showUpload() {
159
160
}
161
162
-function FilesList({ entries, actions }: { entries: ToUpload[], actions: { [icon:string]: null | ((rec :ToUpload) => any) } }) {
163
- const { uploading, progress } = useSnapshot(uploadState)
162
+function FileList({ entries, actions }: { entries: ToUpload[], actions: { [icon:string]: null | ((rec :ToUpload) => any) } }) {
163
+ const { uploading, progress, partial } = useSnapshot(uploadState)
164
const snapEntries = useSnapshot(entries)
165
const [all, setAll] = useState(false)
166
useEffect(() => setAll(false), [entries.length])
@@ -170,6 +170,7 @@ function FilesList({ entries, actions }: { entries: ToUpload[], actions: { [icon
170
h('tbody', {},
171
snapEntries.slice(0, MAX).map((e, i) => {
172
const working = e.file === uploading?.file // e is a proxy, so we check 'file' as it's a ref
173
+ const title = formatPerc(progress)
174
return h(Fragment, { key: i },
175
h('tr', {},
176
h('td', { className: 'nowrap '}, ..._.map(actions, (cb, icon) =>
@@ -177,8 +178,8 @@ function FilesList({ entries, actions }: { entries: ToUpload[], actions: { [icon
178
h('td', {}, formatBytes(e.file.size)),
179
h('td', {},
180
h('span', { className: working ? 'ani-working' : undefined }, e.name || getFilePath(entries[i].file)),
180
- working && h('span', { className: 'upload-progress' }, formatPerc(progress)),
181
- working && h('progress', { className: 'upload-progress-bar', value: progress, max: 1 }),
181
+ working && h('span', { className: 'upload-progress', title }, formatBytes(partial)),
182
+ working && h('progress', { className: 'upload-progress-bar', title, value: progress, max: 1 }),
183
),
184
),
185
e.comment && h('tr', {}, h('td', { colSpan: 3 }, h('div', { className: 'entry-comment' }, e.comment)) )