Reveal media file

src/dashboardWebView/DashboardMessage.ts

@@ -15,6 +15,7 @@ export enum DashboardMessage {
   refreshMedia = 'refreshMedia',
   uploadMedia = 'uploadMedia',
   deleteMedia = 'deleteMedia',
+  revealMedia = 'revealMedia',
   insertPreviewImage = 'insertPreviewImage',
   updateMediaMetadata = 'updateMediaMetadata',
   createMediaFolder = 'createMediaFolder',

src/dashboardWebView/components/Media/Item.tsx

@@ -1,6 +1,6 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { Menu } from '@headlessui/react';
-import { ClipboardIcon, CodeIcon, PencilIcon, PhotographIcon, PlusIcon, TrashIcon } from '@heroicons/react/outline';
+import { ClipboardIcon, CodeIcon, EyeIcon, PencilIcon, PhotographIcon, PlusIcon, TrashIcon } from '@heroicons/react/outline';
 import { basename, dirname } from 'path';
 import * as React from 'react';
 import { useEffect } from 'react';
@@ -108,6 +108,13 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
     setShowAlert(true);
   };
 
+  const revealMedia = () => {
+    Messenger.send(DashboardMessage.revealMedia, {
+      file: media.fsPath,
+      folder: selectedFolder
+    });
+  };
+
   const confirmDeletion = () => {
     Messenger.send(DashboardMessage.deleteMedia, {
       file: media.fsPath,
@@ -243,15 +250,15 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
                         onClick={copyToClipboard}>
                         <ClipboardIcon className={`h-5 w-5`} aria-hidden="true" />
                       </QuickAction>
-
-                      <QuickAction 
-                        title='Delete media file'
-                        onClick={deleteMedia}>
-                        <TrashIcon className={`h-5 w-5`} aria-hidden="true" />
-                      </QuickAction>
                     </>
                   )
                 }
+
+                <QuickAction 
+                  title='Delete media file'
+                  onClick={deleteMedia}>
+                  <TrashIcon className={`h-5 w-5`} aria-hidden="true" />
+                </QuickAction>
               </div>
 
               <Menu as="div" className="relative z-10 inline-block text-left  h-5">
@@ -287,13 +294,17 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
                           onClick={copyToClipboard} />
 
                         { customScriptActions() }
-
-                        <MenuItem 
-                          title={`Delete`}
-                          onClick={deleteMedia} />
                       </>
                     )
                   }
+
+                  <MenuItem 
+                    title={`Reveal media`}
+                    onClick={revealMedia} />
+
+                  <MenuItem 
+                    title={`Delete`}
+                    onClick={deleteMedia} />
                 </MenuItems>
               </Menu>
             </div>

src/listeners/MediaListener.ts

@@ -3,8 +3,9 @@ import { DashboardMessage } from "../dashboardWebView/DashboardMessage";
 import { BaseListener } from "./BaseListener";
 import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
 import { SortingOption } from '../dashboardWebView/models';
-import { commands } from 'vscode';
+import { commands, env, Uri } from 'vscode';
 import { COMMAND_NAME } from '../constants';
+import * as os from 'os';
 
 
 export class MediaListener extends BaseListener {
@@ -28,6 +29,9 @@ export class MediaListener extends BaseListener {
       case DashboardMessage.deleteMedia:
         this.delete(msg?.data);
         break;
+      case DashboardMessage.revealMedia:
+        this.openFileInFinder(msg?.data?.file);
+        break;
       case DashboardMessage.insertPreviewImage:
         MediaHelpers.insertMediaToMarkdown(msg?.data);
         break;
@@ -51,6 +55,16 @@ export class MediaListener extends BaseListener {
     this.sendMsg(DashboardCommand.media, files);
   }
 
+  private static openFileInFinder(file: string) {
+    if (file) {
+      if (os.type() === "Linux" && env.remoteName?.toLowerCase() === "wsl") {
+        commands.executeCommand('remote-wsl.revealInExplorer', Uri.parse(file));
+      } else {
+        commands.executeCommand('revealFileInOS', Uri.parse(file));
+      }
+    }
+  }
+
   /**
    * Store the file and send a message after multiple uploads
    * @param data