feat: upload image from explorer context

README.md

@@ -4,10 +4,11 @@
 ## TODO
 
 * [x] aliyun oss
-* [x] upload image by explorer
+* [x] upload image by explorer dialog
 * [x] upload image from clipboard
 * [x] specify 'folder' of bucket
-* [ ] upload image by selecting image from Command Palette
+* [x] upload image from explorer context (sidebar)
+* [ ] delete image when hover GFM(github flavored markdown)
 * [ ] upload embed svg as *.svg from clipboard
 * [ ] content hash
 * [ ] image compress

package.json

@@ -12,7 +12,8 @@
   ],
   "activationEvents": [
     "onCommand:elan.uploadFromClipboard",
-    "onCommand:elan.uploadFromExplorer"
+    "onCommand:elan.uploadFromExplorer",
+    "onCommand:elan.uploadFromExplorerContext"
   ],
   "main": "./out/extension.js",
   "contributes": {
@@ -24,8 +25,27 @@
       {
         "command": "elan.uploadFromExplorer",
         "title": "Elan: upload image from explorer"
+      },
+      {
+        "command": "elan.uploadFromExplorerContext",
+        "title": "Elan: upload image"
       }
     ],
+    "menus": {
+      "commandPalette": [
+        {
+          "command": "elan.uploadFromExplorerContext",
+          "when": "false"
+        }
+      ],
+      "explorer/context": [
+        {
+          "when": "resourceExtname =~/^\\.(png|jpg|jpeg|webp|gif|bmp|tiff|ico|svg)$/",
+          "command": "elan.uploadFromExplorerContext",
+          "group": "5_cutcopypaste"
+        }
+      ]
+    },
     "configuration": {
       "title": "Elan",
       "properties": {

src/commands/uploadFromExplorerContext.ts

@@ -0,0 +1,9 @@
+import vscode from 'vscode'
+import { uploadUris } from '../utils/uploader/index'
+
+// TODO: compatible with Bucket Folder > ${relativeToVsRootPath} even no activated file
+export default async function uploadFromExplorerContext(
+  uri: vscode.Uri
+): Promise<void> {
+  await uploadUris([uri])
+}

src/extension.ts

@@ -1,6 +1,7 @@
 import vscode from 'vscode'
 import uploadFromClipboard from './commands/uploadFromClipboard'
 import uploadFromExplorer from './commands/uploadFromExplorer'
+import uploadFromExplorerContext from './commands/uploadFromExplorerContext'
 import Logger from './utils/log'
 
 // this method is called when your extension is activated
@@ -17,6 +18,10 @@ export function activate(context: vscode.ExtensionContext): void {
     vscode.commands.registerCommand(
       'elan.uploadFromExplorer',
       uploadFromExplorer
+    ),
+    vscode.commands.registerCommand(
+      'elan.uploadFromExplorerContext',
+      uploadFromExplorerContext
     )
   ]
   context.subscriptions.push(...disposable)

src/utils/uploader/index.ts

@@ -73,7 +73,8 @@ export async function uploadUris(uris: vscode.Uri[]): Promise<void> {
     const uploadName = templateStore.transform('uploadName')
     const bucketFolder = templateStore.transform('bucketFolder')
 
-    const u = uploader.put(`${bucketFolder}/${uploadName}`, uri.fsPath)
+    const putName = `${bucketFolder ? bucketFolder + '/' : ''}${uploadName}`
+    const u = uploader.put(putName, uri.fsPath)
     u.then((putObjectResult) => {
       progress.report({
         message: `(${++finished} / ${uris.length})`,
@@ -128,10 +129,11 @@ export async function uploadUris(uris: vscode.Uri[]): Promise<void> {
 
 function afterUpload(clipboard: string[]): void {
   if (!clipboard.length) return
-  const GFM = clipboard.join('\n\n')
+  const GFM = clipboard.join('\n\n') + '\n\n'
   vscode.env.clipboard.writeText(GFM)
   const activeTextEditor = vscode.window.activeTextEditor
-  if (!activeTextEditor) return
+  if (!activeTextEditor || activeTextEditor.document.languageId !== 'markdown')
+    return
 
   activeTextEditor.edit((textEditorEdit) => {
     textEditorEdit.insert(activeTextEditor.selection.active, GFM)