Skip to content

Commit 7aca7aa

Browse files
mateofmateof
committed
fix: fix upload local files
1 parent 133ab3b commit 7aca7aa

4 files changed

Lines changed: 306 additions & 118 deletions

File tree

‎TelegramDownloader/Pages/Modals/FileUploadModalTemplate.razor‎

Lines changed: 50 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,106 @@
11
@* Styles moved to site.css *@
2-
<div class="upload-modal-overlay" :class="{ modalshow: showModal, modalhide: !showModal }" v-if="showModal">
3-
<div class="upload-modal-container" v-on:click.stop>
4-
<div class="upload-modal-header">
5-
<h5 class="upload-modal-title">
2+
<div class="vue-upload-overlay" :class="{ modalshow: showModal, modalhide: !showModal }" v-if="showModal">
3+
<div class="vue-upload-container" v-on:click.stop>
4+
<div class="vue-upload-header">
5+
<h5 class="vue-upload-title">
66
<i class="bi bi-cloud-arrow-up"></i>
77
Upload Files
88
</h5>
9-
<button class="upload-modal-close" v-on:click="closeModal()">
9+
<button class="vue-upload-close" v-on:click="closeModal()">
1010
<i class="bi bi-x-lg"></i>
1111
</button>
1212
</div>
1313

14-
<div class="upload-modal-body">
14+
<div class="vue-upload-body">
1515
<!-- Drop Zone -->
16-
<div class="upload-drop-zone"
16+
<div class="vue-upload-drop-zone"
1717
v-on:click="$refs.files.click()"
1818
v-on:dragover.prevent="onDragOver"
1919
v-on:dragleave="onDragLeave"
2020
v-on:drop.prevent="onDrop"
2121
:class="{ dragover: isDragging }">
22-
<div class="upload-drop-icon">
22+
<div class="vue-upload-drop-icon">
2323
<i class="bi bi-cloud-arrow-up"></i>
2424
</div>
25-
<div class="upload-drop-text">Drop files here or click to browse</div>
26-
<div class="upload-drop-hint">Supports any file type</div>
25+
<div class="vue-upload-drop-text">Drop files here or click to browse</div>
26+
<div class="vue-upload-drop-hint">Supports any file type</div>
2727
<input type="file"
28-
class="upload-drop-input"
28+
class="vue-upload-drop-input"
2929
id="filesInput"
3030
ref="files"
3131
v-on:change="onChangeFileUpload()"
3232
multiple />
3333
</div>
3434

35+
<!-- Concurrent uploads selector -->
36+
<div class="vue-upload-concurrent" v-if="files.length > 1">
37+
<label class="vue-upload-concurrent-label">
38+
<i class="bi bi-stack"></i>
39+
Simultaneous uploads
40+
</label>
41+
<div class="vue-upload-concurrent-selector">
42+
<button v-for="n in 5"
43+
:key="n"
44+
class="vue-upload-concurrent-btn"
45+
:class="{ active: concurrentUploads === n }"
46+
v-on:click="concurrentUploads = n"
47+
:disabled="isUploading">
48+
{{ n }}
49+
</button>
50+
</div>
51+
<span class="vue-upload-concurrent-hint">
52+
{{ activeUploads > 0 ? `Uploading ${activeUploads} of ${concurrentUploads}...` : `Upload ${concurrentUploads} files at a time` }}
53+
</span>
54+
</div>
55+
3556
<!-- File List -->
36-
<div class="upload-file-list" v-if="files.length > 0">
37-
<div class="upload-file-item"
57+
<div class="vue-upload-file-list" v-if="files.length > 0">
58+
<div class="vue-upload-file-item"
3859
v-for="fileItem in files"
3960
:key="fileItem.file.name"
4061
:class="{ completed: fileItem.completed }">
41-
<div class="upload-file-header">
42-
<div class="upload-file-icon">
62+
<div class="vue-upload-file-header">
63+
<div class="vue-upload-file-icon">
4364
<i class="bi" :class="getFileIcon(fileItem.file.name)"></i>
4465
</div>
45-
<div class="upload-file-info">
46-
<div class="upload-file-name" :title="fileItem.file.name">{{ fileItem.file.name }}</div>
47-
<div class="upload-file-size">{{ bytes(fileItem.file.size) }}</div>
66+
<div class="vue-upload-file-info">
67+
<div class="vue-upload-file-name" :title="fileItem.file.name">{{ fileItem.file.name }}</div>
68+
<div class="vue-upload-file-size">{{ bytes(fileItem.file.size) }}</div>
4869
</div>
49-
<button class="upload-file-remove"
70+
<button class="vue-upload-file-remove"
5071
v-on:click="deleteFile(fileItem.file.name)"
5172
v-if="!fileItem.completed"
5273
title="Remove file">
5374
<i class="bi bi-x"></i>
5475
</button>
5576
</div>
56-
<div class="upload-file-progress">
57-
<div class="upload-file-progress-bar" :style="{ width: fileItem.progress + '%' }"></div>
77+
<div class="vue-upload-file-progress">
78+
<div class="vue-upload-file-progress-bar" :style="{ width: fileItem.progress + '%' }"></div>
5879
</div>
59-
<div class="upload-file-status">
60-
<span class="upload-file-percent" v-if="!fileItem.completed">{{ fileItem.progress }}%</span>
61-
<span class="upload-completed-badge" v-else>
80+
<div class="vue-upload-file-status">
81+
<span class="vue-upload-file-percent" v-if="!fileItem.completed">{{ fileItem.progress }}%</span>
82+
<span class="vue-upload-completed-badge" v-else>
6283
<i class="bi bi-check-circle-fill"></i>
6384
Completed
6485
</span>
65-
<span class="upload-file-bytes">{{ bytesProgress(fileItem.sended) }} / {{ bytes(fileItem.file.size) }}</span>
86+
<span class="vue-upload-file-bytes">{{ bytesProgress(fileItem.sended) }} / {{ bytes(fileItem.file.size) }}</span>
6687
</div>
6788
</div>
6889
</div>
6990

7091
<!-- Empty State -->
71-
<div class="upload-empty-state" v-else>
92+
<div class="vue-upload-empty-state" v-else>
7293
<i class="bi bi-inbox" style="font-size: 2rem; display: block; margin-bottom: 0.5rem; opacity: 0.5;"></i>
7394
No files selected
7495
</div>
7596
</div>
7697

77-
<div class="upload-modal-footer">
78-
<button class="upload-btn upload-btn-secondary" v-on:click="closeModal()">
98+
<div class="vue-upload-footer">
99+
<button class="vue-upload-btn vue-upload-btn-secondary" v-on:click="closeModal()">
79100
<i class="bi bi-x-lg"></i>
80101
Close
81102
</button>
82-
<button class="upload-btn upload-btn-primary"
103+
<button class="vue-upload-btn vue-upload-btn-primary"
83104
v-on:click="submitForm()"
84105
:disabled="files.length === 0 || isUploading">
85106
<i class="bi bi-cloud-arrow-up"></i>
@@ -88,4 +109,3 @@
88109
</div>
89110
</div>
90111
</div>
91-

‎TelegramDownloader/Pages/Partials/LocalFileManager.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
}
1616
</style>
1717

18-
<h3>File Manager <span class="badge bg-secondary">@chatName</span></h3>
18+
<h3><i class="bi bi-folder2-open me-2"></i>File Manager <span class="badge bg-secondary">@chatName</span></h3>
1919

2020
<ul class="nav nav-tabs">
2121
<li class="nav-item">

0 commit comments

Comments
 (0)