We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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.


1 Reply

KK Karthigeyan Krishnamurthi Syncfusion Team August 21, 2017 01:52 PM UTC

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. 
 
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 
                                          


Loader.
Live Chat Icon For mobile
Up arrow icon