I've built this custom form where users can click on buttons to configure their own product. This data is then sent with AJAX to my PHP backend (Wordpress) where it is processed and stored in the database. I'd like to allow users to upload files as well, but how can I send this file and the JSON data I have right now with the same POST request to the backend?
configurationData is an array that stores the selected components. detailsFormData contains name, email etc. in the same format.
Javascript that handles the AJAX request:
$.post(
stac.ajax_url, {
'action': 'add_configuration',
'nonce': stac.nonce,
'configurationData': configurationData,
'detailsFormData': detailsFormData,
},
function( response ) {
if( response.success ) {
// do some fancy things
} else {
// more stuff
}
}
);
This works fine, but obviously it doesn't let users upload a file yet. I've tried a bunch of tutorials but those only allow a file upload and nothing else, so no json data. Also tried some stuff with var formData = new FormData(this);
and adding some settings (processData: false
, contentType: false
and cache: false
), but that posts a single javascript object and I'm not sure how to handle that in the backend.
EDIT: I've seen the links, but they do not explain how I can add this to the data that's being sent:
'action': 'add_configuration',
'nonce': stac.nonce,
'configurationData': configurationData,
'detailsFormData': detailsFormData,
EDIT2: Can just append these in the same way that formData is appended. Should work now, haven't handled it in the backend yet though.