Wednesday, 31 May 2017

Upload image to an api Reac-Native

I've created an api with nodejs and express that I've deployed to heroku. This api is suppose to upload image to google cloud storage, I've test it with Postman and it worked perfectly.

The issue that I've went into was that my post function in my react native app trigger an error that I don't understand.

Here is my function:

ImagePicker.showImagePicker({ title: 'Select Image' }, (response) => {
// format the image data
    const image = {
      uri: response.uri,
      type: 'image/jpeg',
      name: 'myImage' + '-' + Date.now() + '.jpg'
    }
    // Instantiate a FormData() object
    const imgBody = new FormData();
    // append the image to the object with the title 'image'
    imgBody.append('image', image);
    console.log(imgBody)
    const url = `https://myapiname/img-upload`;
    //Perform the request
    fetch(url, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'multipart/form-data',
      },
      body: imgBody
      }).then(res => res.json()).then(results => {
        // Just me assigning the image url to be seen in the view
        const source = { uri: res.imageUrl, isStatic: true };
        const images = this.state.images;
        images[index] = source;
        this.setState({ images });
    }).catch(error => {
      console.error(error);
    });
});

This is the error that I get

Failed to execute 'readAsText' on 'fileReader' parameter 1 is not of type blob



via anonym

No comments:

Post a Comment