[TikiWiki-commits] [Git][tikiwiki/tiki][master] [ENH] Tiki File Galleries: Display fileId after upload in file gallery uploader

Benoit Grégoire pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
c818b18c by Espoir Baraka at 2025-11-08T20:33:00+00:00
[ENH] Tiki File Galleries: Display fileId after upload in file gallery uploader
---
* [ENH] Tiki File Galleries: Display fileId after upload in file gallery uploader

See merge request tikiwiki/tiki!8978

- - - - -


2 changed files:

- src/js/vue-widgets/element-plus-ui/src/components/FileGalUploader/FileGalUploader.vue
- src/js/vue-widgets/element-plus-ui/src/components/FileGalUploader/fileGalUploader.scss


Changes:

=====================================
src/js/vue-widgets/element-plus-ui/src/components/FileGalUploader/FileGalUploader.vue
=====================================
@@ -11,6 +11,7 @@ const maxFiles = JSON.parse(props.maxFiles);
 
 const uploadRef = ref(null);
 const insertIntoEditor = ref(false);
+const uploadedFiles = ref([]);
 
 onMounted(() => {
     const searcParams = new URLSearchParams(location.search);
@@ -37,6 +38,14 @@ const handleUploadError = (error) => {
 
 const handleUploadSuccess = (response, file) => {
     ElMessage.success(`${file.name} uploaded successfully`)
+
+    // Store uploaded file info
+    uploadedFiles.value.push({
+        name: file.name,
+        fileId: response.fileId,
+        syntax: `{img fileId="${response.fileId}" thumb="box"}`
+    });
+
     const searcParams = new URLSearchParams(location.search);
     if (insertIntoEditor.value) {
         window.opener.insertAt(searcParams.get('filegals_manager'), response.syntax, false, false, true);
@@ -46,6 +55,14 @@ const handleUploadSuccess = (response, file) => {
         completeVimeoUpload(file.name);
     }
 }
+
+const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text).then(() => {
+        ElMessage.success('Copied to clipboard!');
+    }).catch(() => {
+        ElMessage.error('Failed to copy');
+    });
+}
 </script>
 
 <script>
@@ -82,6 +99,24 @@ export const DEFAULT_ACTION_URL = 'tiki-ajax_services.php?controller=file&action
             Drop file here or <em>click to upload</em>
             </div>
         </el-upload>
+
+        <div v-if="uploadedFiles.length > 0" class="uploaded-files-list">
+            <h4>Uploaded Files:</h4>
+            <div v-for="file in uploadedFiles" :key="file.fileId" class="uploaded-file-item">
+                <div class="file-name">{{ file.name }} (fileId: {{ file.fileId }})</div>
+                <div class="file-syntax-row">
+                    <code>{{ file.syntax }}</code>
+                    <button
+                        @click="copyToClipboard(file.syntax)"
+                        class="copy-button"
+                        title="Copy to clipboard"
+                    >
+                        Copy
+                    </button>
+                </div>
+            </div>
+        </div>
+
         <el-button type="primary" @click="submitUpload" :data-testid="DATA_TEST_ID.SUBMIT_BUTTON">
         <span v-if="!insertIntoEditor">Upload</span>
         <span v-else>Insert</span>


=====================================
src/js/vue-widgets/element-plus-ui/src/components/FileGalUploader/fileGalUploader.scss
=====================================
@@ -1,4 +1,59 @@
 @use 'element-plus/theme-chalk/el-upload.css';
 @use 'element-plus/theme-chalk/el-icon.css';
 @use 'element-plus/theme-chalk/el-button.css';
-@use '../all.scss';
\ No newline at end of file
+@use '../all.scss';
+
+.uploaded-files-list {
+    margin: 15px 0;
+    padding: 10px;
+    background: #f5f7fa;
+    border-radius: 4px;
+
+    h4 {
+        margin: 0 0 10px 0;
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    .uploaded-file-item {
+        margin-bottom: 10px;
+        padding: 8px;
+        background: white;
+        border-radius: 4px;
+        border: 1px solid #dcdfe6;
+
+        .file-name {
+            font-weight: 500;
+            margin-bottom: 5px;
+        }
+
+        .file-syntax-row {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+
+            code {
+                flex: 1;
+                padding: 5px 8px;
+                background: #f0f0f0;
+                border-radius: 3px;
+                font-size: 12px;
+                word-break: break-all;
+            }
+
+            .copy-button {
+                padding: 5px 10px;
+                background: #409eff;
+                color: white;
+                border: none;
+                border-radius: 3px;
+                cursor: pointer;
+                white-space: nowrap;
+
+                &:hover {
+                    background: #66b1ff;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/c818b18c6db3cd00849a493caac3e5c338c295de

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/c818b18c6db3cd00849a493caac3e5c338c295de
You're receiving this email because of your account on gitlab.com.

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs