Axios: Axios no envía datos de formulario en react-native

@corujoraphael Por curiosidad, ¿esta solicitud estaba funcionando antes?

@corujoraphael No estoy seguro de que su código se ejecute como está. La configuración donde especificas tus encabezados debe ser un objeto, pero le falta una llave:

(newData) => {
  const data = new FormData();
  data.append('name', 'raphael');
  data.append('file', {
    uri: newData.image.path,
    type: 'image/jpeg',
    name: 'teste'
  });

  return axios.post(
    `${constants.development.URL_API}/file`,
    data, 
    { 
      headers: {
        'Content-Type': 'multipart/form-data',
      }
    },
  )
}

Dado que este problema no ha recibido una respuesta y no parece un error de Axios según la información que tenemos, voy a cerrar este problema.

Si necesita más ayuda para depurar su código, publique en Stack Overflow , Gitter o comente nuevamente sobre este problema.

¡Gracias!

@emilyemorehouse , encontré el mismo problema usando React Native FormData

let s = JSON.stringify({ uri: localUri, name: filename, type: type });
let formData = new FormData();
formData.append('ph0t0', s);

axios.post("http://10.0.1.2:8888/uploadphoto", {
        method: "POST",
        headers: {
                'Content-Type': 'multipart/form-data; charset=utf-8; boundary="another cool boundary";'
        },
        body: formData,
}).then((resp) => {
        console.log(resp);
}).catch(err => {
        console.log(err);
});

Espere alguna clave: existen pares de

2018/02/20 18: 25: 31.740 [W] [photo.go: 411] req.MultipartForm: nil
2018/02/20 18: 25: 31.740 [W] [photo.go: 412] req.Form: mapa []
2018/02/20 18: 25: 31.740 [W] [photo.go: 413] req.
2018/02/20 18: 25: 31.740 [W] [photo.go: 410] req: & {POST / uploadphoto / dialog / 57120e8951c643ab42a8c19f / 000000000000000000000001 HTTP / 1.1 1 1 mapa [Content-Type: [application / json; charset = utf-8] Usuario-Agente: [okhttp / 3.6.0] Aceptar: [application / json, text / plain, / ] Contenido-Longitud: [419] Conexión: [Keep-Alive] Aceptar-Codificación: [gzip] Cookie: [lang = zh-TW; PVsessionID = db9a21d63b2d0ea47b68fa8755bd87e2]] 0xc420e3cb80419 [] falso 10.0.1.2:8888 mapa [] mapa []map [] 10.0.1.3:46904 / uploadphoto / dialog / 57120e8951c643ab42a8c19f / 0000000000000000000000010xc420e3cb40}
2018/02/20 18: 25: 31.740 [E] [photo.go: 425] [UploadPhotos] err: request Content-Type no es multipart / form-data

Información de la versión
axios: 0.16.2
expo: 25.0.0
reaccionar: 16.2.0
react-native: 0.52.0

Este error todavía ocurre con los últimos axios, ¿por qué se cerró?

Si alguien puede proporcionar un ejemplo reproducible, me complace abrir esta copia de seguridad.

@ Ernie6711 parece que tiene un error en su código; no creo que deba especificar los datos del archivo antes de agregarlos a los datos de su formulario. Además, los argumentos para axios.post son axios.post(url[, data[, config]])

Aquí tienes un ejemplo basado en tu código:

const file ={ uri: localUri, name: filename, type: type};
const formData = new FormData();
formData.append('file', s);

const config = {
        headers: {
                'Content-Type': 'multipart/form-data; charset=utf-8; boundary="another cool boundary";'
        }
};

axios.post("http://10.0.1.2:8888/uploadphoto", formData, config).then((resp) => {
        console.log(resp);
}).catch(err => {
        console.log(err);
});

@emilyemorehouse, por favor revise los rastros de

POST /myserver HTTP/1.1
Content-Type: multipart/form-data

_parts=USERX%2Cusername&_parts=FILE1%2C%5Bobject%20Object%5D

Tengo un ejemplo de cliente y servidor local para la carga de archivos, aunque fuera del entorno React Native, que funciona y está codificado correctamente. El ejemplo anterior no es realmente reproducible, ya que se basa en variables y un servidor al que no tengo acceso.

Supongo que si hay algo incorrecto con la carga, es porque los datos adjuntos al objeto de datos del formulario no son válidos.

@emilyemorehouse Las cargas de archivos funcionan perfectamente en un entorno de navegador, solo fallan en la reacción nativa. Como mencionaste a ti mismo, tus pruebas estaban fuera del entorno nativo de reacción, comenzaría allí :)

Intente cargar un archivo simple en react native y simplemente verifique los rastros de wirehark, ni siquiera necesita un servidor que funcione ...

Tengo lo mismo, Axios no reacciona nativo.

@duongtranpyco He eliminado axios de mi proyecto, escribí mi propia clase simple en su lugar, ¡disfrútalo!

PD Si envía principalmente JSON, modifique el código. En mi caso, el servidor suele esperar un formulario.

const request = async ({url, method = 'GET', params, body, responseType = 'json', headers = {}})=>{
    const escape = (data, encode = encodeURIComponent)=>Object.keys(data||{}).reduce((pairs, key)=>{
        for (let value of [].concat(data[key]))
            pairs.push([`${key}`, `${value}`]);
        return pairs;
    }, []).map(pair=>pair.map(encode).join('=')).join('&');

    if (Object.keys(params||{}).length)
        url += '?'+escape(params);
    if (method=='POST' && typeof body=='object')
    {
        if (body instanceof FormData)
            headers['Content-Type'] = 'multipart/form-data';
        else
        {
            body = escape(body);
            headers['Content-Type'] = 'application/x-www-form-urlencoded';
        }
    }
    let {statusCode, request: req} = await new Promise((resolve, reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.withCredentials = true;
        xhr.responseType = {json: 'text'}[responseType]||responseType;
        xhr.onload = ()=>resolve({statusCode: xhr.status, request: xhr});
        xhr.onerror = ()=>reject(new TypeError('Network request failed'));
        xhr.ontimeout = ()=>reject(new TypeError('Network request timed out'));
        for (let key in headers)
            xhr.setRequestHeader(key, headers[key]);
        xhr.send(body||null);
    });
    if (statusCode<200 || statusCode>=400)
        throw new Error(`network request failed with ${statusCode}: ${url}`);
    switch(responseType)
    {
        case 'json':
            return JSON.parse(req.responseText);
        case 'text':
            return req.responseText;
        case 'request':
            return req;
    }
    return req.response;
};

request.get = (url, opt = {})=>request({...opt, url, body: null});
request.post = (url, ...args)=>request({...args[1]||{}, url, method: 'POST', body: args[0]});

Hola, estoy enfrentando el mismo problema. ¿Alguien ha encontrado una solución?

Segundo @giladno. Como voy a avanzar en otras partes, utilizo una solución alternativa: escriba una función específica con fetch () al cargar imágenes.

Intenté antes y ni la cadena de datos o argumentos afecta el resultado. El servidor recibió la llamada pero no se enviaron datos.

@ Ernie6711 aparentemente los encabezados están dañados y es por eso que el servidor no puede aceptar los datos del formulario. Implementé la solución con fetch () y funcionó sin problemas.

Tuve algún problema en react-native.
El problema no son los encabezados.
En web podemos tener por ejemplo:

let formData = new FormData()
formData.append('key', true // bool value)

pero en reaccionar nativo, el valor de la clave debe ser una cadena.

formData.append('key', 'true')

Tengo el mismo problema con react native cuando publico en una url, como menciona https://github.com/axios/axios/issues/1618 , pero nadie ha respondido, por favor describa en el archivo Léame de su biblioteca que no tiene soporte para axios en react native, por lo que muchos desarrolladores no pierden el tiempo ..!

Todos, agradezco la dirección, pero "simplemente probar la carga de un archivo en React Native" no es tan fácil. No suelo trabajar en React Native y tomaría una cantidad de tiempo decente para poner en marcha un proyecto con cargas de archivos para probar.

Tengo un POST simple con datos de formulario que funciona en React Native:

    const formData = new FormData();
    formData.append("data", true);

    const config = {
      headers: {
        "Content-Type": "multipart/form-data; charset=utf-8;"
      }
    };

    axios.post(URL, formData, config).then(
      response => {
        console.log({ response });
      },
      error => {
        console.log({ error });
      }
    );

true se encadena cuando se envía al servidor, lo cual es interesante.

Dicho esto, si alguien puede proporcionar un ejemplo que pueda hacer girar fácilmente, me complace investigarlo más.

@corujoraphael ¿cómo resolviste esto?

Agregué un tipo dentro del objeto de imagen como "Image.type='image/png" justo antes de agregar y también cambié el tipo de contenido a "Content-Type":"multipart/form-data" :

        image.type='image/png'
        formData.append("resource", image);
        return axios
          .post('yourBAckendUrl', formData, {
            headers: {
              Authorization: "yourTokenHere",
              "Content-Type": "multipart/form-data"
            }
          })

Espero que esto ayude a alguien.

No pude hacer que esto funcionara también, estoy tratando de PONER multipart / form-data en S3 (video). Usar la opción de tipo no ayudó. El encabezado multipart / form-data no parece estar en la solicitud PUT:

      const data = new FormData();
      data.append('video', {
          uri: 'file:///<path_to_video_on_iphone.mov',
          type: 'video/quicktime',
          name: 'video.mov',
      });
      response = yield call(() => {
        return api.put(url, data, {
          headers: {
              'Content-Type': 'multipart/form-data',
          },
          transformRequest: [
            (data, headers) => {
                delete headers.common.Authorization;
                return data;
            }
          ]
        });
      });

Para este caso, use fetch: D

var data = new FormData();  
data.append('my_photo', {  
  uri: filePath, // your file path string
  name: 'my_photo.jpg',
  type: 'image/jpg'
}

fetch(path, {  
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'multipart/form-data'
  },
  method: 'POST',
  body: data
});

en la versión axios 0.18.0 tiene el mismo problema.
axios elimina internamente el encabezado Content-Type si no hay cuerpo en el post, put etc por alguna razón al crear FormData el cuerpo permanece vacío.
este es mi código:

const sendFormData = images => {
   // images is an array of base64 images (strings)
    const formData = new FormData();
    images.forEach((img, i) => {
        formData.append('file', img);
        formData.append('name', `${type}-${i + 1}`);
    });

    config.headers = {
        .'Content-Type': 'multipart/form-data'
     };

     return axios.post(`http://someurl.com/api/upload-images`, formData, config)
            .then(response => {
               // handle success
            })
            .catch(err => {
                // handle err
     });
}

Reaccionar versión nativa 0.55.3
este código de ejemplo no funciona. el cuerpo de la solicitud está vacío y se elimina el encabezado Content-Type

tengo los mismos problemas y mi cuerpo cuando me registro en la depuración es una cadena

y aqui mi codigo

        const formData = new FormData();
        formData.append('photo', {
          uri: response.uri.replace('file://', ''),
          mineType: 'image/jpeg',
          fileType: 'image/jpg',
          type: 'image/jpg',
          name: 'test.jpg'
        });

        console.log('form data', formData);

         Axios({
           method: 'post',
           url: 'https://dev-host.luxstay.net/api/rooms/10740/photos',
           data: formData,
           headers: {
             Authorization: token,
             'Content-Type': 'multipart/form-data'
           }
         });

Actualización: se produjo un error porque la aplicación estaba en modo de depuración. Cuando apago el modo de depuración, funcionó

axios tiene un código en su adaptador xhr
if (utils.isFormData(requestData)) { delete requestHeaders['Content-Type']; // Let the browser set it }
Supongo que en react-native elimina el encabezado de tipo de contenido si está enviando datos de formularios de varias partes, incluso si lo establece en el código.
Pero no estoy seguro de si comentar la salida de línea resolvería su problema en react-native.

en la versión axios 0.18.0 tiene el mismo problema.
axios elimina internamente el encabezado Content-Type si no hay cuerpo en el post, put etc por alguna razón al crear FormData el cuerpo permanece vacío.
este es mi código:

const sendFormData = images => {
   // images is an array of base64 images (strings)
    const formData = new FormData();
    images.forEach((img, i) => {
        formData.append('file', img);
        formData.append('name', `${type}-${i + 1}`);
    });

    config.headers = {
        .'Content-Type': 'multipart/form-data'
     };

     return axios.post(`http://someurl.com/api/upload-images`, formData, config)
            .then(response => {
               // handle success
            })
            .catch(err => {
                // handle err
     });
}

Reaccionar versión nativa 0.55.3
este código de ejemplo no funciona. el cuerpo de la solicitud está vacío y se elimina el encabezado Content-Type

Entonces, ¿cómo debería verse? También tengo objeto objeto.

@tkserver es como cuando tienes un objeto y luego lo toString ().

const a = {
  name: 'dasdasd'
}
console.log(a.toString());

@tkserver es como cuando tienes un objeto y luego lo toString ().

const a = {
  name: 'dasdasd'
}
console.log(a.toString());

Quizás no estaba claro. ¿Debería la Request Payload mostrar [object Object] al ver los encabezados?

@tkserver si su depurador tiene habilitada la inspección de red, anulará el FormData de react-native y resultará en pasar un objeto FormData vacío que se verá como [Objeto de objeto] en la inspección de red.
Intente realizar una solicitud desactivando la inspección de red, espero que esto ayude.

Gracias Aman725, minhphung210 y todo. Cuando uso el código en un dispositivo real, la carga funciona correctamente. Parece que esto está relacionado con el simulador de iOS.

Tuve este problema, pero ahora está solucionado.

La razón fue que estaba depurando solicitudes de red. Tenía esta línea de código en el punto de entrada de mi aplicación:

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

Lo comenté y funciona ahora.

// IMPORTANT: this will cause FormData requests to fail.
// GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

Acabo de encontrar esto: https://stackoverflow.com/a/47630754/387912 , ¿ayuda?

XMLHttpRequest

¿Puede decirme cómo creó la solicitud para que se cargue correctamente como multipartita? Sigo recibiendo un error de red:

Error: Network Error
    at createError (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:168963:17)
    at XMLHttpRequest.handleError (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:168871:16)
    at XMLHttpRequest.dispatchEvent (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28708:27)
    at XMLHttpRequest.setReadyState (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28461:20)
    at XMLHttpRequest.__didCompleteResponse (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28288:16)
    at blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28398:47
    at RCTDeviceEventEmitter.emit (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:3291:37)
    at MessageQueue.__callFunction (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2588:44)
    at blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2345:17
    at MessageQueue.__guard (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2542:13)

ACTUALIZACIÓN: consigue que funcione ahora. Utilizando actualmente:

formData.append('picture', {
          uri: data.uri,
          name: fname,
          type: 'image/' + ext

        });

Si las personas siguen experimentando este problema y tiene
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
fragmento para depurar solicitudes de red, intente agregar
GLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData
funcionó para mí.

Agregué un tipo dentro del objeto de imagen como "Image.type='image/png" justo antes de agregar y también cambié el tipo de contenido a "Content-Type":"multipart/form-data" :

        image.type='image/png'
        formData.append("resource", image);
        return axios
          .post('yourBAckendUrl', formData, {
            headers: {
              Authorization: "yourTokenHere",
              "Content-Type": "multipart/form-data"
            }
          })

Espero que esto ayude a alguien.

¡Gracias por tu ayuda! Pude cargar mi imagen con iOS Simunator pero no con Android.

Después de establecer el tipo de imagen en 'image / jpeg', dejé de tener el error de red.

const formData = new FormData();
formData.append('file', {
  uri: pictureUri,
  type: 'image/jpeg',
  name: 'profile-picture'
})

Agregué un tipo dentro del objeto de imagen como "Image.type='image/png" justo antes de agregar y también cambié el tipo de contenido a "Content-Type":"multipart/form-data" :

        image.type='image/png'
        formData.append("resource", image);
        return axios
          .post('yourBAckendUrl', formData, {
            headers: {
              Authorization: "yourTokenHere",
              "Content-Type": "multipart/form-data"
            }
          })

Espero que esto ayude a alguien.

¡Gracias por tu ayuda! Pude cargar mi imagen con iOS Simunator pero no con Android.

Después de establecer el tipo de imagen en 'image / jpeg', dejé de tener el error de red.

const formData = new FormData();
formData.append('file', {
  uri: pictureUri,
  type: 'image/jpeg',
  name: 'profile-picture'
})

Para cualquiera que esto pueda ser de ayuda, si no sabe el tipo de contenido que se enviará, use el multipart/form-data . Parece obvio leer esto ahora, pero me tomó una buena hora hacer que los medios funcionaran.

    data.append("image", {
      name: "some_name", // also, won't work without this. A name is required
      height: image.height,
      width: image.width,
      type: "multipart/form-data", // <-- this part here
      uri:
        Platform.OS === "android" ? image.uri : image.uri.replace("file:/", "")
    });

Hola, estoy intentando subir el archivo Axios en Vue.Js. ¿Alguien puede revisar y explicar el problema?

En HTML
<input type="file" id="file" ref="file" multiple @change="assignFiles"/>

En Js

`assignFiles (e) {

      let uploadedFiles = this.$refs.file.files;
      for( var i = 0; i < uploadedFiles.length; i++ ) { 
        this.form.AttachmentDocs.push(uploadedFiles[i]);           
      }
      console.log(this.form.AttachmentDocs);
 },`

Entonces, mientras se activa la publicación, agrego datos de formulario.

`continueSave (e) {

      e.preventDefault();
      this.$v.$touch();
      if(this.$v.$invalid) {
        return;
      }
    this.showLoading(this.loaderId,true);
      this.postDatas.append('form',JSON.stringify(this.form));
      for( var i = 0; i < this.form.AttachmentDocs.length; i++ ){ 
        let attachment = this.form.AttachmentDocs[i];
        this.postDatas.append('files['+i+']',attachment,attachment.name);           
      }

} `

Entonces, en la publicación, verifiqué el encabezado de la ventana de la consola, allí se muestra

archivos [0]: (binario)
archivos [1]: (binario)
archivos [2]: (binario)
archivos [3]: (binario)

En el lado de mi servidor no puedo obtener los archivos.

Podría tener algo que ver con

this.postDatas.append('files['+i+']',attachment,attachment.name);  

Prueba files['+' + i + '+']

Tengo el mismo problema con fetch api. req.body estaba vacío en el nodo js. El uso de 'express-formidable' resolvió el problema. https://www.npmjs.com/package/express-formidable

Podría tener algo que ver con

this.postDatas.append('files['+i+']',attachment,attachment.name);  

Prueba files['+' + i + '+']

Sry + indica la concatenación, wat es el uso de la cadena '+'. El resultado serán archivos [+0+]

Tengo el mismo problema con fetch api. req.body estaba vacío en el nodo js. El uso de 'express-formidable' resolvió el problema. https://www.npmjs.com/package/express-formidable

¿Incluiste app.use(express.json({ extended: false })); ?

Podría tener algo que ver con

this.postDatas.append('files['+i+']',attachment,attachment.name);  

Prueba files['+' + i + '+']

Sry + indica la concatenación, wat es el uso de la cadena '+'. El resultado serán archivos [+0+]

Su código actual siempre resultará en files[+i+] en su bucle for. Nunca será files[+0+], files[+1+], files[+2+], etc .

Además, files[+0+] nunca existirá. No estoy seguro de lo que está tratando de hacer. ¿Necesitas files[0], files[1], files[2]... ? Si está tratando de construir un objeto, entonces puede tener files['+0+'] , pero, nuevamente, no estoy seguro de lo que está tratando de lograr.

Tengo el mismo problema con fetch api. req.body estaba vacío en el nodo js. El uso de 'express-formidable' resolvió el problema. https://www.npmjs.com/package/express-formidable

¿Incluiste app.use(express.json({ extended: false })); ?
No. Sin embargo, en formidable tengo un problema. La imagen cargada irá a los campos obligatorios. Nada en los archivos de solicitud. No estoy seguro de por qué ocurre esto.

@duongtranpyco He eliminado axios de mi proyecto, escribí mi propia clase simple en su lugar, ¡disfrútalo!

PD Si envía principalmente JSON, modifique el código. En mi caso, el servidor suele esperar un formulario.

const request = async ({url, method = 'GET', params, body, responseType = 'json', headers = {}})=>{
    const escape = (data, encode = encodeURIComponent)=>Object.keys(data||{}).reduce((pairs, key)=>{
        for (let value of [].concat(data[key]))
            pairs.push([`${key}`, `${value}`]);
        return pairs;
    }, []).map(pair=>pair.map(encode).join('=')).join('&');

    if (Object.keys(params||{}).length)
        url += '?'+escape(params);
    if (method=='POST' && typeof body=='object')
    {
        if (body instanceof FormData)
            headers['Content-Type'] = 'multipart/form-data';
        else
        {
            body = escape(body);
            headers['Content-Type'] = 'application/x-www-form-urlencoded';
        }
    }
    let {statusCode, request: req} = await new Promise((resolve, reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.withCredentials = true;
        xhr.responseType = {json: 'text'}[responseType]||responseType;
        xhr.onload = ()=>resolve({statusCode: xhr.status, request: xhr});
        xhr.onerror = ()=>reject(new TypeError('Network request failed'));
        xhr.ontimeout = ()=>reject(new TypeError('Network request timed out'));
        for (let key in headers)
            xhr.setRequestHeader(key, headers[key]);
        xhr.send(body||null);
    });
    if (statusCode<200 || statusCode>=400)
        throw new Error(`network request failed with ${statusCode}: ${url}`);
    switch(responseType)
    {
        case 'json':
            return JSON.parse(req.responseText);
        case 'text':
            return req.responseText;
        case 'request':
            return req;
    }
    return req.response;
};

request.get = (url, opt = {})=>request({...opt, url, body: null});
request.post = (url, ...args)=>request({...args[1]||{}, url, method: 'POST', body: args[0]});

Estoy usando este código en mi proyecto. Estoy tratando de entender este código. Una pregunta, ¿es necesaria esta línea?
para (deje el valor de [] .concat (datos [clave]))? Se puede escribir simplemente,
pares.push ([ ${key} , ${data[key]} ]);

Si las personas siguen experimentando este problema y tiene
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
fragmento para depurar solicitudes de red, intente agregar
GLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData
funcionó para mí.

¿Donde es?

Yo también tuve el problema. Es causado por la ruta del archivo en Android.
ruta constante = utils.isAndroid ()?
Y funciona bien con la implementación de la siguiente manera

    const formData = new FormData();
    const path = utils.isAndroid() ? `file://${filePath}` : filePath;
    formData.append('Voice', {
      uri: path,
      name: 'test',
      type: 'audio/wav',
    });

    formData.append('Content-Type', 'audio/wav');
     const headers =  {
        'Content-Type': 'multipart/form-data',
      };
    return this._sendRequest(url, 'POST', formData, headers);

 data.append('file', {
    uri: newData.image.path,
    type: 'image/jpeg',
    name: 'teste'

Use un nombre como: name:'teste.jpeg' y funcionará. debe dar formato al archivo, de lo contrario no funcionará.
Lo arreglé teniendo el nombre: 'ejemplo.jpeg'

Después de varios días intentando subir videos con axios, me rindo. RNFetchBlob es una mejor opción para cargar archivos especialmente desde Android. Esta sección es fácil de implementar

rn-fetch-blob