React-native-fetch-blob: Spaces in filename (multipart)

[St1ma]

Hello!

I'm trying to make blob from file with spaces in name - "Venetoclax GVD tracked changes Sep 13.docx"
The process stop at Blob.build method

const Blob = RNFetchBlob.polyfill.Blob;
const blobUri = RNFetchBlob.wrap(fileUri);

await Blob.build(blobUri, { type : fileType });

Url value (for emulator):

blobUri = RNFetchBlob-file:///Users/username/Library/Developer/CoreSimulator/Devices/deviceid/data/Containers/Data/Application/appid/tmp/org.app/Venetoclax%20GVD%20tracked%20changes%20Sep%2013.docx

P.S. Thanks for library!

[wkh237]

@St1ma , I've made a simple test case for this issue but unfortunately the problem could not be replicated. Perhaps the spaces in filename is not the root cause. Is it possible to provide a sample file and code snippet ?

[St1ma]

@wkh237
For example, I had tested ZIP file (in attachments)
archive images.zip

It was download form iCloud Drive with parameters:

{ 
          fileName: 'archive images.zip',
      fileType: 'application/zip',
      uri: 'file:///Users/anastasiiak/Library/Developer/CoreSimulator/Devices/deviceID/data/Containers/Data/Application/appID/tmp/org.app/archive%20images.zip',
      fileSize: 16907427 
}

Post file (as multipart) function stuck by executing Blob.build Promise

    async postFile(url, { fileUri, fileType, filename }) {
        try {
            const Blob = RNFetchBlob.polyfill.Blob;
            const blobUri = RNFetchBlob.wrap(Platform.OS === 'ios' ? fileUri.replace('file://', '') : fileUri);

            await Blob.build(blobUri, { type : fileType });

            const res = await RNFetchBlob.fetch('POST', `${this.prefix}/${url}`, {
                'Content-Type' : 'multipart/form-data'
            }, [
                { name : 'file', filename, type: fileType, data: blobUri }
            ]);

            const data = await res.json();

            if (data && data.status === 1) {
                return data;
            }

            if (this.onError) {
                this.onError(data.error);
            }

            return Promise.reject(data.error);
        } catch (e) {
            return Promise.reject(e);
        }
    }

Thank you for your quick response.

[wkh237]

@St1ma , if you intend to embed the file into multipart form, there is no need to create a blob, you can directly pass RNFB.wrap(filePath) to data.

async postFile(url, { fileUri, fileType, filename }) {
        try {
-            const Blob = RNFetchBlob.polyfill.Blob;                                                                                        
-            const blobUri = RNFetchBlob.wrap(Platform.OS === 'ios' ? fileUri.replace('file://', '') : fileUri);                                                                                        

-            await Blob.build(blobUri, { type : fileType });                                                                                        

            const res = await RNFetchBlob.fetch('POST', `${this.prefix}/${url}`, {
                'Content-Type' : 'multipart/form-data'
            }, [
+                { name : 'file', filename, type: fileType, data: RNFetchBlob .wrap(fileUri) }                                                                                        
            ]);

            const data = await res.json();

            if (data && data.status === 1) {
                return data;
            }

            if (this.onError) {
                this.onError(data.error);
            }

            return Promise.reject(data.error);
        } catch (e) {
            return Promise.reject(e);
        }
    }

[St1ma]

@wkh237
In this case, the app will unexpectedly close

[benoist]

I'm having the same issue with an imported file from iCloud.
A file without space works fine, a file with space does not.

[benoist]

I managed to find the root cause.

The path was passed to the uploader in URI encoded style. So it was like "my%20file.pdf" instead of "my file.pdf"
Using it like this works:

{
  name: 'file',
  filename: 'original.pdf',
  type: 'application/pdf',
  data: "RNFetchBlob-" + decodeURI(filePath)
}