return width and height for images

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']} />

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,
             },
       })

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