mbkbucket 3.0.1 → 3.2.0
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/package.json +8 -8
- package/public/bucketadmin.css +1139 -2017
- package/public/bucketadmin.js +1065 -1977
- package/src/app.js +3 -5
- package/src/controllers/api.controller.js +19 -7
- package/src/controllers/dashboard.controller.js +11 -10
- package/src/controllers/view.controller.js +7 -3
- package/src/routes/api.routes.js +1 -1
- package/src/routes/view.routes.js +3 -3
- package/src/services/s3.service.js +10 -3
- package/src/utils/helpers.js +24 -0
- package/views/bucket.handlebars +59 -129
- package/views/bucketadmin_delete_modal.handlebars +14 -18
- package/views/bucketadmin_filelist_skeleton.handlebars +28 -16
- package/views/bucketadmin_newfolder_modal.handlebars +29 -0
- package/views/bucketadmin_preview_modal.handlebars +21 -14
- package/views/bucketadmin_upload_modal.handlebars +54 -0
- package/views/bucketadmincontent.handlebars +113 -143
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<!-- New Folder Modal -->
|
|
2
|
+
<div class="modal" id="newFolderModal" tabindex="-1" aria-labelledby="newFolderModalLabel" aria-hidden="true">
|
|
3
|
+
<div class="modal-dialog modal-dialog-centered">
|
|
4
|
+
<div class="modal-content">
|
|
5
|
+
<div class="modal-header">
|
|
6
|
+
<h5 class="modal-title" id="newFolderModalLabel">
|
|
7
|
+
<svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="modal-title-icon"><path d="M2 4a1 1 0 011-1h3l2 2h5a1 1 0 011 1v6a1 1 0 01-1 1H3a1 1 0 01-1-1V4z"/><path d="M8 7v4M6 9h4"/></svg>
|
|
8
|
+
New Folder
|
|
9
|
+
</h5>
|
|
10
|
+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeNewFolderModal()">×</button>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="modal-body">
|
|
13
|
+
<form id="newFolderForm" onsubmit="event.preventDefault(); submitCreateFolder();">
|
|
14
|
+
<div class="modal-form-row">
|
|
15
|
+
<label for="newFolderNameInput" class="form-label">Folder Name</label>
|
|
16
|
+
<input type="text" id="newFolderNameInput" class="form-control" placeholder="e.g. documents, images, backup" autocomplete="off" required>
|
|
17
|
+
<div class="form-text">Folders are created in the current directory path.</div>
|
|
18
|
+
</div>
|
|
19
|
+
</form>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="modal-footer">
|
|
22
|
+
<button type="button" class="btn btn-outline" onclick="closeNewFolderModal()">Cancel</button>
|
|
23
|
+
<button type="button" class="btn btn-primary" id="submitNewFolderBtn" onclick="submitCreateFolder()">
|
|
24
|
+
Create Folder
|
|
25
|
+
</button>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
@@ -1,31 +1,38 @@
|
|
|
1
1
|
<!-- Preview Modal -->
|
|
2
2
|
<div class="modal" id="previewModal" role="dialog" aria-modal="true" aria-labelledby="previewModalLabel" tabindex="-1">
|
|
3
|
-
<div class="modal-dialog preview-modal-dialog" role="document">
|
|
3
|
+
<div class="modal-dialog modal-dialog-centered preview-modal-dialog" role="document">
|
|
4
4
|
<div class="modal-content">
|
|
5
5
|
<div class="modal-header">
|
|
6
|
-
<h5 class="modal-title" id="previewModalLabel"
|
|
7
|
-
|
|
6
|
+
<h5 class="modal-title" id="previewModalLabel">
|
|
7
|
+
<svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="modal-title-icon"><path d="M1 8s3-5 7-5 7 5 7 5-3 5-7 5-7-5-7-5z"/><circle cx="8" cy="8" r="2.5"/></svg>
|
|
8
|
+
<span id="previewFileName">Preview</span>
|
|
9
|
+
</h5>
|
|
8
10
|
<div class="preview-header-controls">
|
|
9
|
-
<button id="previewFullscreenBtn" class="btn btn-outline
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
<button id="previewFullscreenBtn" class="btn btn-icon btn-outline btn-sm" type="button" aria-label="Toggle fullscreen" title="Fullscreen">
|
|
12
|
+
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 5V2h3M14 5V2h-3M2 11v3h3M14 11v3h-3"/></svg>
|
|
13
|
+
</button>
|
|
14
|
+
<button type="button" class="btn-close" aria-label="Close preview" id="previewCloseBtn" onclick="closePreviewModal()">×</button>
|
|
12
15
|
</div>
|
|
13
16
|
</div>
|
|
14
|
-
<div class="modal-body">
|
|
17
|
+
<div class="modal-body p-0">
|
|
15
18
|
<div class="preview-content" id="previewContent" aria-live="polite">
|
|
16
19
|
<div class="empty-preview">
|
|
17
|
-
<
|
|
18
|
-
<div class="modal-header-spacing">Loading preview...</div>
|
|
20
|
+
<div class="spinner-border" role="status"></div>
|
|
21
|
+
<div class="modal-header-spacing mt-2">Loading preview...</div>
|
|
19
22
|
</div>
|
|
20
23
|
</div>
|
|
21
24
|
</div>
|
|
22
25
|
<div class="modal-footer preview-footer">
|
|
23
26
|
<div class="preview-actions">
|
|
24
|
-
<a id="previewOpenBtn" class="btn btn-outline-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<
|
|
27
|
+
<a id="previewOpenBtn" class="btn btn-outline btn-sm" target="_blank" rel="noopener noreferrer" href="#">
|
|
28
|
+
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 3H3a1 1 0 00-1 1v9a1 1 0 001 1h9a1 1 0 001-1v-3M10 2h4v4M9 7l5-5"/></svg>
|
|
29
|
+
Open in new tab
|
|
30
|
+
</a>
|
|
31
|
+
<a id="previewDownloadBtn" class="btn btn-primary btn-sm" download href="#">
|
|
32
|
+
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 11v3H2v-3"/><path d="M11 6L8 3 5 6"/><line x1="8" y1="3" x2="8" y2="11"/></svg>
|
|
33
|
+
Download
|
|
34
|
+
</a>
|
|
35
|
+
<button type="button" class="btn btn-outline btn-sm" id="previewCloseFooter" onclick="closePreviewModal()">Close</button>
|
|
29
36
|
</div>
|
|
30
37
|
</div>
|
|
31
38
|
</div>
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<!-- Upload Modal -->
|
|
2
|
+
<div class="modal" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
|
|
3
|
+
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
4
|
+
<div class="modal-content">
|
|
5
|
+
<div class="modal-header">
|
|
6
|
+
<h5 class="modal-title" id="uploadModalLabel">
|
|
7
|
+
<svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="modal-title-icon"><path d="M14 11v3H2v-3"/><path d="M11 6L8 3 5 6"/><line x1="8" y1="3" x2="8" y2="11"/></svg>
|
|
8
|
+
Upload Files
|
|
9
|
+
</h5>
|
|
10
|
+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeUploadModal()">×</button>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="modal-body">
|
|
13
|
+
<form id="uploadForm" action="/mbkbucket/upload" method="post" enctype="multipart/form-data">
|
|
14
|
+
<input type="hidden" name="prefix" value="{{prefix}}" id="uploadPrefixInput">
|
|
15
|
+
|
|
16
|
+
<!-- Drop Zone -->
|
|
17
|
+
<div id="dropZone" class="upload-drop-zone">
|
|
18
|
+
<div class="drop-zone-content">
|
|
19
|
+
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="drop-icon"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
|
20
|
+
<div class="drop-text">Drag files here, or <span class="drop-browse-link">browse</span></div>
|
|
21
|
+
<div class="drop-hint">Supports multiple files & large chunked uploads</div>
|
|
22
|
+
</div>
|
|
23
|
+
<input type="file" class="form-control d-none" id="fileInput" name="files" multiple>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<!-- Upload Queue List -->
|
|
27
|
+
<div id="uploadQueue" class="upload-queue mt-3"></div>
|
|
28
|
+
|
|
29
|
+
<!-- Upload Progress -->
|
|
30
|
+
<div id="uploadProgress" class="upload-progress-container mt-3" style="display: none;">
|
|
31
|
+
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
32
|
+
<span class="upload-status-label" id="uploadStatusLabel">Uploading...</span>
|
|
33
|
+
<span id="uploadPercent" class="upload-percent">0%</span>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="progress-bar-wrap">
|
|
36
|
+
<div id="progressBar" class="progress-bar-inner" style="width: 0%;"></div>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="upload-meta-info mt-1">
|
|
39
|
+
<small id="uploadDetails" class="text-muted"></small>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</form>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="modal-footer">
|
|
45
|
+
<button type="button" class="btn btn-outline" onclick="closeUploadModal()">Cancel</button>
|
|
46
|
+
<button type="button" class="btn btn-outline" id="clearQueueBtn" style="display: none;">Clear Queue</button>
|
|
47
|
+
<button type="button" class="btn btn-primary" id="startUploadBtn">
|
|
48
|
+
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 11v3H2v-3"/><path d="M11 6L8 3 5 6"/><line x1="8" y1="3" x2="8" y2="11"/></svg>
|
|
49
|
+
Start Upload
|
|
50
|
+
</button>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
@@ -1,172 +1,142 @@
|
|
|
1
|
-
{{!-- File Management System - Bucket Dashboard --}}
|
|
1
|
+
{{!-- Gentelella v4 File Management System - Bucket Dashboard --}}
|
|
2
2
|
<link rel="stylesheet" href="/mbkbucket/bucketadmin.css{{mbkbucket_cachebuster}}">
|
|
3
3
|
<div id="bucketAppData" data-app-name="{{APP_NAME}}" hidden></div>
|
|
4
|
-
|
|
5
|
-
<div class="
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<h2 id="totalFilesCount">Loading...</h2>
|
|
13
|
-
<p id="filterInfo">Loading file information...</p>
|
|
4
|
+
|
|
5
|
+
<div class="page-wrapper">
|
|
6
|
+
<!-- Page Header -->
|
|
7
|
+
<div class="page-header">
|
|
8
|
+
<div class="page-header-row">
|
|
9
|
+
<div>
|
|
10
|
+
<div class="page-pretitle">Storage & Buckets</div>
|
|
11
|
+
<h1 class="page-title">Files</h1>
|
|
14
12
|
</div>
|
|
15
|
-
<div class="
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
{{/each}}
|
|
25
|
-
{{else}}
|
|
26
|
-
<option value="">No buckets configured</option>
|
|
27
|
-
{{/if}}
|
|
28
|
-
</select>
|
|
29
|
-
<i class="fas fa-chevron-down bucket-switcher-caret" aria-hidden="true"></i>
|
|
30
|
-
</div>
|
|
31
|
-
<small id="bucketSwitchStatus" class="bucket-switcher-status is-hidden">Switching bucket...</small>
|
|
32
|
-
</div>
|
|
13
|
+
<div class="page-actions">
|
|
14
|
+
<button type="button" class="btn btn-outline" id="new-folder-btn" data-action="create-folder">
|
|
15
|
+
<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4a1 1 0 011-1h3l2 2h5a1 1 0 011 1v6a1 1 0 01-1 1H3a1 1 0 01-1-1V4z"/><path d="M8 7v4M6 9h4"/></svg>
|
|
16
|
+
New folder
|
|
17
|
+
</button>
|
|
18
|
+
<button type="button" class="btn btn-primary" id="upload-btn" data-action="upload-files">
|
|
19
|
+
<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 11v3H2v-3"/><path d="M11 6L8 3 5 6"/><line x1="8" y1="3" x2="8" y2="11"/></svg>
|
|
20
|
+
Upload
|
|
21
|
+
</button>
|
|
33
22
|
</div>
|
|
34
23
|
</div>
|
|
35
24
|
</div>
|
|
36
|
-
</div>
|
|
37
|
-
|
|
38
|
-
{{> bucketadmin_alerts }}
|
|
39
25
|
|
|
40
|
-
|
|
41
|
-
<!-- Upload Form -->
|
|
42
|
-
<div class="col-lg-12">
|
|
43
|
-
<div class="dashboard-card h-100">
|
|
44
|
-
<div class="card-header upload-card-header" id="uploadToggleBtn">
|
|
45
|
-
<h5 class="card-title">
|
|
46
|
-
<div class="card-icon">
|
|
47
|
-
<i class="fas fa-upload"></i>
|
|
48
|
-
</div>
|
|
49
|
-
Upload File
|
|
50
|
-
</h5>
|
|
51
|
-
<button type="button" class="collapse-btn">
|
|
52
|
-
<i class="fas fa-chevron-down"></i>
|
|
53
|
-
</button>
|
|
54
|
-
</div>
|
|
55
|
-
<div class="card-body collapsible-content" id="uploadSection">
|
|
56
|
-
<form id="uploadForm" action="/mbkbucket/upload" method="post" enctype="multipart/form-data">
|
|
57
|
-
<input type="hidden" name="prefix" value="{{prefix}}">
|
|
26
|
+
{{> bucketadmin_alerts }}
|
|
58
27
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
28
|
+
<!-- Main File Manager Card -->
|
|
29
|
+
<div class="card file-manager">
|
|
30
|
+
<div class="fm-layout">
|
|
31
|
+
<!-- Tree sidebar -->
|
|
32
|
+
<aside class="fm-tree-wrap">
|
|
33
|
+
<div class="fm-tree-header">
|
|
34
|
+
<span class="fm-tree-title">Explorer</span>
|
|
35
|
+
</div>
|
|
36
|
+
<div id="fm-tree" class="fm-tree"></div>
|
|
37
|
+
|
|
38
|
+
<div class="fm-storage">
|
|
39
|
+
<div class="fm-storage-label">Connected Bucket</div>
|
|
40
|
+
<div class="bucket-switcher-wrap mb-2">
|
|
41
|
+
<div class="bucket-switcher-control">
|
|
42
|
+
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="bucket-switcher-icon"><path d="M2 4.5C2 3.12 5.13 2 9 2s7 1.12 7 2.5v7c0 1.38-3.13 2.5-7 2.5s-7-1.12-7-2.5v-7z"/><path d="M2 8c0 1.38 3.13 2.5 7 2.5s7-1.12 7-2.5"/></svg>
|
|
43
|
+
<select id="bucketSelector" class="bucket-switcher-select" aria-label="Select connected bucket">
|
|
44
|
+
{{#if bucketOptions.length}}
|
|
45
|
+
{{#each bucketOptions}}
|
|
46
|
+
<option value="{{name}}" {{#if isSelected}}selected{{/if}}>{{name}}{{#if isDefault}} (default){{/if}}</option>
|
|
47
|
+
{{/each}}
|
|
48
|
+
{{else}}
|
|
49
|
+
<option value="">No buckets configured</option>
|
|
50
|
+
{{/if}}
|
|
51
|
+
</select>
|
|
72
52
|
</div>
|
|
53
|
+
<small id="bucketSwitchStatus" class="bucket-switcher-status is-hidden">Switching bucket...</small>
|
|
73
54
|
</div>
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
55
|
+
<div class="storage-bar"><div id="storageUsageBar" style="width: 100%; background: var(--primary);"></div></div>
|
|
56
|
+
<div class="fm-storage-meta d-flex justify-content-between align-items-center">
|
|
57
|
+
<span id="totalFilesCount">Loading...</span>
|
|
58
|
+
</div>
|
|
59
|
+
<div id="filterInfo" class="fm-storage-subinfo"></div>
|
|
60
|
+
</div>
|
|
61
|
+
</aside>
|
|
62
|
+
|
|
63
|
+
<!-- Main area -->
|
|
64
|
+
<section class="fm-main">
|
|
65
|
+
<div class="fm-toolbar">
|
|
66
|
+
<nav class="fm-breadcrumb breadcrumb" id="fm-breadcrumb" aria-label="Path"></nav>
|
|
67
|
+
|
|
68
|
+
<div class="fm-toolbar-actions">
|
|
69
|
+
<!-- Quick filters -->
|
|
70
|
+
<div class="quick-filter-group" role="group" aria-label="Quick filters">
|
|
71
|
+
<button type="button" class="quick-filter-btn active" data-filter="all">All</button>
|
|
72
|
+
<button type="button" class="quick-filter-btn" data-filter="media">Media</button>
|
|
73
|
+
<button type="button" class="quick-filter-btn" data-filter="docs">Docs</button>
|
|
74
|
+
<button type="button" class="quick-filter-btn" data-filter="code">Code</button>
|
|
83
75
|
</div>
|
|
84
|
-
|
|
85
|
-
|
|
76
|
+
|
|
77
|
+
<!-- Search -->
|
|
78
|
+
<div class="search-box">
|
|
79
|
+
<svg class="s-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="5"/><path d="M11 11l3.5 3.5"/></svg>
|
|
80
|
+
<input type="text" id="searchInput" placeholder="Search files…" aria-label="Search files">
|
|
81
|
+
<button type="button" class="search-clear-btn" id="searchClearBtn" style="display: none;" aria-label="Clear search">×</button>
|
|
86
82
|
</div>
|
|
87
|
-
|
|
88
|
-
|
|
83
|
+
|
|
84
|
+
<!-- View toggle -->
|
|
85
|
+
<div class="fm-view-toggle">
|
|
86
|
+
<button type="button" class="view-btn active" id="view-grid" aria-label="Grid view" title="Grid view">
|
|
87
|
+
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="5" height="5" rx="1"/><rect x="9" y="2" width="5" height="5" rx="1"/><rect x="2" y="9" width="5" height="5" rx="1"/><rect x="9" y="9" width="5" height="5" rx="1"/></svg>
|
|
88
|
+
</button>
|
|
89
|
+
<button type="button" class="view-btn" id="view-list" aria-label="List view" title="List view">
|
|
90
|
+
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="2" y1="4" x2="14" y2="4"/><line x1="2" y1="8" x2="14" y2="8"/><line x1="2" y1="12" x2="14" y2="12"/></svg>
|
|
91
|
+
</button>
|
|
89
92
|
</div>
|
|
90
93
|
</div>
|
|
94
|
+
</div>
|
|
91
95
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
</button>
|
|
97
|
-
<button type="button" class="btn btn-lg btn-primary" id="clearQueueBtn">
|
|
98
|
-
<i class="fas fa-times-circle"></i>
|
|
99
|
-
Clear Queue
|
|
100
|
-
</button>
|
|
96
|
+
<!-- File Grid / List Container -->
|
|
97
|
+
<div id="fileListContainer" class="fm-grid-wrap">
|
|
98
|
+
<div id="fm-grid" class="fm-grid view-grid">
|
|
99
|
+
{{> bucketadmin_filelist_skeleton }}
|
|
101
100
|
</div>
|
|
102
|
-
</form>
|
|
103
|
-
</div>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
</div>
|
|
107
|
-
|
|
108
|
-
<!-- File List -->
|
|
109
|
-
<div class="dashboard-card reveal-item reveal-delay-3">
|
|
110
|
-
<div class="card-header file-list-header">
|
|
111
|
-
<h5 class="card-title">
|
|
112
|
-
<div>
|
|
113
|
-
<i class="fas fa-folder-open"></i>
|
|
114
|
-
</div>
|
|
115
|
-
<span id="fileListTitle">Files</span>
|
|
116
|
-
</h5>
|
|
117
101
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
</button>
|
|
136
|
-
<button type="button" class="btn btn-sm btn-outline-success" data-action="create-folder" title="New Folder">
|
|
137
|
-
<i class="fas fa-folder-plus"></i> New Folder
|
|
138
|
-
</button>
|
|
139
|
-
</div>
|
|
140
|
-
|
|
141
|
-
<div class="btn-group" role="group" aria-label="View Mode">
|
|
142
|
-
<button type="button" class="btn btn-sm btn-light view-toggle-btn view-btn-left active" id="viewBtnFolder" data-view-mode="folder" title="Folder View">
|
|
143
|
-
<i class="fas fa-folder"></i> Folders
|
|
144
|
-
</button>
|
|
145
|
-
<button type="button" class="btn btn-sm btn-outline-light view-toggle-btn view-btn-right" id="viewBtnFlat" data-view-mode="flat" title="Flat List (All Files)">
|
|
146
|
-
<i class="fas fa-list-ul"></i> Flat View
|
|
147
|
-
</button>
|
|
148
|
-
</div>
|
|
149
|
-
</div>
|
|
150
|
-
<div class="card-body file-list-card-body">
|
|
151
|
-
<div id="fileListContainer">
|
|
152
|
-
{{> bucketadmin_filelist_skeleton }}
|
|
153
|
-
</div>
|
|
102
|
+
<!-- Empty state -->
|
|
103
|
+
<div id="fm-empty" class="fm-empty" style="display: none;" hidden>
|
|
104
|
+
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 7a2 2 0 012-2h4l2 2h7a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/></svg>
|
|
105
|
+
<div class="empty-title">This folder is empty</div>
|
|
106
|
+
<div class="empty-desc">Drag files into the browser or use the Upload button to add files.</div>
|
|
107
|
+
<div class="empty-actions mt-3">
|
|
108
|
+
<button type="button" class="btn btn-outline btn-sm me-2" data-action="create-folder">
|
|
109
|
+
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4a1 1 0 011-1h3l2 2h5a1 1 0 011 1v6a1 1 0 01-1 1H3a1 1 0 01-1-1V4z"/><path d="M8 7v4M6 9h4"/></svg>
|
|
110
|
+
New Folder
|
|
111
|
+
</button>
|
|
112
|
+
<button type="button" class="btn btn-primary btn-sm" data-action="upload-files">
|
|
113
|
+
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 11v3H2v-3"/><path d="M11 6L8 3 5 6"/><line x1="8" y1="3" x2="8" y2="11"/></svg>
|
|
114
|
+
Upload Files
|
|
115
|
+
</button>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
154
119
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
120
|
+
<!-- Pagination -->
|
|
121
|
+
<div id="paginationContainer" class="pagination-container" style="display: none;">
|
|
122
|
+
<nav aria-label="File pagination">
|
|
123
|
+
<ul class="pagination" id="paginationList"></ul>
|
|
124
|
+
</nav>
|
|
125
|
+
</div>
|
|
126
|
+
</section>
|
|
161
127
|
</div>
|
|
162
128
|
</div>
|
|
163
129
|
</div>
|
|
164
130
|
|
|
131
|
+
{{> bucketadmin_upload_modal }}
|
|
132
|
+
{{> bucketadmin_newfolder_modal }}
|
|
165
133
|
{{> bucketadmin_delete_modal }}
|
|
166
|
-
|
|
167
134
|
{{> bucketadmin_preview_modal }}
|
|
168
135
|
|
|
169
136
|
<!-- Toast Container -->
|
|
170
137
|
<div id="toast-container" class="toast-container"></div>
|
|
171
138
|
|
|
139
|
+
<!-- Context Menu Element -->
|
|
140
|
+
<div id="fm-context-menu" class="fm-context-menu" style="display: none;"></div>
|
|
141
|
+
|
|
172
142
|
<script src="/mbkbucket/bucketadmin.js{{mbkbucket_cachebuster}}"></script>
|