How can I upload a file in react-native using rn-fetch-blob?

react-native file-upload fetch

10,082

You can change the upload as follows:

Content-Type should be json because your body type is json

 let formdata = new FormData();
     formdata.append("comment", this.state.newComment);
     formdata.append("comment_file", file);
RNFetchBlob.fetch('POST', 'https://beta.hellonepal.io/api/v1/comments', {
    Authorization : 'Bearer '+ global.apiToken,
    body: formdata,
    'Content-Type' : "multipart/form-data",
  })
  .then((response) => response.json())
  .then((RetrivedData) => {
      console.log(RetrivedData);
  })
  .catch((err) => {
    console.log('Error in adding a comment');
  })

10,082

Kamalesh kunwar

Updated on June 04, 2022

Comments

Kamalesh kunwar about 2 years

I am new to react-native. I wanted to upload a file with another parameter 'comment' using rn-fetch-blob. I am able to pick a file and got path, name, type and size of file using react-native-document-picker package. The log for the details of file is:

console.log(res.uri, res.type, res.name, res.size);
Output:
'content://com.android.providers.downloads.documents/document/1445', 'text/html', 'hello.webp', 21476

I simply used fetch function with method 'POST' , not sure on this.

var file = {
        name: this.type,
        filename : this.name, 
        data: RNFetchBlob.wrap(this.uri)
    };

Log of var file:

{ name: 'text/html',
│ filename: 'hello.webp',
└ data: 'RNFetchBlob-content://content://com.android.providers.downloads.documents/document/1445' }

method:

fetch('https://beta.hellonepal.io/api/v1/comments',
          {
            method: 'POST',
            headers:
            {
              'Accept': 'application/json',
              'Content-Type' : 'multipart/form-data',
              'Authorization': 'Bearer '+ global.apiToken,
            },
            body: JSON.stringify(
            {
              comment: this.state.newComment,
              comment_file : file
            })

          })
          .then(response => {
            return response.json()
          })
          .then(RetrivedData => {
            console.log(RetrivedData);

          })
          .catch(err => {
            // Do something for an error here
            console.log('Error in adding a comment');
          });
        });

I tried using RNFetchBlob method but no idea how can I pass others parameters:

const url = "https://beta.hellonepal.io/api/v1/comments";

RNFetchBlob
.config({
    trusty : true
})
.fetch(
    'POST', 
    url, {
        'Content-Type' : 'multipart/form-data',
    }, file)
.then((res) => {
   console.log(res);
   callback(res);
})
.catch((errorMessage, statusCode) => {
    console.log("Error: "+ errorMessage + " - " + statusCode);
})

Horst almost 5 years

pass it as an array: github.com/joltup/…
Kamalesh kunwar almost 5 years

@Horst I tried with a array, only comment is published without the file. How can a file be uploaded? Help me with this. Thanks.

Kamalesh kunwar almost 5 years

I tried this but can't upload the file. Both comment and file are empty uploaded without catching any error.
hong developer almost 5 years

oh sorry i'm misstake, Content-Type should be json because your body type is json.
hong developer almost 5 years

I modified my answer.
Kamalesh kunwar almost 5 years

I changed 'Content-Type' to json but no any progess. Both comment as well as file is empty. Is only a file Uri is enough to upload ? How the 'var file' can be considered as actual file ? Help me with this. Thanks.
hong developer almost 5 years

Sending a body in form data can be helpful. updated my answer
Kamalesh kunwar almost 5 years

Now, after the update I got the error "Error: RNFetchBlob request error: Value for body cannot be cast from ReadableNativeMap to Stringnull".
Kamalesh kunwar almost 5 years

Let us continue this discussion in chat.
hong developer almost 5 years

@Kamaleshkunwar I heard the data is empty, so how do you use form data? Show me the code.
Kamalesh kunwar almost 5 years

Please check the message in the discussion as code is too long to be in comment.
Kamalesh kunwar almost 5 years

chat.stackoverflow.com/rooms/196962/…
Kamalesh kunwar almost 5 years

I finally solved the issue with a silly mistake, i must have passed file with a parameter "comment_file[0]" as it supposed to support multiple files but I passed only "comment_file". Thanks everyone for your time.
hong developer almost 5 years

I could not foresee such a problem because I wrote the data by referring to your fetch statement. I'm glad it's settled.
hong developer almost 5 years

Could you choose my answer if the problem helped me to solve it?