Vydia / react-native-background-upload

Upload files in your React Native app even while it's backgrounded. Supports Android and iOS, including camera roll assets.
MIT License
721 stars 325 forks source link

upload restart when finished #278

Open xavax31 opened 2 years ago

xavax31 commented 2 years ago

Hi,

On android, "react-native": "0.64.2" , "react-native-background-upload": "^6.4.0" (i didn't try on ios):

When the upload progress is at 100%, it restart at 0 rather than trigger complete event. I try on both servers and config (one with symfony, the other just a minimal php file). This occurs with file size of about 6M or more, or with multiples uploads launched (some uploads restart). here's my reactnative code:

    const options: MultipartUploadOptions = {
      url: path_to_upload,
      path: uri,
      method: "POST",
      type: "multipart",
      field: "file",
      headers: {
        "Content-Type": "multipart/form-data",
      },
    };

    Upload.startUpload(options)
      .then((uploadId) => {
        Upload.addListener("progress", uploadId, (data) => {
            console.log(
              `Uploading ${data.progress === 0 ? " <0> " : ""}: Progress: ${
                data.progress
              }%`,
              uploadId
            );
        });
        Upload.addListener("error", uploadId, (data: any) => {
          console.log(`Error: ${data.error}%`, uploadId);
        });
        Upload.addListener("cancelled", uploadId, (data) => {
          console.log(`Cancelled!`, uploadId);
        });
        Upload.addListener("completed", uploadId, (data) => {
          console.log("Completed!", uploadId, data);
        });
      })
      .catch((err) => {
        console.log("Upload error!", err);
      });

and the output log:

 LOG  uri /data/user/0/com.mydomain.app/cache/ImagePicker/2bae0566-62f0-47a8-b441-943ce35fab9d.mp4
 LOG  UPLOAD2 START c07c4772-4be7-4198-a4fb-b3524cfcab36 https://vps820143.ovh.net/lab/upload-test/upload.php
 LOG  Uploading  <0> : Progress: 0% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Uploading : Progress: 8% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Uploading : Progress: 27% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Uploading : Progress: 42% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Uploading : Progress: 61% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Uploading : Progress: 85% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Uploading : Progress: 100% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Uploading  <0> : Progress: 0% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Uploading : Progress: 8% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Uploading : Progress: 21% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Uploading : Progress: 33% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Uploading : Progress: 48% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Uploading : Progress: 70% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Uploading : Progress: 94% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Uploading : Progress: 100% c07c4772-4be7-4198-a4fb-b3524cfcab36
 LOG  Completed! c07c4772-4be7-4198-a4fb-b3524cfcab36 {"id": "c07c4772-4be7-4198-a4fb-b3524cfcab36", ...

Sometimes, that works, sometimes it restart more than one time, sometimes it restart and return a timeout error. I tried a lot of options, with many medias (image, video, from ImagePicker or from Gallery, ...) without success.

Any help?

siddharth-kt commented 2 years ago

Yes, i am also facing the same issue😥

Please let me know if you get any solution.

xavax31 commented 2 years ago

nope, and it's really a problem, the feature is very instable for me. I need it for a professional project but I will surely have to remove it

siddharth-kt commented 2 years ago

nope, and it's really a problem, the feature is very instable for me. I need it for a professional project but I will surely have to remove it

How you removed it 🤔?

xavax31 commented 2 years ago

nope, and it's really a problem, the feature is very instable for me. I need it for a professional project but I will surely have to remove it

How you removed it 🤔?

By not using it at all (removing the plugin), and then don't have background upload feature in my app, what is a real problem for me, but I have not other way.

dkfox commented 2 years ago

I did dig in and found workaround. In my case, the problem occurred in android devices(rn 0.67.4, android 12) when the file path starts with 'content://'. My log said there was a mismatch btw transferred bytes and 'expected' bytes of the uploaded file. (It was uploaded via s3 presigned url)

 LOG  Error: expected 67661824 bytes but received 67665920%

Some fork in the other issue said to use 'original' path of the file or add 'file://' prefix but none of em worked for me. What worked was just copying the file to temporary file path and using this new temp path.

import RNFS, { copyFile } from 'react-native-fs';

  if (filePath.startsWith('content:')){
    const tempPath = `${RNFS.TemporaryDirectoryPath}/${fileName}`;
    console.log("TEMP PATH: "+tempPath);
    await copyFile(filePath, tempPath);
    filePath = tempPath;
  }

not the best, but good enough for my project.. for now. (it needs extra storage space and time to complete copying temp file though...)