@susonwaiba/react-media-uploader 0.1.3 → 0.1.5

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

@@ -1,5 +1,5 @@
-import { markMediaAsCanceled, generateFileHash, generateUploadUrl, uploadToStorage, markMediaAsTemp, markMediaAsActive, generateMediaType, } from "../lib/media-helper";
-import { MediaStatusEnum } from "../types/media";
+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, } = {}) {
     const [values, setValues] = useState(defaultValues ?? {});
@@ -17,17 +17,34 @@ export function useMediaUploader({ defaultValues, mediaUploadSuccessStatus = Med
     };
     const onFileChange = async (file, name, multiple = false) => {
         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,
             name,
             multiple,
             file,
-            tempPreviewUrl: URL.createObjectURL(file),
+            tempPreviewUrl,
             media: {
-                type: await generateMediaType(file),
+                type: mediaType,
                 name: file.name,
                 mimeType: file.type,
                 size: file.size,
+                height: tempHeight,
+                width: tempWidth,
                 checksum: await generateFileHash(file),
             },
         };
@@ -36,18 +53,30 @@ export function useMediaUploader({ defaultValues, mediaUploadSuccessStatus = Med
             newState[localId] = item;
             return newState;
         });
+        setValues((previous) => {
+            const newState = { ...previous };
+            newState[name] = tempPreviewUrl;
+            return newState;
+        });
         if (!enableManualUpload) {
-            uploadMediaFile(item);
+            await uploadMediaFile(item);
         }
     };
     const uploadMediaFile = async (item) => {
-        const uploadUrlRes = await generateUploadUrl({
-            url: serverConfig?.generateUploadUrl,
-            additionalHeaders: serverConfig?.additionalHeaders,
-            media: item?.media,
-        });
-        if (uploadUrlRes?.data?.item && uploadUrlRes?.data?.uploadUrl) {
-            item["media"] = uploadUrlRes?.data?.item;
+        let uploadData;
+        if (serverConfig?.onGenerateUploadUrl) {
+            uploadData = await serverConfig?.onGenerateUploadUrl(item?.media);
+        }
+        else {
+            const uploadUrlRes = await generateUploadUrl({
+                url: serverConfig?.generateUploadUrl,
+                additionalHeaders: serverConfig?.additionalHeaders,
+                media: item?.media,
+            });
+            uploadData = uploadUrlRes.data;
+        }
+        if (uploadData?.item && uploadData?.uploadUrl) {
+            item["media"] = uploadData?.item;
             setMediaItems((previous) => {
                 const newState = { ...previous };
                 newState[item.localId] = item;
@@ -55,7 +84,7 @@ export function useMediaUploader({ defaultValues, mediaUploadSuccessStatus = Med
             });
             const abortController = new AbortController();
             const uploadRes = await uploadToStorage({
-                uploadUrl: uploadUrlRes?.data?.uploadUrl,
+                uploadUrl: uploadData?.uploadUrl,
                 file: item.file,
                 onUploadProgress: (progressEvent) => {
                     const currentUploadInfo = {
@@ -70,11 +99,18 @@ export function useMediaUploader({ defaultValues, mediaUploadSuccessStatus = Med
                                 }
                                 return newState;
                             });
-                            await markMediaAsCanceled({
-                                url: serverConfig?.markMediaAsCanceled,
-                                additionalHeaders: serverConfig?.additionalHeaders,
-                                mediaIds: [uploadUrlRes?.data?.item?.id],
-                            });
+                            if (serverConfig?.markMediaAsCanceled) {
+                                await markMediaAsCanceled({
+                                    url: serverConfig?.markMediaAsCanceled,
+                                    additionalHeaders: serverConfig?.additionalHeaders,
+                                    mediaIds: [uploadData?.item?.id],
+                                });
+                            }
+                            else if (serverConfig?.onMarkMediaAsCanceled) {
+                                await serverConfig.onMarkMediaAsCanceled([
+                                    uploadData?.item?.id,
+                                ]);
+                            }
                         },
                     };
                     setUploadInfos((previous) => {
@@ -89,30 +125,48 @@ export function useMediaUploader({ defaultValues, mediaUploadSuccessStatus = Med
                 return await onMediaUploadSuccess(item);
             }
             else if (onUploadFailure) {
-                onUploadFailure(uploadRes);
+                await onUploadFailure(uploadRes);
             }
         }
         return undefined;
     };
     const onMediaUploadSuccess = async (item) => {
         if (item.media.id) {
-            let markRes;
+            let markResItems = [];
             if (mediaUploadSuccessStatus === MediaStatusEnum.TEMP) {
-                markRes = await markMediaAsTemp({
-                    url: serverConfig?.markMediaAsTemp,
-                    additionalHeaders: serverConfig?.additionalHeaders,
-                    mediaIds: [item.media.id],
-                });
+                if (serverConfig?.onMarkMediaAsTemp) {
+                    markResItems = await serverConfig.onMarkMediaAsTemp([item.media.id]);
+                }
+                else {
+                    const res = await markMediaAsTemp({
+                        url: serverConfig?.markMediaAsTemp,
+                        additionalHeaders: serverConfig?.additionalHeaders,
+                        mediaIds: [item.media.id],
+                    });
+                    if (res?.data?.items?.length) {
+                        markResItems = res.data.items;
+                    }
+                }
             }
             else if (mediaUploadSuccessStatus === MediaStatusEnum.ACTIVE) {
-                markRes = await markMediaAsActive({
-                    url: serverConfig?.markMediaAsActive,
-                    additionalHeaders: serverConfig?.additionalHeaders,
-                    mediaIds: [item.media.id],
-                });
+                if (serverConfig.onMarkMediaAsActive) {
+                    markResItems = await serverConfig.onMarkMediaAsActive([
+                        item.media.id,
+                    ]);
+                }
+                else {
+                    const res = await markMediaAsActive({
+                        url: serverConfig?.markMediaAsActive,
+                        additionalHeaders: serverConfig?.additionalHeaders,
+                        mediaIds: [item.media.id],
+                    });
+                    if (res?.data?.items?.length) {
+                        markResItems = res.data.items;
+                    }
+                }
             }
-            if (markRes?.data?.items?.length && markRes.data.items[0]) {
-                const newMedia = markRes.data.items[0];
+            if (markResItems?.length) {
+                const newMedia = markResItems[0];
                 item["media"] = newMedia;
                 setMediaItems((previous) => {
                     const newState = { ...previous };
@@ -142,7 +196,7 @@ export function useMediaUploader({ defaultValues, mediaUploadSuccessStatus = Med
                     return newState;
                 });
                 if (onUploadSuccess) {
-                    onUploadSuccess(currentValues);
+                    await onUploadSuccess(currentValues);
                 }
                 return currentValues;
             }

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,40 +1,42 @@
-{
-  "name": "@susonwaiba/react-media-uploader",
-  "version": "0.1.3",
-  "source": "src/index.ts",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "main": "dist/index.js",
-  "scripts": {
-    "build": "rm -rf dist && tsc && tsc-alias"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/susonwaiba/react-media-uploader.git"
-  },
-  "keywords": [
-    "react",
-    "media",
-    "uploader",
-    "nextjs",
-    "media-uploader",
-    "react-media-uploader"
-  ],
-  "author": "Suson Waiba <susonwaiba@gmail.com> (https://susonwaiba.github.io)",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/susonwaiba/react-media-uploader/issues"
-  },
-  "homepage": "https://github.com/susonwaiba/react-media-uploader#readme",
-  "peerDependencies": {
-    "axios": ">=1",
-    "react": ">=18",
-    "react-dom": ">=18"
-  },
-  "devDependencies": {
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "tsc-alias": "^1",
-    "typescript": "^5"
-  }
-}
+{
+  "name": "@susonwaiba/react-media-uploader",
+  "version": "0.1.5",
+  "source": "src/index.ts",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.js",
+  "scripts": {
+    "dev": "rm -rf dist && tsc-watch --noClear --onSuccess tsc-alias",
+    "build": "rm -rf dist && tsc && tsc-alias"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/susonwaiba/react-media-uploader.git"
+  },
+  "keywords": [
+    "react",
+    "media",
+    "uploader",
+    "nextjs",
+    "media-uploader",
+    "react-media-uploader"
+  ],
+  "author": "Suson Waiba <susonwaiba@gmail.com> (https://susonwaiba.github.io)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/susonwaiba/react-media-uploader/issues"
+  },
+  "homepage": "https://github.com/susonwaiba/react-media-uploader#readme",
+  "peerDependencies": {
+    "axios": ">=1",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "tsc-alias": "^1",
+    "tsc-watch": "^7.2.0",
+    "typescript": "^5"
+  }
+}