Problem with upload file to Amity

Android
1

Hello, I 'm using amity ts-sdk ver 6.2.0 for building app with react-native, i have problem when uploading image/file/video to Amity and i got this error in terminal log:
WARN Possible Unhandled Promise Rejection (id: 3):
Error: AxiosError: Network Error

I want to know what reason can caused this error and how can i fix it

2

Hello, may we have the relevant code and file/video specification as well?

3

This is my code to send test image:

const sendTestImage=async(filePath:string)=>{
    const fileName=filePath.split('/').reverse()[0];
    const blob=await uriToBlob(filePath);
    
    const data=new FormData();
    
    const file=new File([blob],fileName,{type:blob.type});
    data.append("files",file);
    console.info("Data: "+JSON.stringify(data));
    const client=Client.getActiveClient();
    
    try{
        FileRepository.createImage(data).then((response)=>{
            console.info("Respond: "+JSON.stringify(response))
        })
    }
    catch (e)
    {
            console.info("Error create image")
            console.error(e);
    }
}

imagePath is path of image chosen from image_crop_picker. I got no error and got this warning

WARN Possible Unhandled Promise Rejection (id: 3):
Error: AxiosError: Network Error

4

thank you we’ll investigate and get back to you asap

5

Hi @vinhpna ,

Based on the error and code, it doesn’t seem to have came from our TS SDK because the error is occurred before the SDK is triggered. Can you please double check the correctness of imagePath and file data again before passing to FileRepository.createImage? You can follow this code as an example:


 const ImageUpload = () => {
  const changeHandler = async (event: React.ChangeEvent<HTMLInputElement>) => {
    if (!event.target.files) {
      return;
    }

    const data = new FormData();
    data.append('files', event.target.files[0]);

    const { data: image } = await FileRepository.createImage(data);

    return image;
  };

  return <input type="file" name="file" onChange={changeHandler} />;
};

Thank you.

6

Hi @SocialPlus_Support ,
Thank you for your replying!
Currently, I have 2 problems:
Firstly, I am using React Native to build mobile app so I cannot use React.ChangeEvent<HTMLInputElement>. Can you give me some code examples about uploading image or file on React Native .
Secondly, when i change try-catch scope like below all thing is ok until I call SDK function:

const sendTestImage = async (filePath: string) => {
    const imageFetch = await fetch(filePath.replace("file:///", "file:/"));
    // console.info("Image fetch: " + JSON.stringify(imageFetch));
    // console.info("Image file: " + imageFile);
    const data = new FormData();
    const imageBlob=await imageFetch.blob();
    
    console.info("Image blob: "+JSON.stringify(imageBlob))
    data.append("files", imageBlob);   
    try {
        const fileCreateResult = await FileRepository.createImage(data);
        console.info("File result: " + JSON.stringify(fileCreateResult.data));
    }
    catch (e) {
        console.error("Error create image")
        console.error(e);
    }
}

and this my console log:

image
image1356×138 5.87 KB

Hope you reply soon.
Have a nice day!

7

@vinhpna Are you using Expo or React native Cli?

8

@topAmity ,
I used React Native Cli. Are there any problems with this?

9

@vinhpna There’s no problems. I just want to give you a code example that based on React Native Cli/ Expo. For React native Cli, I use react-native-image-picker to get image and create FormData from the imagePath before passing the value to SDK.

import {
    ImageLibraryOptions,
    launchImageLibrary,
  } from 'react-native-image-picker';


const openImageGallery = async () => {
    await launchImageLibrary(
      actions[1] as unknown as ImageLibraryOptions,
      async (response) => {
        if (response.didCancel) {
          console.log('User cancelled image picker');
        } else if (response.errorCode) {
          console.log(
            'ImagePicker Error: ',
            response.errorCode + ', ' + response.errorMessage
          );
        } else {
          if (response.assets) {
     
         await uploadFile(response.assets[0].uri)
          }
        }
      }
    );
  };
  export async function uploadFile(filePath: string): Promise<string> {
    return await new Promise(async (resolve, reject) => {
      const formData = new FormData();
      const parts = filePath.split('/');
      const fileName = parts[parts.length - 1];
      const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
      const uri =
        Platform.OS === 'android' ? filePath : filePath.replace('file://', '');
  
      formData.append('files', {
        name: fileName,
        type: fileType,
        uri: uri,
      });
      const { data: image } = await FileRepository.createImage(formData);

      return image;
      
    });
  }