@siamf/upload 1.0.0 → 1.0.1

package/dist/esm/components/image/typings.d.ts

@@ -0,0 +1,73 @@
+import { DragEvent } from "react";
+export type ImageType = {
+    file?: File;
+    dataURL?: string;
+} | null;
+type TExportTypes = {
+    dragProps: {
+        onDrop: (e: DragEvent<HTMLDivElement>) => void;
+        onDragEnter: (e: DragEvent<HTMLDivElement>) => void;
+        onDragLeave: (e: DragEvent<HTMLDivElement>) => void;
+        onDragOver: (e: DragEvent<HTMLDivElement>) => void;
+        onDragStart: (e: DragEvent<HTMLDivElement>) => void;
+    };
+    isDragging: boolean;
+    onImageUpload: () => void;
+};
+type TPropsTypes = {
+    inputProps?: React.HTMLProps<HTMLInputElement>;
+    acceptType?: ImageAcceptType | Exclude<ImageAcceptType, ImageAcceptType.ALL>[];
+    maxFileSize?: number;
+    resolutionWidth?: number;
+    resolutionHeight?: number;
+    resolutionType?: ResolutionType;
+};
+export declare enum ImageAcceptType {
+    ALL = "all",
+    SVG = "image/svg+xml",
+    PNG = "image/png",
+    JPEG = "image/jpeg",
+    GIF = "image/gif",
+    BMP = "image/bmp",
+    WEBP = "image/webp",
+    TIFF = "image/tiff",
+    ICO = "image/x-icon",
+    HEIC = "image/heic",
+    HEIF = "image/heif"
+}
+export type ImageErrorTypes = {
+    maxFileSize: boolean;
+    acceptType: boolean;
+    resolution: boolean;
+};
+export interface ImageExportTypes extends TExportTypes {
+    imageInfo: ImageType;
+    errors: ImageErrorTypes;
+    onImageRemove: () => void;
+}
+export interface ImagePropsTypes extends TPropsTypes {
+    children: (props: ImageExportTypes) => React.ReactNode;
+    onChange: (value: ImageType) => void;
+    value: ImageType;
+    onError?: (errors: ImageErrorTypes) => void;
+}
+export type MultiImageType = ImageType[];
+export interface MultiImageErrorTypes extends ImageErrorTypes {
+    maxNumber: boolean;
+}
+export interface MultiImageExportTypes extends TExportTypes {
+    imageInfo: MultiImageType;
+    errors: MultiImageErrorTypes;
+    onImageRemove: (index: number) => void;
+    onImageUpdate: (index: number) => void;
+    onImageRemoveAll: () => void;
+}
+export interface MultiImagePropsTypes extends TPropsTypes {
+    children: (props: MultiImageExportTypes) => React.ReactNode;
+    onChange: (value: MultiImageType) => void;
+    value: MultiImageType;
+    onError?: (errors: MultiImageErrorTypes) => void;
+    maxNumber?: number;
+}
+export type ResolutionType = "absolute" | "less" | "more" | "ratio";
+export {};

package/dist/esm/components/image/typings.js

@@ -0,0 +1,15 @@
+export var ImageAcceptType;
+(function (ImageAcceptType) {
+    ImageAcceptType["ALL"] = "all";
+    ImageAcceptType["SVG"] = "image/svg+xml";
+    ImageAcceptType["PNG"] = "image/png";
+    ImageAcceptType["JPEG"] = "image/jpeg";
+    ImageAcceptType["GIF"] = "image/gif";
+    ImageAcceptType["BMP"] = "image/bmp";
+    ImageAcceptType["WEBP"] = "image/webp";
+    ImageAcceptType["TIFF"] = "image/tiff";
+    ImageAcceptType["ICO"] = "image/x-icon";
+    ImageAcceptType["HEIC"] = "image/heic";
+    ImageAcceptType["HEIF"] = "image/heif";
+})(ImageAcceptType || (ImageAcceptType = {}));
+//# sourceMappingURL=typings.js.map

package/dist/esm/components/image/typings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typings.js","sourceRoot":"","sources":["../../../../src/components/image/typings.ts"],"names":[],"mappings":"AA6BA,MAAM,CAAN,IAAY,eAYX;AAZD,WAAY,eAAe;IACvB,8BAAW,CAAA;IACX,wCAAqB,CAAA;IACrB,oCAAiB,CAAA;IACjB,sCAAmB,CAAA;IACnB,oCAAiB,CAAA;IACjB,oCAAiB,CAAA;IACjB,sCAAmB,CAAA;IACnB,sCAAmB,CAAA;IACnB,uCAAoB,CAAA;IACpB,sCAAmB,CAAA;IACnB,sCAAmB,CAAA;AACvB,CAAC,EAZW,eAAe,KAAf,eAAe,QAY1B"}

package/dist/esm/components/utils/utils.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FileAcceptType } from "../file/typings";
+import { ImageAcceptType, ResolutionType } from "../image/typings";
+export declare const openFileDialog: (inputRef: React.RefObject<HTMLInputElement | null>) => void;
+export declare const getFileAccepts: (acceptType?: FileAcceptType | Exclude<FileAcceptType, FileAcceptType.ALL>[]) => string[];
+export declare const getImageAccepts: (acceptType?: ImageAcceptType | Exclude<ImageAcceptType, ImageAcceptType.ALL>[]) => string[];
+export declare const getImage: (file: File) => Promise<HTMLImageElement>;
+export declare const getBase64: (file: File) => Promise<string>;
+export declare const isResolutionValid: (image: HTMLImageElement, resolutionType: ResolutionType, resolutionWidth: number | undefined, resolutionHeight: number | undefined) => boolean;

package/dist/esm/components/utils/utils.js

@@ -0,0 +1,69 @@
+import { FileAcceptType } from "../file/typings";
+import { ImageAcceptType } from "../image/typings";
+export const openFileDialog = (inputRef) => {
+    if (inputRef.current)
+        inputRef.current.click();
+};
+export const getFileAccepts = (acceptType) => {
+    if (!acceptType || acceptType === FileAcceptType.ALL) {
+        const defaultArray = Object.values(FileAcceptType).filter(value => value !== FileAcceptType.ALL);
+        return defaultArray;
+    }
+    else {
+        return acceptType;
+    }
+};
+export const getImageAccepts = (acceptType) => {
+    if (!acceptType || acceptType === ImageAcceptType.ALL) {
+        const defaultArray = Object.values(ImageAcceptType).filter(value => value !== ImageAcceptType.ALL);
+        return defaultArray;
+    }
+    else {
+        return acceptType;
+    }
+};
+export const getImage = (file) => {
+    const image = new Image();
+    return new Promise((resolve) => {
+        image.addEventListener('load', () => resolve(image));
+        image.src = URL.createObjectURL(file);
+    });
+};
+export const getBase64 = (file) => {
+    const reader = new FileReader();
+    return new Promise((resolve) => {
+        reader.addEventListener('load', () => resolve(String(reader.result)));
+        reader.readAsDataURL(file);
+    });
+};
+export const isResolutionValid = (image, resolutionType, resolutionWidth, resolutionHeight) => {
+    if (!resolutionWidth || !resolutionHeight || !image.width || !image.height)
+        return true;
+    switch (resolutionType) {
+        case 'absolute': {
+            if (image.width === resolutionWidth && image.height === resolutionHeight)
+                return true;
+            break;
+        }
+        case 'ratio': {
+            const ratio = resolutionWidth / resolutionHeight;
+            if (image.width / image.height === ratio)
+                return true;
+            break;
+        }
+        case 'less': {
+            if (image.width <= resolutionWidth && image.height <= resolutionHeight)
+                return true;
+            break;
+        }
+        case 'more': {
+            if (image.width >= resolutionWidth && image.height >= resolutionHeight)
+                return true;
+            break;
+        }
+        default:
+            break;
+    }
+    return false;
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/utils/utils.ts"],"names":[],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -0,0 +1,8 @@
+export { default as FileUpload } from "./components/file/FileUpload";
+export { default as MultiFileUpload } from "./components/file/MultiFileUpload";
+export { FileAcceptType } from "./components/file/typings";
+export type { FileType, MultiFileType, FileErrorTypes, MultiFileErrorTypes } from "./components/file/typings";
+export { default as ImageUpload } from "./components/image/ImageUpload";
+export { default as MultiImageUpload } from "./components/image/MultiImageUpload";
+export { ImageAcceptType } from "./components/image/typings";
+export type { ImageType, MultiImageType, ImageErrorTypes, MultiImageErrorTypes } from "./components/image/typings";

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+//Files
+export { default as FileUpload } from "./components/file/FileUpload";
+export { default as MultiFileUpload } from "./components/file/MultiFileUpload";
+export { FileAcceptType } from "./components/file/typings";
+//Image
+export { default as ImageUpload } from "./components/image/ImageUpload";
+export { default as MultiImageUpload } from "./components/image/MultiImageUpload";
+export { ImageAcceptType } from "./components/image/typings";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO;AACP,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3D,OAAO;AACP,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC"}

package/package.json

@@ -1,12 +1,56 @@
 {
   "name": "@siamf/upload",
-  "version": "1.0.0",
-  "description": "",
-  "license": "ISC",
-  "author": "",
-  "type": "commonjs",
-  "main": "index.js",
+  "version": "1.0.1",
+  "description": "A fully headless React package for handling image and file uploads with complete UI control. It provides four flexible components—ImageUpload, MultiImageUpload, FileUpload, and MultiFileUpload.",
+  "homepage": "https://github.com/siamahnaf/siamf-upload",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "rimraf dist && npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module CommonJS --outDir dist/cjs"
+  },
+  "author": {
+    "name": "Siam Ahnaf",
+    "email": "mail@siamahnaf.com",
+    "url": "https://www.siamahnaf.com"
+  },
+  "license": "MIT",
+  "keywords": [
+    "image",
+    "images",
+    "upload",
+    "uploader",
+    "uploading",
+    "react image upload",
+    "react images uploading",
+    "drag",
+    "drag and drop",
+    "image drag and drop",
+    "reactjs",
+    "typescript",
+    "javascript",
+    "render props",
+    "react-component"
+  ],
+  "repository": {
+    "type": "git",
+    "directory": "https://github.com/siamahnaf/siamf-upload",
+    "url": "https://github.com/siamahnaf/siamf-upload"
+  },
+  "devDependencies": {
+    "@types/node": "^22.12.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.3"
+  },
+  "peerDependencies": {
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   }
-}
+}