Skip to content
This repository has been archived by the owner on Mar 16, 2019. It is now read-only.

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

Open
developercode1 opened this issue Jun 16, 2018 · 3 comments

Comments

@developercode1
Copy link

developercode1 commented Jun 16, 2018

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?

@JofBigHealth
Copy link

@developercode1 Android?

@developercode1
Copy link
Author

@JofBigHealth Yes. I experienced this on android. but I was able to solve this issue. Thanks !!

@JofBigHealth
Copy link

JofBigHealth commented Jan 30, 2019

@developercode1 What was the solution? We are having serious perf issues on various operations. I suspect it's because we are running operations on multiple files in "parallel" with Promise.all (.fetch, unlink, .exists, readFile and so on) and this blocks the main thread. This isn't a problem on iOS for us but a massive problem on Android so I'm curious to hear about your experience.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants