Cannot send a file through FormData object in http request. Formidable cannot find any file in server end

[soujanyanaganuri]

I need to add a record with angularjs in consumer side and nodejs and explicit in server side. In angular, i'm the use of lf-ng-md-file-enter directive to add a file. In server side, i'm using package deal formidable to parse multipart form facts. right here is my html code:

<lf-ng-md-file-input lf-submit-label="Upload" lf-files="files"
     submit lf-on-submit-click="onSubmitClick"
     ng-change="onSubmitFilesChange()" progress>
</lf-ng-md-file-input>

and this is the angular code for submit click:

$scope.onSubmitClick = function(files) {
    console.log(files[0])            //This shows the file object correctly
    console.log($scope.file)
    var formData = new FormData()
    angular.forEach(files,function(obj){
        if(!obj.isRemote){
            console.log(obj)
            formData.append('files', obj.lfFile);
        }
    });
    formData.append('source', $scope.file.source);
    formData.append('batch', $scope.file.batch);
    for (var pair of formData.entries()) {
        console.log(pair[0]+ ', ' + pair[1]); 
    }
    $http.post(config.serverUrl + "/upload", formData, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    }).then(function(result){
        // do sometingh 
        console.log(result)                  
    },function(err){
        // do sometingh
    });
}

This is angularjs my server side code in node js:

var formidable  = require('formidable')
app.use(express.static(__dirname + '/public'))
app.post('/upload',function(req,res){
    var form = new formidable.IncomingForm();
    form.uploadDir = __dirname +'/public/uploads';
    form.keepExtensions = true;
    console.log(form)
    console.log(req.body)
    //file upload path
    form.parse(req, function(err, fields, files) {
        //you can get fields here
        console.log("parsing")
        console.log(fields)
        console.log(files)
    });
    form.on ('fileBegin', function(name, file){
        console.log("File begin")
        file.path = form.uploadDir + "/" + file.name;
        //modify file path
    });
    form.on('progress', function(err) {
        console.log("On Progress")
    });
    form.on('field', function(err) {
        console.log("Fields found")
    });
    form.on('file', function(err) {
        console.log("File found")
    });
    form.on('error', function(err) {
        console.log("Error occured")
        res.sendStatus(400);
    });
    form.on('aborted', function(err) {
        console.log("Aborted")
    });
    form.on ('end', function(){
        console.log("In the end")
        res.sendStatus(200);
        //when finish all process    
    });
});

However the problem is, in server aspect, req.body is displaying all other fields however there may be nothing observed inside the shape. It indicates aborted because of timeout. form.parse isn't operating in any respect.

[Karthigeyan Krishnamurthi]

Dear Customer, 

 

Thank you for contacting Syncfusion support. 

 

We have analyzed your general query about AngularJS & Node.js and found that below links would be helpful. 

https://github.com/shuyu/angular-material-fileinput/blob/master/README.md#getting-started 

https://stackoverflow.com/questions/25642232/formidable-upload-not-working-files-undefined-no-error 

 

Kindly try the below code example as suggested in the above Stack Overflow link and please let us know if you face any issue with any one of our Syncfusion controls to assist you. 

 

<Code> 

form.parse(request, function(error, field, file) { 

    //code 

} 

</Code> 

 

Regards, 

Karthigeyan