From d95f8d540bfe2a91d2a445c14e4efeadf91dcbef Mon Sep 17 00:00:00 2001
From: spencerwooo <spencer.woo@outlook.com>
Date: Wed, 2 Feb 2022 17:07:33 +0800
Subject: [PATCH] return width and height for images

---
 components/FileListing.tsx | 8 +++++++-
 pages/api/index.ts         | 6 +++---
 types/index.d.ts           | 7 +++++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index bf3f166..c2835b7 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -552,7 +552,13 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
             <>
               <PreviewContainer>
                 {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img className="mx-auto" src={downloadUrl} alt={fileName} />
+                <img
+                  className="mx-auto"
+                  src={downloadUrl}
+                  alt={fileName}
+                  width={file.image?.width}
+                  height={file.image?.height}
+                />
               </PreviewContainer>
               <DownloadBtnContainer>
                 <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
diff --git a/pages/api/index.ts b/pages/api/index.ts
index ec9e43d..e59aab8 100644
--- a/pages/api/index.ts
+++ b/pages/api/index.ts
@@ -209,7 +209,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const { data: identityData } = await axios.get(requestUrl, {
       headers: { Authorization: `Bearer ${accessToken}` },
       params: {
-        select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video',
+        select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video,image',
       },
     })
 
@@ -218,12 +218,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         headers: { Authorization: `Bearer ${accessToken}` },
         params: next
           ? {
-              select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video',
+              select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video,image',
               top: siteConfig.maxItems,
               $skipToken: next,
             }
           : {
-              select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video',
+              select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video,image',
               top: siteConfig.maxItems,
             },
       })
diff --git a/types/index.d.ts b/types/index.d.ts
index 0d4867e..91eac21 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -15,6 +15,7 @@ export declare type OdFolderObject = {
     lastModifiedDateTime: string
     file?: { mimeType: string; hashes: { quickXorHash: string; sha1Hash?: string; sha256Hash?: string } }
     folder?: { childCount: number; view: { sortBy: string; sortOrder: 'ascending'; viewType: 'thumbnails' } }
+    image?: OdImageFile
     video?: OdVideoFile
   }>
 }
@@ -27,8 +28,14 @@ export declare type OdFileObject = {
   id: string
   lastModifiedDateTime: string
   file: { mimeType: string; hashes: { quickXorHash: string; sha1Hash?: string; sha256Hash?: string } }
+  image?: OdImageFile
   video?: OdVideoFile
 }
+// A representation of a OneDrive image file. Some images do not return a width and height, so types are optional.
+export declare type OdImageFile = {
+  width?: number
+  height?: number
+}
 // A representation of a OneDrive video file. All fields are declared here, but we mainly use 'width' and 'height'.
 export declare type OdVideoFile = {
   width: number