0

I am using React-Native two days back After React-Native version upgrading to 0-62.2, I encountered many problems. Among them important one is image upload error getting [Error:Network error ] Before upgrading the React-native my code is working fine

Below code is working fine for me for multiple image upload before upgrading to React-Native 0.62.2 but now i am getting [Error: Network error]

constructor() {
    super();
    this.state = {
      uploadPercentage: 0,
    }
  }

  // upload Files upload_Files = async () => {
  upload_File() {
    
    if (this.validate_Fields()) {
      const { image, images, files, description, userId, size } = this.state;
      console.log('AddPost Screen : upload_File:', 'userId:', userId, 'Files:', files, 'description:', description)
      // this.setState({ error: '', loading: true });

      if (this.state.type === 'image/jpeg') {
       
        console.log('AddPost Screen : upload_ files :', files);
        const formData = new FormData();
        formData.append('user_id', userId);
        formData.append('description', description);
        // formData.append('files[]', files);
        for (let i = 0; i < files.length; i++) {
          formData.append('files[]', {
            name: files[i].path.split('/').pop(),
            type: files[i].mime,
            uri: Platform.OS === 'android' ? files[i].path : files[i].path.replace('file://', ''),
          });
        }


        // upload percentage progress bar  ******************************************************
        const options = {
          onUploadProgress: (progressEvent) => {
            const { loaded, total } = progressEvent;
            let percent = Math.floor((loaded * 100) / total)
            console.log(`${loaded}kb of ${total}kb | ${percent}%`);

            if (percent < 100) {
              this.setState({ uploadPercentage: percent })
            }
          }
        }


        axios.post(API_URL + '/fileuploadapi/uploadPost', formData, options, {
          headers: { "Content-type": "multipart/form-data" }
        }).then((response) => {
          console.log(JSON.parse(JSON.stringify(response.status)));


          // upload percentage progress 
          this.setState({ uploadPercentage: 100 }, () => {
            setTimeout(() => {
              this.setState({ uploadPercentage: 0 })
            }, 1000);
          })


          this.cleanupImages();

          Alert.alert('Upload Post Successfully');
        }).catch((error) => {
          console.log(error);
          this.cleanupImages();

          Alert.alert('image Upload Post Failed  , Try again !');
        });
 
     }
   }
}



  // clear files data 
  cleanupImages() {
    
    this.setState({
      description: '',
      image: null,
      images: null,
      // video: '',
      files: '',
      uploadPercentage: 0,
    })
    ImagePicker.clean().then(() => {
      console.log('removed tmp images from tmp directory');
    }).catch(error => {
      alert(error);
    });
  }

If anyone know the solution please let me know ...

1 Answer 1

1

I just found the solution for the React-Native 62.2 upgrading error for image upload Error

[Error: network error]

Just remove the file "ReactNativeFlipper.java" from debug/java folder File Location : android/app/src/debug/java/com/appname/ReactNativeFlipper.java

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.