AJAX not uploading images to backend service

Question

Working on a requirement to upload images to AWS instance. UI and service is separated and connects via REST. Service is in nodejs. from UI we are making a ajax call to backend service to upload the images to AWS.

The problem: When I upload the images via POSTMAN request, I can see that response as uploaded with files properly uploaded in AWS. Whereas when I upload images via AJAX call, I get no response in browser, and also the images are not uploaded in aws.

Below is the piece of code in ajax:

var formData = new FormData();
    formData.append('image', $('#tx_file_programa')[0]);

    $.ajax({
        method: 'POST',
        type: "POST",
        url: 'http://10.0.0.95:9999/photo/1',
        contentType: false,
        processData: false,
        async: false,
        cache: false,
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', 'Bearer ' + access_token );
        },
        data: formData,
        success: function (data) {
            console.log('response from server is : ', data);
        }
        //dataType: 'json'
    });

This is the backend service.

server.post('/photo/:count', function (req, res) {
        if (req.getContentType() == 'multipart/form-data') {
            var form = new formidable.IncomingForm(),
                files = [], fields = [];
            var result = [];
            var noOfFiles = req.params.count;
            var count = 0;
            console.log('noOfFiles', noOfFiles);


            form.on('field', function(field, value) {
                fields.push([field, value]);
                console.log(fields);
            })

            form.on('progress', function(bytesReceived, bytesExpected) {
                console.log('err');
            });

            form.on('error', function(err) {
                console.log('err',err);
            });

            form.on('aborted', function() {
                console.log('aborted', arguments);
            });

            new Promise(function(resolve, reject) {
                var result = [];
                form.onPart = function (part) {
                    var data = null;
                    const params = {
                        Bucket: 'xxxxx',
                        Key: uuidv4() + part.filename,
                        ACL: 'public-read'
                    };

                    var upload = s3Stream.upload(params);

                    upload.on('error', function (error) {
                        console.log('errr', error);
                    });
                    upload.on('part', function (details) {
                        console.log('part', details);
                    });
                    upload.on('uploaded', function (details) {
                        let extension = details.Location.split('.');
                        if(['JPG', 'PNG'].indexOf(extension[extension.length - 1].toUpperCase()) > -1) {
                            var ext = extension[extension.length - 1];
                            count++;
                            result.push(details.Location);
                            if(count == noOfFiles) {
                                resolve(result);
                            }
                        }
                    });
                    part.pipe(upload);
                }
            }).then(function(result){
                console.log('end', result);
                res.writeHead(200, {'content-type': 'text/plain'});
                res.end('received files:\n\n ' + util.inspect(result));
            })
            form.parse(req, function (err, fields, files) {
            })
            return;
        } else {
            BadRequestResponse(res, "Invalid request type!");
        }
    })

Answer 1

I think the way you are sending formdata is not correct.

Try these 2 ways:

You can give your whole form to FormData() for processing

var form = $('form')[0]; // You need to use standard javascript object here
var formData = new FormData(form);

or specify exact data for FormData()

var formData = new FormData();
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]);

Answer 2

@user3336194, Can you check with this, this is working thins

var appIconFormData = null

$(":file").change(function () {
    var file = this.files[0], name = file.name, size = file.size, type = file.type;
    var imageType = new Array("image/png", "image/jpeg", "image/gif", "image/bmp");
    if (jQuery.inArray(type, imageType) == -1) {
        return false;
    } else {
        appIconFormData = new FormData();
        appIconFormData.append('appimage', $('input[type=file]')[0].files[0]);
    }
});

$.ajax({
    url: 'your/api/destination/url',
    type: 'POST',
    data: appIconFormData,
    cache: false,
    contentType: false,
    processData: false,
    success: function (data) {
        console.log(data)
    },
    error: function (e) {
    }
});