be-components 2.8.2 → 3.0.0

package/src/Components/ImageUploader.tsx

@@ -1,23 +1,27 @@
  // Set your cloud name and unsigned upload preset here:
  const YOUR_CLOUD_NAME = "hoabts6mc";
  const YOUR_UNSIGNED_UPLOAD_PRESET = "be_auth_svc";
- import React, { useRef } from "react";
+
+
+import React from "react";
 import { TouchableOpacity } from "react-native";
+import * as ImagePicker from 'expo-image-picker';
+import axios from 'axios';
 
 
 type CldUploaderProps = {
-  onFinishUpload : (obj:any) => void
+  onFinishUpload : (obj:any | undefined) => void
     onStartUpload?: () => void,
     onCancelUpload?: () => void,
   children?:any,
   public_id: string
 }
-const ImageUploader = ({ onStartUpload, onCancelUpload, onFinishUpload, public_id, children }:CldUploaderProps) => {
-    const upload_ref:any = useRef()
-
-  const processFile = async (e:any) => {
+const ImageUploader = ({ onStartUpload, onFinishUpload, public_id, children }:CldUploaderProps) => {
+  
+  /*
+  const processFile = async (file:any) => {
     if(onStartUpload){ onStartUpload() }
-    var file = e.target.files[0];
+    //var file = e.target.files[0];
     if(!file && onCancelUpload){ onCancelUpload()}
     var POST_URL =
       "https://api.cloudinary.com/v1_1/" + YOUR_CLOUD_NAME + "/auto/upload";
@@ -87,19 +91,62 @@ const ImageUploader = ({ onStartUpload, onCancelUpload, onFinishUpload, public_i
 
     function noop() {}
   };
-
-  const handleClick = () => {
-    if(!upload_ref?.current) { return console.log('no ref') }
-    upload_ref.current.click() 
+  */
+
+  const upload = async(file:any) => {
+    const formData = new FormData();
+    formData.append('file', file); // 'imageFile' is your selected image file
+    formData.append("cloud_name", YOUR_CLOUD_NAME);
+    formData.append("upload_preset", YOUR_UNSIGNED_UPLOAD_PRESET);
+    formData.append("public_id", public_id);
+    const uploadUrl = `https://api.cloudinary.com/v1_1/${YOUR_CLOUD_NAME}/image/upload`;
+    var XUniqueUploadId = +new Date();
+    try {
+      const response = await axios.post(uploadUrl, formData, {
+        headers: {
+            'Content-Type': 'multipart/form-data',
+            "X-Unique-Upload-Id": XUniqueUploadId,
+            'Authorization': undefined,
+            'x-api-key':undefined,
+            'sessionid':undefined,
+            'distinctid':undefined
+        }
+      })
+      return response.data
+    } catch (error) {
+      return onFinishUpload(undefined)
+    }
   }
 
+  const handleClick = async() => {
+      if(onStartUpload){onStartUpload()}
+      let result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ['images', 'videos'],
+        allowsEditing: true,
+        base64:true,
+        //aspect: [4, 3],
+        quality: 1,
+      });
+      if(!result?.assets){ return  onFinishUpload(undefined)}
+      let file = result.assets[0]
+      if(!file){ return onFinishUpload(undefined) }
+      let mimeType = file.mimeType
+      let base_64 = file.base64
+      if(!mimeType || !base_64){ return onFinishUpload(undefined) }
+      let url = `data:${mimeType};base64,${base_64}`
+      let object = await upload(url);
+      return onFinishUpload(object)
+    }
     return (
          <TouchableOpacity style={{ padding:10 }} onPress={() => handleClick()}>
-            <input ref={upload_ref as any} style={{ display:'none' }} type="file"  onChange={processFile} onAbort={() => onCancelUpload ? onCancelUpload() : console.log('cancelled')}/>
             {children}
         </TouchableOpacity>
     );
 
 }
 
+/*
+<input ref={upload_ref as any} style={{ display:'none' }} type="file"  onChange={processFile} onAbort={() => onCancelUpload ? onCancelUpload() : console.log('cancelled')}/>
+*/
+
 export default ImageUploader;