From 300f30d0d973672450df8eea11b5d516a84c0a37 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Fri, 9 May 2025 17:01:08 +0300
Subject: [PATCH] updated types and changed return of imagepicker

---
 package.json                           |  2 +-
 src/common/ImagePicker.tsx             | 42 ++++++++++++++++----------
 src/types/qortalRequests/interfaces.ts |  1 +
 src/types/qortalRequests/types.ts      |  3 ++
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index d794fd8..16c1102 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "qapp-core",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "Qortal's core React library with global state, UI components, and utilities",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/src/common/ImagePicker.tsx b/src/common/ImagePicker.tsx
index 4f0d562..786083e 100644
--- a/src/common/ImagePicker.tsx
+++ b/src/common/ImagePicker.tsx
@@ -10,6 +10,13 @@ import { fileToBase64 } from "../utils/base64";
 
 type Mode = "single" | "multi";
 
+interface ImageResult {
+  base64: string;
+  name: string;
+  type: string;
+  size: number;
+}
+
 interface CommonProps {
   children: React.ReactNode;
   mode?: Mode;
@@ -19,12 +26,12 @@ interface CommonProps {
 
 interface SingleModeProps extends CommonProps {
   mode?: "single";
-  onPick: (base64: string) => void;
+  onPick: (result: ImageResult) => void;
 }
 
 interface MultiModeProps extends CommonProps {
   mode: "multi";
-  onPick: (base64s: string[]) => void;
+  onPick: (results: ImageResult[]) => void;
 }
 
 type ImageUploaderProps = SingleModeProps | MultiModeProps;
@@ -33,19 +40,18 @@ export const ImagePicker: React.FC<ImageUploaderProps> = ({
   children,
   onPick,
   quality = 0.6,
-  maxWidth= 1200,
+  maxWidth = 1200,
   mode = "single",
 }) => {
   const onDrop = useCallback(
     async (acceptedFiles: File[]) => {
-      const images =
-        mode === "single" ? acceptedFiles.slice(0, 1) : acceptedFiles;
+      const images = mode === "single" ? acceptedFiles.slice(0, 1) : acceptedFiles;
 
-      const base64s: string[] = [];
+      const results: ImageResult[] = [];
 
       for (const image of images) {
         try {
-          let fileToConvert: File;
+          let fileToConvert: Blob;
 
           if (image.type === "image/gif") {
             if (image.size > 500 * 1024) {
@@ -54,15 +60,13 @@ export const ImagePicker: React.FC<ImageUploaderProps> = ({
             }
             fileToConvert = image;
           } else {
-            fileToConvert = await new Promise<File>((resolve, reject) => {
+            fileToConvert = await new Promise<Blob>((resolve, reject) => {
               new Compressor(image, {
                 quality,
                 maxWidth,
                 mimeType: "image/webp",
                 success(result) {
-                  resolve(
-                    new File([result], image.name, { type: "image/webp" })
-                  );
+                  resolve(result);
                 },
                 error(err) {
                   console.error("Compression error:", err);
@@ -73,21 +77,27 @@ export const ImagePicker: React.FC<ImageUploaderProps> = ({
           }
 
           const base64 = await fileToBase64(fileToConvert);
-          base64s.push(base64);
+
+          results.push({
+            base64,
+            name: image.name,
+            type: image.type,
+            size: image.size,
+          });
         } catch (error) {
           console.error("File processing error:", error);
         }
       }
 
       if (mode === "single") {
-        if (base64s[0]) {
-          (onPick as (base64: string) => void)(base64s[0]);
+        if (results[0]) {
+          (onPick as (result: ImageResult) => void)(results[0]);
         }
       } else {
-        (onPick as (base64s: string[]) => void)(base64s);
+        (onPick as (results: ImageResult[]) => void)(results);
       }
     },
-    [onPick, mode]
+    [onPick, mode, quality, maxWidth]
   );
 
   const {
diff --git a/src/types/qortalRequests/interfaces.ts b/src/types/qortalRequests/interfaces.ts
index 657454e..8a78b50 100644
--- a/src/types/qortalRequests/interfaces.ts
+++ b/src/types/qortalRequests/interfaces.ts
@@ -236,6 +236,7 @@ export type PublishMultipleQdnResourcesQortalRequest =
 export interface PublishQdnResourceQortalRequestBase extends BaseRequest {
   action: "PUBLISH_QDN_RESOURCE";
   service: Service;
+  name?: string;
   identifier: string;
   title?: string;
   description?: string;
diff --git a/src/types/qortalRequests/types.ts b/src/types/qortalRequests/types.ts
index dc47d13..dee1a0b 100644
--- a/src/types/qortalRequests/types.ts
+++ b/src/types/qortalRequests/types.ts
@@ -92,6 +92,7 @@ export type ForeignCoin =
   | {
       service: Service
       identifier: string
+      name?: string
       title?: string
       description?: string
       category?: string
@@ -103,6 +104,7 @@ export type ForeignCoin =
   | {
       service: Service
       identifier: string
+      name?: string
       title?: string
       description?: string
       category?: string
@@ -114,6 +116,7 @@ export type ForeignCoin =
   | {
       service: Service
       identifier: string
+      name: string
       title?: string
       description?: string
       category?: string