How to use FormData in react-native

Question

Hi just learn to use js and react-native  I cant use FormData it always shows unsupported bodyinit type  I want to send text rather then JSON stringify  Can anyone help me  Thanks   var data   new FormData   data append  haha    input    fetch  http   www mywebsite com search php        method   post     body  data     then  response    gt  response json     then  responseData    gt      console log  Fetch Success                        console log responseData      var tempMarker         for  var p in responseData       tempMarker push       latitude  responseData p   lat        longitude  responseData p   lng                 this setState       marker  tempMarker            catch  error    gt      console warn error       done

User · Answer

Here is my simple code FormData with react-native to post request with string and image.

I have used react-native-image-picker to capture/select photo react-native-image-picker

let photo = { uri: source.uri}
let formdata = new FormData();

formdata.append("product[name]", 'test')
formdata.append("product[price]", 10)
formdata.append("product[category_ids][]", 2)
formdata.append("product[description]", '12dsadadsa')
formdata.append("product[images_attributes[0][file]]", {uri: photo.uri, name: 'image.jpg', type: 'image/jpeg'})

NOTE you can change image/jpeg to other content type. You can get content type from image picker response.

fetch('http://192.168.1.101:3000/products',{
  method: 'post',
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  body: formdata
  }).then(response => {
    console.log("image uploaded")
  }).catch(err => {
    console.log(err)
  })  
});

User · Answer

You can use react-native-image-picker and axios  form-data  uploadS3    path    gt        var data   new FormData         data append  files             uri  path  name   image jpg   type   image jpeg                var config             method   post           url  YOUR URL          headers                Accept   quot application json quot                quot Content-Type quot    quot multipart form-data quot                      data  data              axios config           then  response    gt                console log JSON stringify response data                        catch  error    gt                console log error                  react-native-image-picker selectPhotoTapped         const options             quality  1 0          maxWidth  500          maxHeight  500          storageOptions                skipBackup  true                         ImagePicker showImagePicker options  response   gt              console log  Response      response            if  response didCancel                  console log  User cancelled photo picker              else if  response error                  console log  ImagePicker Error     response error             else if  response customButton                  console log  User tapped custom button     response customButton             else               let source     uri  response uri                                 Call Upload Function             this uploadS3 source uri                  You can also display the image using data                 let source     uri   data image jpeg base64     response data                this setState                   avatarSource  source                                 this imageUpload source

User · Answer

Providing some other solution  we re also using react-native-image-picker  and the server side is using koa-multer  this set-up is working good   ui  ImagePicker showImagePicker options   response    gt          if  response didCancel           else if  response error           else if  response customButton           else           this props addPhoto      leads to handleAddPhoto             fileName  response fileName            path  response path            type  response type            uri  response uri            width  response width            height  response height                               handleAddPhoto    photo    gt       photo is the above object     uploadImage      these 3 properties are required       uri  photo uri        type  photo type        name  photo fileName         then  data    gt                               client  export function uploadImage file       so uri  type  name are required properties   const formData   new FormData      formData append  image   file      return fetch    imagePathPrefix  upload        give something like https   xx yy zz upload whatever     method   POST       body  formData          then      response   gt  response json       then data   gt         uri  data uri      filename  data filename           catch      error   gt  console log  uploadImage error    error           server  import multer from  koa-multer   import RouterBase from     core router-base    const upload   multer   dest   runtime upload        export default class FileUploadRouter extends RouterBase     setupRoutes   router          router post   upload   upload single  image    async  ctx  next    gt          const file   ctx req file        if  file    null            ctx body               uri  file filename            filename  file originalname                     else           ctx body               uri                filename

User · Answer

This worked for me  var serializeJSON   function data      return Object keys data  map function  keyName        return encodeURIComponent keyName          encodeURIComponent data keyName        join   amp        var response   fetch url      method   POST     body  serializeJSON       haha   input

User · Answer

I have used form data with ImagePicker plugin  and I got it working please check below code  ImagePicker showImagePicker options   response    gt      console log  Response      response     if  response didCancel        console log  User cancelled photo picker          else if  response error        console log  ImagePicker Error     response error         else if  response customButton        console log  User tapped custom button     response customButton         else       fetch globalConfigs api url   gallery upload mobile          method   post         headers           Accept    application json          Content-Type    application json                     body  JSON stringify         data  response data toString          fileName  response fileName                 then response   gt            console log  image uploaded            catch err   gt            console log err

User · Answer

Usage of formdata in react-native  I have used react-native-image-picker to select photo  In my case after choosing the photp from mobile  I m storing it s info in component state  After  I m sending  POST request using fetch like below  const profile pic       name  this state formData profile pic fileName    type  this state formData profile pic type    path  this state formData profile pic path    uri  this state formData profile pic uri    const formData   new FormData   formData append  first name   this state formData first name   formData append  last name   this state formData last name   formData append  profile pic   profile pic   const Token    secret   fetch  http   10 0 2 2 8000 api profile          method   POST       headers          Accept   application json          Content-Type    multipart form-data         Authorization   Token   Token              body  formData         then response   gt  console log response json

User · Answer

If you want to set custom content-type for formData item   var img         uri    file   opa jpeg       name   opa jpeg       type   image jpeg     var personInfo         name    David       age  16     var fdata   new FormData    fdata append  personInfo          string   JSON stringify personInfo     This is how it works        type   application json       fdata append  image         uri  img uri      name  img name      type  img type

User · Answer

I was looking for a long time an answer that solve the problem and this is the way I did it I take the file with expo-document-picker const pickDocument   async  tDocument    gt        let result   await DocumentPicker getDocumentAsync        result type   mimetype result name       if  result type     undefined         alert  quot not allowed extention quot          return null            let formDat   new FormData        formDat append  quot file quot   result       uploadDoc formDat           const mimetype    name    gt        let allow      quot png quot   quot image png quot   quot pdf quot   quot application json quot   quot jpeg quot   quot image jpeg quot    quot jpg quot   quot image jpg quot        let extention   name split  quot   quot   1       if  allow extention      undefined         return allow extention            else         return undefined            const uploadDoc    data    gt         fetch  quot MyApi quot           method   quot POST quot         body  data        then res   gt  res json         then response   gt         if  response result     1              somecode         else             somecode                      this is because android doesn t manage the mime-type of your file so if you put away the header  quot Content-type quot  and instead you put the mime-type on the file it gonna send the correct header works on IOS an Android

[javascript] How to use FormData in react-native?

Examples related to javascript

Examples related to react-native

Examples related to fetch-api