How to show upload progress using Expo FileSystem.uploadAsync

Question

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

Answer 1

Looking over the documentation for Expo FileSystem's uploadAsync, there does not appear to be a way to get upload progress. You likely would need to choose another mechanism to upload ; use the FileSystem to injest the file's contents, then use another URL mechanism (e.g. onUploadProgress in axios's Request Config) to upload the contents.

Answer 2

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();