edeckers / react-native-blob-courier

Use this library to efficiently download and upload blobs in React Native.
Mozilla Public License 2.0
134 stars 10 forks source link

uploadBlob with HTTP PUT corrupted #263

Open giantslogik opened 4 months ago

giantslogik commented 4 months ago

Describe the bug I'm replacing react-native-fetch-blob with this library. This library seems to force form-data when using the uploadBlob API. This results in a corrupted upload. (upload is to google cloud storage)

To Reproduce const request = { absoluteFilePath: filePath, method: 'PUT', mimeType: mimeType || 'application/octet-stream', url, onProgressWrap, progressIntervalMilliseconds: 250, };

const res = await BlobCourier.uploadBlob(request);

Expected behavior File is uploaded correctly.

Actual behavior The headers end up inside the uploaded file: Screenshots I opened the binary png file, in a text editor , as you can see its corrupt and the headers are in the uploaded file.

Screenshot 2024-07-02 at 2 27 30 PM

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

edeckers commented 3 months ago

Hi @giantslogik thank you for reporting this problem, I'll try to take a closer look this weekend!

giantslogik commented 3 months ago

@edeckers I believe google cloud storage and other PUT based uploads, should not be using form data. I replaced the blob-courier code with the following:

  const localFile = await fetch(filePath);
  const blob = await localFile.blob();
 var xhr = new XMLHttpRequest();
    xhr.open('PUT', url, true);
    xhr.onload = function () {
      if (xhr.status >= 200 && xhr.status < 300) {
        ....
      } else {
      ....
      }
    };
    xhr.onerror = function () {
     ...
    };
    xhr.upload.onprogress =  function () {
     ...
    };
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.setRequestHeader('Content-Type', mimeType || 'application/octet-stream');
    xhr.send(blob);