Come caricare file in React Native utilizzando RNFetchBlob

Vediamo quanto è facile gestire le richieste multiparte utilizzando RNFetchBlob.

RNFetchBlob è una libreria il cui scopo è semplificare la nostra vita come sviluppatori React Native quando si tratta di trasferire dati binari.

Per installarlo, esegui

npm install --save rn-fetch-blob

yarn add rn-fetch-blob

Quindi vai alla tua iosdirectory ed esegui pod install.

In questo articolo esamineremo il caricamento dei file. Nessun problema, ce ne sarà uno diverso che esaminerà il download dei file sul dispositivo.

L' recordoggetto contiene le informazioni di base sul file che deve essere caricato:

export interface MedicalRecord {
  description: string;
  file: File;
}
export interface PatientFile {
  name: string;
  url: string; // the path to the local file
  size: number;
}

Analizziamo lo snippet:

Il tuo backend richiederà probabilmente una qualche forma di autorizzazione. Lo fornirai tramite il parametro headers. Nello snippet di cui sopra, defaultHeaderscostruisce una mappa che conterrà, ad esempio, il Authorizationcampo (Bearer…). È anche molto importante segnalare al tuo backend che questa richiesta è multipart. Questo è lo scopo della riga 8:

headers[‘Content-Type’] = ‘multipart/form-data’;

decodeURIComponent(record.file.url.replace('file://', ''))

• il primo fornirà il file stesso:

{
  name: "files.file",
  filename: record.file.name,
  data: RNFetchBlob.wrap(realPath),
},

• il secondo oggetto conterrà i dati aggiuntivi che si desidera inviare insieme al file.

{
  name: "data",
  data: JSON.stringify({
    date: date,
    description: description,
  }),
},

Conclusione: ringraziamo i creatori di questa libreria. Ci hanno tolto un fardello dalle spalle e hanno creato una potente libreria che ci fa risparmiare moltissime ore di lavoro.

Resta sintonizzato per quello che ti ho promesso: come scegliere i file su React Native e come usare RNFetchBlob per scaricare i file.