Add support for uploading/downloading WEBP images (#242)

* Add support for uploading/downloading WEBP images

* Add test file

* Add test entries

* Update Playwright Snapshots

Author: agriyakhetarpal

src/pages/files.tsx

@@ -13,15 +13,15 @@ import { LabIcon, closeIcon, downloadIcon } from '@jupyterlab/ui-components';
 
 /**
  * File type icons mapping function. We currently implement four common file types:
- * 1. Image files (PNG, JPEG/JPG) (binary)
+ * 1. Image files (PNG, JPEG/JPG, WEBP) (binary)
  * 2. CSV/TSV files (text)
  * @param fileName - the name of the file to determine the icon for.
  * @param fileType - the MIME type of the file to determine the icon for.
  * @returns A LabIcon representing the file type icon.
  */
 const getFileIcon = (fileName: string, fileType: string): LabIcon => {
   const extension = fileName.split('.').pop()?.toLowerCase() || '';
-  if (fileType.startsWith('image/') || ['png', 'jpg', 'jpeg'].includes(extension)) {
+  if (fileType.startsWith('image/') || ['png', 'jpg', 'jpeg', 'webp'].includes(extension)) {
     return EverywhereIcons.imageIcon;
   }
   if (
@@ -36,14 +36,20 @@ const getFileIcon = (fileName: string, fileType: string): LabIcon => {
 };
 
 /**
- * Checks if the file type is supported (PNG, JPG/JPEG, or CSV/TSV).
+ * Checks if the file type is supported (PNG, JPG/JPEG, WEBP, or CSV/TSV).
  * @param file - The file to check
  * @returns True if the file type is supported, false otherwise.
  */
 const isSupportedFileType = (file: File): boolean => {
-  const supportedMimeTypes = ['image/png', 'image/jpeg', 'text/csv', 'text/tab-separated-values'];
+  const supportedMimeTypes = [
+    'image/png',
+    'image/jpeg',
+    'image/webp',
+    'text/csv',
+    'text/tab-separated-values'
+  ];
   const extension = file.name.split('.').pop()?.toLowerCase() || '';
-  const supportedExtensions = ['png', 'jpg', 'jpeg', 'csv', 'tsv'];
+  const supportedExtensions = ['png', 'jpg', 'jpeg', 'webp', 'csv', 'tsv'];
   return supportedMimeTypes.includes(file.type) || supportedExtensions.includes(extension);
 };
 
@@ -77,7 +83,7 @@ const FileUploader = React.forwardRef<IFileUploaderRef, IFileUploaderProps>((pro
       if (supportedFiles.length === 0) {
         await showErrorMessage(
           'Unsupported file type',
-          'Please upload only PNG, JPG/JPEG, or CSV/TSV files.'
+          'Please upload only PNG, JPG/JPEG, WEBP, or CSV/TSV files.'
         );
         return;
       }
@@ -137,7 +143,7 @@ const FileUploader = React.forwardRef<IFileUploaderRef, IFileUploaderProps>((pro
       multiple
       onChange={handleInputChange}
       style={{ display: 'none' }}
-      accept=".png,.jpg,.jpeg,.csv,.tsv,image/png,image/jpeg,text/csv,text/tab-separated-values"
+      accept=".png,.jpg,.jpeg,.webp,.csv,.tsv,image/png,image/jpeg,image/webp,text/csv,text/tab-separated-values"
     />
   );
 });
@@ -247,6 +253,9 @@ function FilesApp(props: IFilesAppProps) {
     if (ext === 'jpg' || ext === 'jpeg') {
       return 'image/jpeg';
     }
+    if (ext === 'webp') {
+      return 'image/webp';
+    }
     if (ext === 'csv') {
       return 'text/csv';
     }

src/types/images.d.ts

@@ -12,3 +12,8 @@ declare module '*.jpg' {
   const value: string;
   export default value;
 }
+
+declare module '*.webp' {
+  const value: string;
+  export default value;
+}

ui-tests/test-files/c-flower.webp

@@ -354,15 +354,16 @@ test.describe('Files', () => {
     await expect(page).toHaveURL(/\/lab\/files\/$/);
   });
 
-  test('Should upload two files and display their thumbnails', async ({ page }) => {
+  test('Should upload three files and display their thumbnails', async ({ page }) => {
     await page.locator('.jp-SideBar').getByTitle('Files').click();
 
     await page.locator('.je-FileTile').first().click(); // the first tile will always be the "add new" one
 
     const jpgPath = path.resolve(__dirname, '../test-files/a-image.jpg');
     const csvPath = path.resolve(__dirname, '../test-files/b-dataset.csv');
+    const webpPath = path.resolve(__dirname, '../test-files/c-flower.webp');
 
-    await page.setInputFiles('input[type="file"]', [jpgPath, csvPath]);
+    await page.setInputFiles('input[type="file"]', [jpgPath, csvPath, webpPath]);
 
     // Wait some time for thumbnails to appear as the files
     // are being uploaded to the contents manager
@@ -372,13 +373,17 @@ test.describe('Files', () => {
     await page
       .locator('.je-FileTile-label', { hasText: 'b-dataset.csv' })
       .waitFor({ state: 'visible' });
+    await page
+      .locator('.je-FileTile-label', { hasText: 'c-flower.webp' })
+      .waitFor({ state: 'visible' });
 
     expect(await page.locator('.je-FilesApp-grid').screenshot()).toMatchSnapshot(
       'uploaded-files-grid.png'
     );
 
     await expect(page.locator('.je-FileTile-label', { hasText: 'a-image.jpg' })).toBeVisible();
     await expect(page.locator('.je-FileTile-label', { hasText: 'b-dataset.csv' })).toBeVisible();
+    await expect(page.locator('.je-FileTile-label', { hasText: 'c-flower.webp' })).toBeVisible();
   });
 
   test('Hovering a file tile shows close and download actions', async ({ page }) => {