react-nativeaxiosexpoexpo-file-system

How to show upload progress using Expo FileSystem.uploadAsync


I have a piece of code as below which uploads a simple file as binary utilizing expo-file-system and everything works fine.

import * as FileSystem from 'expo-file-system';

const res = await FileSystem.uploadAsync(uploadUrl, uri, {
  fieldName: 'file',
  httpMethod: 'PUT',
  uploadType: FileSystem.FileSystemUploadType.BINARY_CONTENT,
  headers: headers,
});

How to show the upload progress just like a simple axios upload progress? In case the feature is not implemented how can I still upload a file as binary using axios to show the progress


Solution

  • This should solve your problem :)

    const uploadTask = FileSystem.createUploadTask(crData.putUrl, media.path, {
        fieldName: 'file',
        httpMethod: 'PUT',
        uploadType: FileSystem.FileSystemUploadType.BINARY_CONTENT,
        headers: {
            'Content-Type': 'image/jpeg'
        }
    }, ({ totalBytesSent, totalBytesExpectedToSend }) => {
        const progress = parseFloat((totalBytesSent / (totalBytesExpectedToSend || 1)).toFixed(2));
        setUploadProgress(progress);
    });
    
    const result = await uploadTask.uploadAsync();