Search code examples
javascriptreactjsreact-nativefile-uploadmulter

sending empty files to server React-Native


I am trying to send JSON files to Server using NodeJS with multer and i am able to send files but the files are empty.

I am using React-native-File-System to loop through all the files present in the folder

I am not getting any errors and the file upload logs is also showing as UPLOAD COMPLETED but the files are empty

I have tried to send it with form-data but still no luck

        var RNFS = require('react-native-fs');

        var path = RNFS.DocumentDirectoryPath + '/toBeSynced';

        RNFS.readDir(path)
            .then((success) => {
                success.forEach(function (element) {
                    var fileName = element.name
                    var filePath = element.path
                    const options = {
                        url: 'http://192.168.1.15:3333/SurveyJsonFiles/GetFiles',
                        path: filePath,
                        name: fileName,
                        field: 'files',
                        method: 'POST',
                        type: 'multipart',
                        headers: {
                            'content-type': 'multipart/form-data',
                        },
                        //Below are options only supported on Android
                        notification: {
                            enabled: true
                        }
                    }

                    Upload.startUpload(options).then((uploadId) => {
                        console.log('Upload started')
                        Upload.addListener('progress', uploadId, (data) => {
                            console.log(`Progress: ${data.progress}%`)
                        })
                        Upload.addListener('error', uploadId, (data) => {
                            console.log(`Error: ${data.error}%`)
                        })
                        Upload.addListener('cancelled', uploadId, (data) => {
                            console.log(`cancelled: ${data.error}%`)
                        })
                        Upload.addListener('completed', uploadId, (data) => {
                            // data includes responseCode: number and responseBody: Object
                            console.log('Completed!')
                        })
                    }).catch((err) => {
                        console.log('Upload error!', err)
                    })


                });
            })
            .catch((err) => {
                console.log(err.message);
            });
    }

Solution

  • The error was on the server side as nodemon was restarting server when it was getting new file

    const data = new FormData();
    data.append('files', {
        uri: filePath,
        type: 'multipart/form-data',
        name: fileName,
        });
    
    const config = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data',
             },
        body: data,
        };
    
    fetch(uploadUrl, config)
    .then((checkStatusAndGetJSONResponse) => {
        console.log(checkStatusAndGetJSONResponse);
        }).catch((err) => {
           console.log(err)
           });