How to pass POST parameters in fetch for uploading image to server in React Native?

Question

This is the code with I'm trying to send my image to server.

 postData = async () => {   
        var location = await AsyncStorage.getItem('location');        
        var path = await AsyncStorage.getItem('path');
        var post_type = await AsyncStorage.getItem('post_type');    
        var userId = await AsyncStorage.getItem('userID');

    const formData = new FormData();

//I want to pass params in fetch but I don't know how to.     

       var params = JSON.stringify({ 
            "user": userId,
            "description": this.state.description,
            "location": location,
            "post_type": post_type,
          });

    const uriPart = path.split('.');
    const fileExtension = uriPart[uriPart.length - 1];

    formData.append('photo', {
        uri: path,
        name: `photo.${fileExtension}`,
        type: `image/${fileExtension}`,
    });

    fetch(strings.baseUri+"addPosts",{
        method: 'POST',
        headers: {
            'Content-Type': 'multipart/form-data',
          },
        body: formData,
      })
      .then((response) => response.json())
      .then((responseJson) => {

       alert(responseJson); // This gives me error JSON Parse error: Unexpected EOF

      })
      .catch((error) => {
          console.error(error);
      });    
  }

I want to pass my parameters in fetch. The parameters are params in my case. I want to send these parameters along with my image to server. Please help.

UPDATE

this is when I used alert(JSON.stringify(response));

Check https://stackoverflow.com/questions/38691379/how-to-upload-image-on-server-using-reactnative — IftekharDani, Jan 15 '19 at 10:56
IftekharDani I checked this solution. But it doesn't tells me on how I can pass my params in fetch. — Shubham Bisht, Jan 15 '19 at 11:00

score 2 · Answer 1 · answered Jan 15 '19 at 11:09

2

You can pass parameter with append

reference link: How do I post form data with fetch api?

const formData = new FormData();

formData.append('photo', {
  uri: path,
  name: `photo.${fileExtension}`,
  type: `image/${fileExtension}`,
});

formData.append('user', userId);
formData.append('description', description);
formData.append('location', location);
formData.append('post_type', post_type);

answered Jan 15 '19 at 11:09

IftekharDani

3,619
1
16
21

it's still giving me the error - JSON Parse error: Unexpected EOF – Shubham Bisht Jan 15 '19 at 11:14
First, you check on the server you getting the params and images? – IftekharDani Jan 15 '19 at 11:18
Also log `response` what you get before convert to JSON – IftekharDani Jan 15 '19 at 11:18
I checked. I didn't get anything on the server. And I used `alert(response)` which gave me the output [object Object] – Shubham Bisht Jan 15 '19 at 11:34
you can log with `console.log(JSON.stringify(response))` – IftekharDani Jan 15 '19 at 11:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/186705/discussion-between-shubham-bisht-and-iftekhardani). – Shubham Bisht Jan 15 '19 at 11:52

score 0 · Answer 2 · answered Jan 15 '19 at 10:52

0

FormData cannot take stringified JSON, but you can iterate over the object, appending values to the form. Like this:

var params = { 
            "user": userId,
            "description": this.state.description,
            "location": location,
            "post_type": post_type,
          };

    const uriPart = path.split('.');
    const fileExtension = uriPart[uriPart.length - 1];

    formData.append('photo', {
        uri: path,
        name: `photo.${fileExtension}`,
        type: `image/${fileExtension}`,
    });

    Object.keys(params).forEach(key => formData.append(key, params[key]));

    fetch(strings.baseUri+"addPosts",{
        method: 'POST',
        headers: {
            'Content-Type': 'multipart/form-data',
          },
        body: formData,
      })
      .then((response) => response.json())
      .then((responseJson) => {

       alert(responseJson); // This gives me error JSON Parse error: Unexpected EOF

      })
      .catch((error) => {
          console.error(error);
      });    
  }

answered Jan 15 '19 at 10:52

Mikhail Litvinov

452
2
10

it gives me a warning. "TyperError: Requested keys of a value that is not an object." – Shubham Bisht Jan 15 '19 at 11:01
@ShubhamBisht did you remove stringification of the object? – Mikhail Litvinov Jan 15 '19 at 11:02
Yes I did. And it still gives me a JSON Parse error from `alert(responseJson)` – Shubham Bisht Jan 15 '19 at 11:06
please help. i'm not able to figure out anything on this. – Shubham Bisht Jan 15 '19 at 11:36
@ShubhamBisht what is ```response```, can you log it? – Mikhail Litvinov Jan 15 '19 at 14:22

How to pass POST parameters in fetch for uploading image to server in React Native?

2 Answers2