MostafaTaghipour / react-native-upload-manager

The React Native http file uploader with android and iOS background support.
MIT License
18 stars 2 forks source link

Cannot get this library to work #2

Open VanTigranyan opened 3 years ago

VanTigranyan commented 3 years ago

Hey Mostafa. Nice to meet you. I am trying to implement a background file upload and found your library. It seems to solve all my problems. But unfortunately I cannot make it work. Once I am adding a file into the queue or starting an upload, it gives me back the upload id, and that's it. Uploading doesn't work, I don't see the progress, nor I see an error or smth. Maybe I set it up the wrong way? 

Here is my code ->

import { useEffect } from 'react';
import UploadManager from 'react-native-upload-manager';
import { extenders, LOG } from '../configs/logger';

const uploadLogger = LOG.extend(extenders.upload_queue);

export const useAsyncUpload = () => {
  useEffect(() => {
    const progressSubscription = UploadManager.addListener('progress', ({ id, progress }) => {
      uploadLogger.warn(`Progress: ${progress}%`);
      console.info(`Progress: ${progress}%`);
    });
    const completeSubscription = UploadManager.addListener(
      'completed',
      ({ id, responseCode, responseBody }) => {
        // 1. Retrieve record from DB using the uploadId
        // 2. Update Analytics using the DB record
        uploadLogger.info('Completed!');
        console.info('Completed!');
      },
    );
    const errorSubscription = UploadManager.addListener('error', ({ id, error }) => {
      uploadLogger.error(`Error: ${error}%`);
      console.error(`Error: ${error}%`);
    });
    const cancelSubscription = UploadManager.addListener('cancelled', ({ id }) => {
      uploadLogger.warn('Cancelled!');
      console.warn('Cancelled!');
    });

    return () => {
      progressSubscription.remove();
      completeSubscription.remove();
      errorSubscription.remove();
      cancelSubscription.remove();
    };
  }, []);

  return async (analyticsId, fileData) => {
    const progressSubscription = UploadManager.addListener('progress', ({ id, progress }) => {
      uploadLogger.warn(`Progress: ${progress}%`);
      console.info(`Progress: ${progress}%`);
    });
    const errorSubscription = UploadManager.addListener('error', ({ id, error }) => {
      uploadLogger.error(`Error: ${error}%`);
      console.error(`Error: ${error}%`);
    });
    // 1. Add an upload into the queue
    const options = {
      url: fileData.signedPUTURL,
      path: fileData.file.uri,
      method: 'PUT',
      type: 'raw',
      maxRetries: 2, // set retry count (Android only)
      headers: {
        'content-type': 'application/octet-stream',
      },
    };
    const uploadId = await UploadManager.addToUploadQueue(options);
    console.log('upload Started', uploadId);
    // 2. Add a record to DB containing analyticsId and uploadId
    // Realm.create...
  };
};

Here is the function from another component that calls the uploading function ->

const queueFileUpload = useAsyncUpload();

const uploadMedia = async () => {
    if (!practice) {
      setShowIndicator(true);
      const analyticsId = await addAnalytics();
      const convertedFiles = await convertFiles();
      let fileHelper = new S3FileHelper(convertedFiles);
      console.log('files', fileHelper.getMediaFiles());
      if (fileHelper.getMediaFiles().length > 0) {
        console.log('uploading files');
        await signAndSendMedia(fileHelper, analyticsId);
      }
      setShowIndicator(false);
      // changeSlideAfterFRUpload();
    }
  };

  const signAndSendMedia = (fileHelper, analyticsId) => {
    return new Promise((resolve, reject) => {
      dispatch(
        getSignedUrlsAction.request({
          method: 'put',
          keys: fileHelper.reduceFilesToQueryString(),
          onFinish: async (res) => {
            console.log('Worksssss');
            try {
              fileHelper.addSignedURLs(res);
              const fileToUpload = fileHelper.getFiles()[0];
              await queueFileUpload(analyticsId, fileToUpload);
              resolve();
            } catch (e) {
              console.log('Failed to upload files! Please, try again later!');
              console.error(e);
              reject();
            }
          },
        }),
      );
    });
  };

And here is what I see in the console ->

As you see, no progress was logged.

I would appreciate any help. Thanks in advance.

VanTigranyan commented 3 years ago

ping @MostafaTaghipour

codepoetryindia commented 3 years ago

Can You please respond @MostafaTaghipour

FeoSilva commented 2 years ago

@VanTigranyan @codepoetryindia how did you proceed?