I'm uploading an image with react native and post it an API. It only works in my second try

37 views Asked by At

I'm using react native class component. I'm trying to pick an image from gallery and post it to API. But it only works in my second try.

When I pick image from gallery it says:

Fetch Error: [Type error: Network request failed].

I got 'success' alert at my second request, but never works on first try. Here is some parts of my code:

openImagePicker = () => {
    const options = {
      mediaType: 'photo',
    };

    launchImageLibrary(options, async (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('Image picker error: ', response.error);
      } else {
        console.log('Image picker Worked: ', response.message);

        let imageUri = response.uri || response.assets?.[0]?.uri;
        let fileType = response.type || 'image/jpeg'; 
        let fileName = response.fileName || 'image.jpg';

        this.setState({ files: imageUri },
          () => { console.log('files138:', this.state.files) }
        );

        const formData = new FormData();
        formData.append('files', {
          uri: imageUri,
          type: fileType,
          name: fileName,
        });

        fetch(config.restApi+'upload/advert/tr', {
          method: 'POST',
          headers: {
            'Authorization': 'Bearer ' + clientData.sessionHash
          },
          body: formData,
        })
          .then((response) => response.json())
          .then(responseData => {
            switch (responseData.status) {
              case 200: {
                Alert.alert('Success');
              }
                break;
              case 203: {
                Alert.alert('203');
              }
                break;
              default: {
                Alert.alert('Alert Error');
              }
                break;
            }
          })
          .catch(error => {
            console.error('Fetch error:', error);
          });
      }
    });
  };

case 3:

        return (

          <View style={{ flex: 1, justifyContent: 'center' }}>
            {this.state.files && (
              <Image
                source={{ uri: this.state.files }}
                style={{ flex: 1 }}
                resizeMode="contain"
              />
            )}
            <View style={{ marginTop: 20 }}>
              <Button title="Choose from Device" onPress={this.openImagePicker} />
            </View>
          </View>

        );
0

There are 0 answers