From eedb0cc0060d7e33c7c8480f56567e287b1dd7e7 Mon Sep 17 00:00:00 2001
From: Vishali <vishali.guru@gohighlevel.com>
Date: Mon, 8 Sep 2025 19:00:08 +0530
Subject: [PATCH] feat(upload): add RTL demo and RTL styles for upload

---
 src/upload/demos/enUS/index.demo-entry.md |  1 +
 src/upload/demos/enUS/rtl-debug.demo.vue  | 95 +++++++++++++++++++++++
 src/upload/src/styles/rtl.cssr.ts         | 38 ++++++++-
 3 files changed, 131 insertions(+), 3 deletions(-)
 create mode 100644 src/upload/demos/enUS/rtl-debug.demo.vue

diff --git a/src/upload/demos/enUS/index.demo-entry.md b/src/upload/demos/enUS/index.demo-entry.md
index 20858f95971..cf4c4b2cb53 100644
--- a/src/upload/demos/enUS/index.demo-entry.md
+++ b/src/upload/demos/enUS/index.demo-entry.md
@@ -18,6 +18,7 @@ custom-request.vue
 custom-download.vue
 abstract.vue
 download.vue
+rtl-debug.vue
 ```
 
 ## API
diff --git a/src/upload/demos/enUS/rtl-debug.demo.vue b/src/upload/demos/enUS/rtl-debug.demo.vue
new file mode 100644
index 00000000000..49e732223aa
--- /dev/null
+++ b/src/upload/demos/enUS/rtl-debug.demo.vue
@@ -0,0 +1,95 @@
+<markdown>
+# RTL Debug
+</markdown>
+
+<script lang="ts" setup>
+import type { UploadFileInfo } from 'naive-ui'
+
+import { ArchiveOutline as ArchiveIcon } from '@vicons/ionicons5'
+import { unstableUploadsRtl } from 'naive-ui'
+import { ref } from 'vue'
+
+const rtlEnabled = ref(false)
+const rtlStyles = [unstableUploadsRtl]
+
+const fileList = ref<UploadFileInfo[]>([
+  {
+    id: 'a',
+    name: 'error-upload-file.png',
+    status: 'error'
+  },
+  {
+    id: 'b',
+    name: 'finished-text-document.doc',
+    status: 'finished',
+    type: 'text/plain'
+  },
+  {
+    id: 'c',
+    name: 'image-with-url.png',
+    status: 'finished',
+    url: '__HTTP__://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
+  },
+  {
+    id: 'd',
+    name: 'uploading-document-99percent.doc',
+    status: 'uploading',
+    percentage: 60
+  }
+])
+</script>
+
+<template>
+  <n-space vertical>
+    <n-space><n-switch v-model:value="rtlEnabled" />RTL</n-space>
+    <n-config-provider :rtl="rtlEnabled ? rtlStyles : undefined">
+      <n-space vertical>
+        <n-upload
+          action="__HTTP__://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+          :default-file-list="fileList"
+          list-type="image-card"
+        >
+          Click to Upload
+        </n-upload>
+
+        <n-upload
+          action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+          :default-file-list="fileList"
+          list-type="image"
+        >
+          <n-button>Upload File</n-button>
+        </n-upload>
+
+        <n-upload
+          action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+          :default-file-list="fileList"
+          list-type="text"
+        >
+          <n-button>Upload File</n-button>
+        </n-upload>
+
+        <n-upload
+          multiple
+          directory-dnd
+          action="__HTTP__://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+          :max="5"
+        >
+          <n-upload-dragger>
+            <div style="margin-bottom: 12px">
+              <n-icon size="48" :depth="3">
+                <ArchiveIcon />
+              </n-icon>
+            </div>
+            <n-text style="font-size: 16px">
+              Click or drag a file to this area to upload
+            </n-text>
+            <n-p depth="3" style="margin: 8px 0 0 0">
+              Strictly prohibit from uploading sensitive information. For
+              example, your bank card PIN or your credit card expiry date.
+            </n-p>
+          </n-upload-dragger>
+        </n-upload>
+      </n-space>
+    </n-config-provider>
+  </n-space>
+</template>
diff --git a/src/upload/src/styles/rtl.cssr.ts b/src/upload/src/styles/rtl.cssr.ts
index 92b44360a8a..2090338b307 100644
--- a/src/upload/src/styles/rtl.cssr.ts
+++ b/src/upload/src/styles/rtl.cssr.ts
@@ -1,8 +1,40 @@
-import { cB, cM } from '../../../_utils/cssr'
+import { c, cB, cE, cM } from '../../../_utils/cssr'
 
 export default cB('upload', [
   cM('rtl', `
     direction: rtl;
-    text-align: right;
-  `)
+  `, [
+    cB('upload-dragger', `
+      text-align: center;
+    `),
+    cB('upload-file-list', [
+      cB('upload-file', `
+        padding: 0px 6px 0 12px;
+      `, [
+        cB('upload-file-info', [
+          cE('thumbnail', [
+            cB('base-icon', `
+              margin-left: 2px;
+              margin-right: 0;
+            `)
+          ]),
+          cE('action', `
+            left: 0;
+            right: unset;
+          `, [
+            cB('button', [
+              c('&:not(:last-child)', {
+                marginLeft: '4px',
+                marginRight: '0'
+              })
+            ]),
+            cM('image-type', `
+              left: 0;
+              right: unset;
+            `)
+          ])
+        ])
+      ])
+    ])
+  ])
 ])