Skip to content

Cannot get this library to work #2

@VanTigranyan

Description

@VanTigranyan

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions