{"id":13034,"date":"2025-08-01T11:54:42","date_gmt":"2025-08-01T11:54:42","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=13034"},"modified":"2025-08-01T11:54:42","modified_gmt":"2025-08-01T11:54:42","slug":"use-formdata-in-react-native","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react-native\/use-formdata-in-react-native","title":{"rendered":"Use FormData in React Native"},"content":{"rendered":"

In React Native, FormData is used when you need to send form-like data, such as file uploads or key-value pairs, typically in a POST request. It behaves similarly to how it works in the browser.<\/p>\n

Here’s a basic example of how to use FormData in React Native:<\/p>\n

Example 1: Sending Text Fields<\/h3>\n

Using a functional component with useState and filter method (Recommended for modern apps):<\/p>\n

const sendFormData = async () => {\r\n  const formData = new FormData();\r\n  formData.append('name', 'John Doe');\r\n  formData.append('email', 'john@example.com');\r\n\r\n  try {\r\n    const response = await fetch('https:\/\/your-api-url.com\/endpoint', {\r\n      method: 'POST',\r\n      body: formData,\r\n      headers: {\r\n        'Content-Type': 'multipart\/form-data',\r\n      },\r\n    });\r\n    const result = await response.json();\r\n    console.log(result);\r\n  } catch (error) {\r\n    console.error('Error:', error);\r\n  }\r\n};\r\n<\/pre>\n
Example 2: Uploading a File (e.g., Image)<\/h3>\n
Make sure the file object contains the correct structure:<\/p>\n
const uploadImage = async () => {\r\n  const formData = new FormData();\r\n\r\n  \/\/ Replace this with your image picker result\r\n  const image = {\r\n    uri: 'file:\/\/\/path\/to\/image.jpg',\r\n    name: 'image.jpg',\r\n    type: 'image\/jpeg',\r\n  };\r\n\r\n  formData.append('photo', image);\r\n  formData.append('userId', '12345'); \/\/ you can send other data too\r\n  try {\r\n    const response = await fetch('https:\/\/your-api-url.com\/upload', {\r\n      method: 'POST',\r\n      body: formData,\r\n      headers: {\r\n        'Content-Type': 'multipart\/form-data',\r\n        \/\/ Add any other headers as needed (e.g., Authorization)\r\n      },\r\n    });\r\n    const result = await response.json();\r\n    console.log(result);\r\n  } catch (error) {\r\n    console.error('Upload Error:', error);\r\n  }\r\n};\r\n<\/pre>\n
Example 3: Sending an Array of Tags and Multiple Images<\/h3>\n
If you want to send an array of items using FormData in React Native (e.g., a list of tags, multiple images, etc.), you can do it by appending each item individually with indexed or bracketed keys, depending on what the backend expects.<\/p>\n
const uploadFormWithArray = async () => {\r\n  const formData = new FormData();\r\n\r\n  \/\/ Append a text field\r\n  formData.append('username', 'jaimin');\r\n\r\n  \/\/ Append an array of tags (as strings)\r\n  const tags = ['react', 'native', 'formdata'];\r\n  tags.forEach((tag, index) => {\r\n    formData.append(`tags[${index}]`, tag);\r\n  });\r\n\r\n  \/\/ Append an array of images\r\n  const images = [\r\n    {\r\n      uri: 'file:\/\/\/path\/to\/image1.jpg',\r\n      name: 'image1.jpg',\r\n      type: 'image\/jpeg',\r\n    },\r\n    {\r\n      uri: 'file:\/\/\/path\/to\/image2.jpg',\r\n      name: 'image2.jpg',\r\n      type: 'image\/jpeg',\r\n    },\r\n  ];\r\n  images.forEach((image, index) => {\r\n    formData.append(`photos[${index}]`, image);\r\n  });\r\n\r\n  try {\r\n    const response = await fetch('https:\/\/your-api-url.com\/upload', {\r\n      method: 'POST',\r\n      body: formData,\r\n      headers: {\r\n        \/\/ Content-Type should generally be left out for FormData\r\n        \/\/ 'Content-Type': 'multipart\/form-data',\r\n      },\r\n    });\r\n\r\n    const result = await response.json();\r\n    console.log('Upload successful:', result);\r\n  } catch (error) {\r\n    console.error('Upload error:', error);\r\n  }\r\n};\r\n<\/pre>\n
Notes:<\/h2>\n