npm - @susonwaiba/react-media-uploader - Versions diffs - 0.1.4 → 0.1.6 - Mend

@susonwaiba/react-media-uploader 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/hooks/use-media-uploader.js +19 -7
package/dist/lib/media-helper.d.ts +4 -0
package/dist/lib/media-helper.js +13 -0
package/package.json +1 -1
package/src/hooks/use-media-uploader.ts +17 -5
package/src/lib/media-helper.ts +17 -0

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

@@ -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),
             },
         };
@@ -87,18 +99,18 @@ export function useMediaUploader({ defaultValues, mediaUploadSuccessStatus = Med
                                 }
                                 return newState;
                             });
-                            if (serverConfig?.markMediaAsCanceled) {
+                            if (serverConfig?.onMarkMediaAsCanceled) {
+                                await serverConfig.onMarkMediaAsCanceled([
+                                    uploadData?.item?.id,
+                                ]);
+                            }
+                            else {
                                 await markMediaAsCanceled({
                                     url: serverConfig?.markMediaAsCanceled,
                                     additionalHeaders: serverConfig?.additionalHeaders,
                                     mediaIds: [uploadData?.item?.id],
                                 });
                             }
-                            else if (serverConfig?.onMarkMediaAsCanceled) {
-                                await serverConfig.onMarkMediaAsCanceled([
-                                    uploadData?.item?.id,
-                                ]);
-                            }
                         },
                     };
                     setUploadInfos((previous) => {

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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),
       },
     };
@@ -167,16 +179,16 @@ export function useMediaUploader<T extends object>({
                 }
                 return newState;
               });
-              if (serverConfig?.markMediaAsCanceled) {
+              if (serverConfig?.onMarkMediaAsCanceled) {
+                await serverConfig.onMarkMediaAsCanceled([
+                  uploadData?.item?.id,
+                ]);
+              } else {
                 await markMediaAsCanceled({
                   url: serverConfig?.markMediaAsCanceled,
                   additionalHeaders: serverConfig?.additionalHeaders,
                   mediaIds: [uploadData?.item?.id],
                 });
-              } else if (serverConfig?.onMarkMediaAsCanceled) {
-                await serverConfig.onMarkMediaAsCanceled([
-                  uploadData?.item?.id,
-                ]);
               }
             },
           };

package/src/lib/media-helper.ts CHANGED Viewed

@@ -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}`));
+  });
+}