ImageUploader.jsx

import React from 'react';
import RNFetchBlob from 'react-native-fetch-blob';

import { EmptyC, Lifecycle } from '@ubutler/utils/MetaComponents';
import { RemoteMethod } from '../../MeteorComponents';

const chatapp_get_jpeg_upload_method = {
  remote: (meteor, token) => {
    return meteor.method({
      name: 'chatapp_get_jpeg_upload',
      args: [token],
      idempodent: true,
    });
  },
};

const ImageUploader = ({ messages, dispatch, token }) => {
  const first_pending_image = messages.findLast(x => {
    return x.content.type === 'pending_image';
  });

  if (!first_pending_image) {
    return <EmptyC />;
  }

  const assetToUpload = first_pending_image.content.uri;

  return (
    <RemoteMethod method={chatapp_get_jpeg_upload_method}>
      {chatapp_get_jpeg_upload => (
        <Lifecycle
          key={first_pending_image.id}
          componentDidMount={async () => {
            const uri = assetToUpload;

            const signature = await chatapp_get_jpeg_upload();
            const req = RNFetchBlob.fetch(
              'PUT',
              `${signature.url}?${signature.signed_query}`,
              { 'Content-Type': 'application/octet-stream' },
              RNFetchBlob.wrap(uri),
            );

            // req.uploadProgress((finished, total) => {
            //   set_progress(finished / total);
            // });

            const res = await req;
            const data = await res.text();

            if (data === '' && res.respInfo.status === 200) {
              dispatch({
                type: 'resolve_image',
                id: first_pending_image.id,
                url: signature.url,
              });
            } else {
              // TODO Do something here with reject_image or retries
              // props.navigator.pop();
              console.warn('data:', data);
            }
          }}
        />
      )}
    </RemoteMethod>
  );
};

export default ImageUploader;