add typings for browser-image-compression (#43165)

* add typings for browser-image-compression

* Update types/browser-image-compression/index.d.ts

Co-Authored-By: Piotr Błażejewicz (Peter Blazejewicz) <peterblazejewicz@users.noreply.github.com>

* update test case

Co-authored-by: Piotr Błażejewicz (Peter Blazejewicz) <peterblazejewicz@users.noreply.github.com>

types/browser-image-compression/browser-image-compression-tests.ts

@@ -0,0 +1,22 @@
+import imageCompression = require('browser-image-compression');
+
+async function handleImageUpload({ target }: { target: EventTarget & { files: FileList } }) {
+  const imageFile = target.files[0];
+  console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true
+  console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);
+
+  const options = {
+    maxSizeMB: 1,
+    maxWidthOrHeight: 1920,
+    useWebWorker: true
+  };
+  try {
+    const compressedFile = await imageCompression(imageFile, options);
+    console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
+    console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
+
+    // await uploadToServer(compressedFile); // write your own logic
+  } catch (error) {
+    console.log(error);
+  }
+}

types/browser-image-compression/index.d.ts

@@ -0,0 +1,27 @@
+// Type definitions for browser-image-compression 1.0
+// Project: https://github.com/Donaldcwl/browser-image-compression
+// Definitions by: Donald <https://github.com/Donaldcwl>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+interface Options {
+    /** @default Number.POSITIVE_INFINITY */
+    maxSizeMB?: number;
+    /** @default undefined */
+    maxWidthOrHeight?: number;
+    /** @default false */
+    useWebWorker?: boolean;
+    /** @default 10 */
+    maxIteration?: number;
+    /** Default to be the exif orientation from the image file */
+    exifOrientation?: number;
+    /** A function takes one progress argument (progress from 0 to 100) */
+    onProgress?: (progress: number) => void;
+    /** Default to be the original mime type from the image file */
+    fileType?: string;
+}
+
+declare function imageCompression(image: File | Blob, options: Options): Promise<File | Blob>;
+
+export as namespace imageCompression;
+
+export = imageCompression;

types/browser-image-compression/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "esModuleInterop": true,
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "browser-image-compression-tests.ts"
+    ]
+}

types/browser-image-compression/tslint.json

@@ -0,0 +1,3 @@
+{
+    "extends": "dtslint/dt.json"
+}