Image Uploads totally inconsistent

[capacitivellc]

Describe the bug
When any user trues to send an image in chat, the spinner spins, then stops without completing the upload.

Seems to happen with anything over just a few kb in size.

Dev environment info (please complete/provide the following information):

• Package version (stream-chat-react-native/stream-chat-expo)
  stream-chat-react-native 0.9.2

• react-native or expo version
  react-native 0.61.5

• Device/Emulator (android/ios) and OS version
  both/all

To Reproduce
Steps to reproduce the behavior:

1. Go to any chat
2. Click on the +
3. Select a photo
4. See error

Expected behavior
Images up to 20 mb load quickly without issue.

Additional context
Add any other context about the problem here.

Screenshots
If applicable, add screenshots to help explain your problem.

[vishalnarkhede]

Hey @capacitivellc we did some fixes around photo/file uploads on backend yesterday. So can you please check again if you are facing the issue?

[andrew-schenk]

Still seeing upload times bloated by 1000% from expectations.

For reference: 0.9.2 of stream-chat-react-native. Approximately 50 seconds to upload an image.
https://youtu.be/hIKeAUqc2-c

Release build
iPhone Xs
iOS 13.3.1

RN 61.5

After updating to
stream-chat-react-native 0.10.1

https://youtu.be/FYTsQWfOi2o

It is about 20 seconds to upload. 👍 A hefty improvement, but still not a first class experience.

Phone is on a wifi network with a 5 mbps upload speed. Image file size of about 6 Mb. That should be about 10 seconds assuming the original file is being uploaded and it isn't being downsized on the client first before being sent over the network.

If file is compressed, then that would be a 1.2Mb file, which would take just under 2 seconds. Much, much more reasonable.

tldr; still think it can be 10x faster.

[vishalnarkhede]

@andrewschenk-linx I am looking into switching to react-native-image-crop-picker, which offers option of image compression OOTB.

[vishalnarkhede]

@andrewschenk-linx @capacitivellc So I did some testing with react-native-image-crop-picker. It works really well. Adding it to our library OOTB and testing everything along with docs may take some time. But you don't need to wait for it.

1. Install react-native-image-crop-picker in your project. Please pay attention to the version that you are installing. If you are using RN 0.61+, then may use latest version of image-crop picker, otherwise use 0.25.3 - reference

yarn add react-native-image-crop-picker

2. Follow the steps mentioned here along with post installation steps - https://github.com/ivpusic/react-native-image-crop-picker#react-native--060-with-cocoapods

3. In your app, on chat screen - register the pickImage handler as follow:

import ImagePicker from 'react-native-image-crop-picker';
import {registerNativeHandlers} from 'stream-chat-react-native-core';

registerNativeHandlers({
  pickImage: () =>
    new Promise((resolve, reject) => {
      ImagePicker.openPicker({
       // Add your compression related config here.
        height: 400,
        width: 400,
        cropping: false,
      }).then(
        image => {
          resolve({
            cancelled: false,
            uri: `${image.path}`,
          });
        },
        () => {
          resolve({
            cancelled: true,
          });
        },
      );
    }),
});

You can provide your compression config to ImagePicker.openPicker({ ... }) function. This library provides plenty of options for cropping or compression - https://github.com/ivpusic/react-native-image-crop-picker#request-object

Hope this helps :)

[andrew-schenk]

Have it down to about 5 or 6 seconds now by compressing images to a max width/height of 1500 pixels. No noticeable decline in quality for a big performance boost.

For anyone else that follows along this issue. I did have to implement my own Alert to allow picking from camera as the above code will only show photo library.