RNFetchBlob.fs.readFile method making the ui unresponsive for 2-3 seconds

[developercode1]

I am trying to upload a image to an Amazon S3 Bucket. So I first use the react native fetch blob to read file from the react native camera cache using RNFetchBlob.fs.readFile method and then upload it to the S3 bucket. But the readFile method is taking too much time making the ui unresponsive for quite a few seconds. I also tried readStream method which didn't solve the problem either.

Below is the function trying to upload image

export async function readFile(filePath) {
   const data = await RNFetchBlob.fs.readFile(filePath, 'base64');
   return new Buffer(data, 'base64');
}

export const deleteFile = async (filePath) => {
     try {
	const exist = await RNFetchBlob.fs.exists(filePath)
	if (exist) {
	   await RNFetchBlob.fs.unlink(filePath)
	}
     } catch(err) {
          console.log("Error", err)
     }
}
async function uploadImage() {
  try {
     const buffer = await readFile(fileUri);
     const response = await Storage.put(key, buffer, { "contentType": "image/jpeg", "metaData": metaData 
  });
      if (response) {
	  store.dispatch(removeFromOfflineQueue(key));
 	  store.dispatch(uploadImageStatus(key, true));
	  await resizeImage(key, cleanUri, true);
      }
   } catch(err) {
          console.log("::UPLOAD ERR", err);
          store.dispatch(addToOfflineQueue(key, body, metaData)
      }
   }
}

So is there any way by which we can either reduce the lag time or run it in background so that it doesn't affects the UI?

[Traviskn]

readFile is an asynchronous function that shouldn't be able to block the UI. However, reading a large file into memory as a bas64 encoded string could definitely be slowing things down and locking up your UI thread. Typically I try to avoid reading files into memory. You can avoid reading files into memory as a base64 encoded string by instead using RNFetchBlob.wrap(path_to_file), and then using RNFetchBlob.put to upload like this:

RNFetchBlob.fetch('PUT', 'http://url-to-s3', { 'Your-Headers': 'For AWS' }, RNFetchBlob.wrap(filePath));

See the wiki for a few examples: https://github.com/joltup/rn-fetch-blob/wiki/Fetch-API#fetchmethod-url-headers-bodystatefulpromise

I'm not sure what the Storage.put is requiring, but RNFetchBlob.fetch would serve as a replacement for the Storage class/library you are using in this case.

[developercode1]

@Traviskn Hey Thanks for getting back to me. I tried the above the RNFetchBlob.fetch method and it indeed solve the unresponsiveness issue and reduced the lag times.

const response = await RNFetchBlob.fetch('PUT', url, 
	{ 'ContentType': 'image/jpg' },
	RNFetchBlob.wrap(filePath)
)

But with above code snippet I can't send the metaData with image being uploaded to s3 Bucket. I tried using this but it didn't worked. The image is getting uploaded but I am not able to view the image as it says image is corrupted.

const response = await RNFetchBlob.fetch('PUT', url, 
	{ 'ContentType': 'multipart/form-data' },
	[
		{ name: 'competitorNumber', data: metaData.competitorNumber},
		{ name: 'firingOrder', data: metaData.firingOrder},
		{ name: 'firingPoint', data: metaData.firingPoint},
		{ name: 'range', data: metaData.range },
		{ name: 'reentryTag', data: metaData.reentryTag },
		{ name: 'relay', data: metaData.relay },
		{ name: 'series', data: metaData.series },
		{ name: 'stage', data: metaData.stage },
		{ name: 'targetScheme', data: metaData.targetScheme },
		{ name: 'timestamp', data: metaData.timestamp },
		{ name: 'file', filename: 'target.jpg', data: RNFetchBlob.wrap(filepath)}					
	] 
);

Also Sometimes I tend to receive this error which is already reported as an issue in the previous repository of RNFetchBlob wkh237#150

[eyalabadi98]

Hey @developercode1

Would you be able to show how you did it? What did you use as the 'url'? and how did you end up doing metadata?