CODEWITHSUNDEEP
reactjsreact-nativeexpo
ashblossom
ashblossom

Reputation: 555

source.uri should not be empty string

I want to load image but console log showing alert like source.uri should not be an empty string like this enter image description here

and here is my code of image on View in React

 <Button
          onPress={this._pickImage}
          title="Upload Image KTP"
        />
        <Image source={this.state.ImageKTP ? { uri: this.state.ImageKTP } : null} style={{ width: 200, height: 200 }} />
         <Button
          onPress={this._pickImage2}
          title="Upload Image Selfie"
        />
        <Image source={this.state.ImageSelfie ? { uri: this.state.ImageSelfie } : null}  style={{ width: 200, height: 200 }} />

and here is the pickImage Code //PickImage 2 also same with this

_pickImage = async () => {
        await Permissions.askAsync(Permissions.CAMERA_ROLL);
        const { cancelled, uri } = await ImagePicker.launchImageLibraryAsync({
          allowsEditing: true,
          aspect: [4, 4],
          base64: true
        });
        if (!cancelled) {
          this.setState({ ImageKTP: uri }, () => {
            this.createFormData(uri);
          });
        }
      };

and this is createformdata

createFormData = async (uri) =>  {
        const {ImageKTP} = this.state;
        if(!ImageKTP) return;
        let apiUrl = 'http://192.168.0.20/Api/uploading.php?ImageKTP = ' +ImageKTP;
        let uriParts = uri.split('.');
        let fileType = uriParts[uriParts.length - 1];

  let formData = new FormData();
  formData.append('ImageKTP', {
    uri,
    name: `ImageKTP.${fileType}`,
    type: `image/${fileType}`,
  });


  console.log(ImageKTP);

  let options = {
    method: 'POST',
    body: formData,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'multipart/form-data',
      
    },
  };

  return fetch(apiUrl, options);
}

is something wrong in here?

Upvotes: 1

Views: 1367

Answers (1)

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

I think you are getting this because ImageKTP is empty initially. Try setting ImageKTP value to null initially instead of empty

or doing something like

{this.state.ImageKTP.length > 0 ? <Image source={{uri: this.state.ImageKTP }} /> : null }

Upvotes: 1

Related Questions