Uploading both data and files in one form using Ajax?

Question

I\'m using jQuery and Ajax for my forms to submit data and files but I\'m not sure how to send both data and files in one form?

I currently do almost the same with b

Answer 1

A Simple but more effective way:
new FormData() is itself like a container (or a bag). You can put everything attr or file in itself. The only thing you'll need to append the attribute, file, fileName eg:

let formData = new FormData()
formData.append('input', input.files[0], input.files[0].name)

and just pass it in AJAX request. Eg:

    let formData = new FormData()
    var d = $('#fileid')[0].files[0]

    formData.append('fileid', d);
    formData.append('inputname', value);

    $.ajax({
        url: '/yourroute',
        method: 'POST',
        contentType: false,
        processData: false,
        data: formData,
        success: function(res){
            console.log('successfully')
        },
        error: function(){
            console.log('error')
        }
    })

You can append n number of files or data with FormData.

and if you're making AJAX Request from Script.js file to Route file in Node.js beware of using
req.body to access data (ie text)
req.files to access file (ie image, video etc)