@susonwaiba/react-media-uploader 0.1.4 → 0.1.5

package/dist/hooks/use-media-uploader.js

@@ -1,4 +1,4 @@
-import { markMediaAsCanceled, generateFileHash, generateUploadUrl, uploadToStorage, markMediaAsTemp, markMediaAsActive, generateMediaType, } from "../lib/media-helper";
+import { markMediaAsCanceled, generateFileHash, generateUploadUrl, uploadToStorage, markMediaAsTemp, markMediaAsActive, generateMediaType, getMediaImageDimension, } from "../lib/media-helper";
 import { MediaStatusEnum, MediaTypeEnum, } from "../types/media";
 import { useState } from "react";
 export function useMediaUploader({ defaultValues, mediaUploadSuccessStatus = MediaStatusEnum.TEMP, enableManualUpload = false, serverConfig, onUploadSuccess, onUploadFailure, } = {}) {
@@ -19,8 +19,18 @@ export function useMediaUploader({ defaultValues, mediaUploadSuccessStatus = Med
         const localId = crypto.randomUUID();
         const mediaType = await generateMediaType(file);
         let tempPreviewUrl = undefined;
+        let tempHeight = undefined;
+        let tempWidth = undefined;
         if (mediaType === MediaTypeEnum.IMAGE) {
             tempPreviewUrl = URL.createObjectURL(file);
+            try {
+                const tempDimension = await getMediaImageDimension(tempPreviewUrl);
+                tempHeight = tempDimension.height;
+                tempWidth = tempDimension.width;
+            }
+            catch (e) {
+                console.log("Error while generating media image dimension ->", e);
+            }
         }
         const item = {
             localId,
@@ -33,6 +43,8 @@ export function useMediaUploader({ defaultValues, mediaUploadSuccessStatus = Med
                 name: file.name,
                 mimeType: file.type,
                 size: file.size,
+                height: tempHeight,
+                width: tempWidth,
                 checksum: await generateFileHash(file),
             },
         };

package/dist/lib/media-helper.d.ts

@@ -37,3 +37,7 @@ export interface MarkMediaAsCanceledProps {
     mediaIds: (string | number)[];
 }
 export declare function markMediaAsCanceled({ url, additionalHeaders, mediaIds, }: MarkMediaAsActiveProps): Promise<import("axios").AxiosResponse<any, any, {}>>;
+export declare function getMediaImageDimension(imageUrl: string): Promise<{
+    height: number;
+    width: number;
+}>;

package/dist/lib/media-helper.js

@@ -75,3 +75,16 @@ export async function markMediaAsCanceled({ url, additionalHeaders, mediaIds, })
     });
     return res;
 }
+export async function getMediaImageDimension(imageUrl) {
+    return new Promise((res, rej) => {
+        const tempImg = new Image();
+        tempImg.src = imageUrl;
+        tempImg.onload = () => {
+            res({
+                height: tempImg.naturalHeight,
+                width: tempImg.naturalWidth,
+            });
+        };
+        tempImg.onerror = () => rej(new Error(`Failed to load image: ${imageUrl}`));
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@susonwaiba/react-media-uploader",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "source": "src/index.ts",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/hooks/use-media-uploader.ts

@@ -6,6 +6,7 @@ import {
   markMediaAsTemp,
   markMediaAsActive,
   generateMediaType,
+  getMediaImageDimension,
 } from "@/lib/media-helper";
 import {
   type Media,
@@ -93,8 +94,17 @@ export function useMediaUploader<T extends object>({
     const localId = crypto.randomUUID();
     const mediaType = await generateMediaType(file);
     let tempPreviewUrl: string | undefined = undefined;
+    let tempHeight: number | undefined = undefined;
+    let tempWidth: number | undefined = undefined;
     if (mediaType === MediaTypeEnum.IMAGE) {
       tempPreviewUrl = URL.createObjectURL(file);
+      try {
+        const tempDimension = await getMediaImageDimension(tempPreviewUrl);
+        tempHeight = tempDimension.height;
+        tempWidth = tempDimension.width;
+      } catch (e) {
+        console.log("Error while generating media image dimension ->", e);
+      }
     }
     const item: MediaItem = {
       localId,
@@ -107,6 +117,8 @@ export function useMediaUploader<T extends object>({
         name: file.name,
         mimeType: file.type,
         size: file.size,
+        height: tempHeight,
+        width: tempWidth,
         checksum: await generateFileHash(file),
       },
     };

package/src/lib/media-helper.ts

@@ -151,3 +151,20 @@ export async function markMediaAsCanceled({
   );
   return res;
 }
+
+export async function getMediaImageDimension(imageUrl: string): Promise<{
+  height: number;
+  width: number;
+}> {
+  return new Promise((res, rej) => {
+    const tempImg = new Image();
+    tempImg.src = imageUrl;
+    tempImg.onload = () => {
+      res({
+        height: tempImg.naturalHeight,
+        width: tempImg.naturalWidth,
+      });
+    };
+    tempImg.onerror = () => rej(new Error(`Failed to load image: ${imageUrl}`));
+  });
+}