업로드 (base64 string, from storage)

[1] 드롭박스 업로드 예시

RNFetchBlob.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
    Authorization : "Bearer access-token...",
    'Dropbox-API-Arg': JSON.stringify({
      path : '/img-from-react-native.png',
      mode : 'add',
      autorename : true,
      mute : false
    }),
    'Content-Type' : 'application/octet-stream',
    // here's the body you're going to send, should be a BASE64 encoded string
    // (you can use "base64"(refer to the library 'mathiasbynens/base64') APIs to make one).
    // The data will be converted to "byte array"(say, blob) before request sent.
  }, base64ImageString)
  .then((res) => {
    console.log(res.text())
  })
  .catch((err) => {
    // error handling ..
  })

[2] 스토리지의 파일 첨부

RNFetchBlob.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
    // dropbox upload headers
    Authorization : "Bearer access-token...",
    'Dropbox-API-Arg': JSON.stringify({
      path : '/img-from-react-native.png',
      mode : 'add',
      autorename : true,
      mute : false
    }),
    'Content-Type' : 'application/octet-stream',
    // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://`.
    // Or simply wrap the file path with RNFetchBlob.wrap().
  }, RNFetchBlob.wrap(
      Platform.OS === 'ios'
        ? `${result.uri.replace('file:', '')}`
        : result.uri,
    ),
  )
  .then((res) => {
    console.log(res.text())
  })
  .catch((err) => {
    // error handling ..
  })

[3] multipart/form-data 업로드 (여러파일 업로드)

RNFetchBlob.fetch('POST', 'http://www.example.com/upload-form', {
    Authorization : "Bearer access-token",
    otherHeader : "foo",
    'Content-Type' : 'multipart/form-data',
  }, [
    // element with property `filename` will be transformed into `file` in form data
    { name : 'avatar', filename : 'avatar.png', data: binaryDataInBase64},
    // custom content type
    { name : 'avatar-png', filename : 'avatar-png.png', type:'image/png', data: binaryDataInBase64},
    // part file from storage
    { name : 'avatar-foo', filename : 'avatar-foo.png', type:'image/foo', data: RNFetchBlob.wrap(path_to_a_file)},
    // elements without property `filename` will be sent as plain text
    { name : 'name', data : 'user'},
    { name : 'info', data : JSON.stringify({
      mail : 'example@example.com',
      tel : '12345678'
    })},
  ]).then((resp) => {
    // ...
  }).catch((err) => {
    // ...
  })

트러블슈팅

• data필드에 파일의 경로로 채워넣는 경우

[Error: RNFetchBlob.fetchBlobForm failed to create request body]

• data 필드 올바른 설정 방법 : https://stackoverflow.com/questions/60186820/rn-fetch-blob-error-rnfetchblob-fetchblobform-failed-to-create-request-body

const realPath = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;

const data = [
  {
     name: 'file',
     filename,
     type,
     data: RNFetchBlob.wrap(decodeURIComponent(realPath)),
  },
  {name: 'bla', data: 'bla'}
]

[4] Progress (upload / download)

• https://github.com/wkh237/react-native-fetch-blob#uploaddownload-progress

• count (퍼센트 단위로 리스폰스 받기)

• interval ( 특정 ms마다 리스폰스 받기)