Hello. I’m having issues getting the file upload field to work using the API.
I have a test form that is submitting to “form-submission.php”.
It only has 2 fields, a select and a file upload field.
Whenever I submit my form, I get this error: {“4”:“This field is required.”}
This is form-submission.php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Capture the form data
$formData = array();
// Loop through the $_POST data and add it to the $formData array
foreach ($_POST as $key => $value) {
$formData[] = $key . '=' . urlencode($value) . '';
}
// Handle file uploads
$fileData = array();
foreach ($_FILES as $key => $file) {
if ($file['error'] === UPLOAD_ERR_OK) {
$fileData[] = $key . '=@' . $file['tmp_name'] . ';filename=' . $file['name'];
}
}
// Gravity Forms API endpoint URL
$url = 'http://gcnew.local/wp-json/gf/v2/forms/3/submissions';
error_log("form-submission.php is being executed");
$username = 'user';
$password = 'pass';
$headers = array('Authorization' => 'Basic ' . base64_encode("{$username}:{$password}"));
// Initialize a cURL session
$ch = curl_init();
// Set the cURL options
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, implode('&', array_merge($formData, $fileData)));
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
// Execute the cURL request
$response = curl_exec($ch);
// Check for cURL errors
if (curl_errno($ch)) {
$error = curl_error($ch);
// Handle the error
echo 'cURL Error: ' . $error;
var_dump($ch);
var_dump($error);
var_dump($response);
} else {
// Process the API response
$statusCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
if ($statusCode === 200) {
// Successful submission
$responseData = json_decode($response, true);
// Handle the success response
var_dump($response);
var_dump($formData);
echo 'Form submitted successfully!';
} else {
// Error occurred
// Handle the error response
var_dump($response);
var_dump($formData);
var_dump(implode('&', array_merge($formData, $fileData)));
echo 'Error submitting the form. Please try again.';
}
}
// Close the cURL session
curl_close($ch);
} else {
error_log("hello from formsubmission.php");
}
This is my test form:
<form id="my-form" action="<?php echo esc_url(home_url('/wp-content/themes/gemandclay/form-submission.php')); ?>" method="post" enctype="multipart/form-data">
<div class="ginput_container ginput_container_select"><label class="gfield_label gform-field-label" for="input_3_2">Is Your Project a new build, remodel or refresh?<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label>
<div class="ginput_container ginput_container_select"><select name="input_2" id="input_3_2" class="large gfield_select" aria-required="true" aria-invalid="false">
<option value="New Build">New Build</option>
<option value="Remodel">Remodel</option>
<option value="Refresh">Refresh</option>
</select></div>
</div>
<label class="gfield_label gform-field-label" for="input_3_4">File</label>
<div class="ginput_container ginput_container_fileupload"><input type="hidden" name="MAX_FILE_SIZE" value="314572800"><input name="input_4" id="input_3_4" type="file" class="large" aria-describedby="gfield_upload_rules_3_4" onchange="javascript:gformValidateFileSize( this, 314572800 );"><span class="gfield_description gform_fileupload_rules" id="gfield_upload_rules_3_4">Max. file size: 300 MB.</span>
<div class="gfield_description validation_message gfield_validation_message validation_message--hidden-on-empty" id="live_validation_message_3_4"></div>
</div>
<button type="submit" id="submit-button">Submit</button>
</form>
This is the whole response:
string(111) “{“is_valid”:false,“validation_messages”:{“4”:“This field is required.”},“page_number”:1,“source_page_number”:1}” array(2) { [0]=> string(17) “input_2=New+Build” [1]=> string(23) “MAX_FILE_SIZE=314572800” } string(98) “input_2=New+Build&MAX_FILE_SIZE=314572800&input_4=@C:\Windows\Temp\php34CA.tmp;filename=images.jpg” Error submitting the form. Please try again.
And this is the gravity form:
<form method="post" enctype="multipart/form-data" id="gform_3" action="/?gf_page=preview&id=3" data-formid="3" novalidate="">
<div class="gform-body gform_body"><div id="gform_fields_3" class="gform_fields top_label form_sublabel_below description_below validation_below"><div id="field_3_2" class="gfield gfield--type-select gfield--input-type-select gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_3_2"><label class="gfield_label gform-field-label" for="input_3_2">Is Your Project a new build?<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label><div class="ginput_container ginput_container_select"><select name="input_2" id="input_3_2" class="large gfield_select" aria-required="true" aria-invalid="false"><option value="New Build">New Build</option><option value="Remodel">Remodel</option><option value="Refresh">Refresh</option></select></div></div><div id="field_3_4" class="gfield gfield--type-fileupload gfield--input-type-fileupload gfield--width-full gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_3_4"><label class="gfield_label gform-field-label" for="input_3_4">File<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label><div class="ginput_container ginput_container_fileupload"><input type="hidden" name="MAX_FILE_SIZE" value="314572800"><input name="input_4" id="input_3_4" type="file" class="large" aria-describedby="gfield_upload_rules_3_4" onchange="javascript:gformValidateFileSize( this, 314572800 );"><span class="gfield_description gform_fileupload_rules" id="gfield_upload_rules_3_4">Max. file size: 300 MB.</span><div class="gfield_description validation_message gfield_validation_message validation_message--hidden-on-empty" id="live_validation_message_3_4"></div></div></div></div></div>
<div class="gform_footer before"> <input type="submit" id="gform_submit_button_3" class="gform_button button" value="Submit" onclick="if(window["gf_submitting_3"]){return false;} if( !jQuery("#gform_3")[0].checkValidity || jQuery("#gform_3")[0].checkValidity()){window["gf_submitting_3"]=true;} " onkeypress="if( event.keyCode == 13 ){ if(window["gf_submitting_3"]){return false;} if( !jQuery("#gform_3")[0].checkValidity || jQuery("#gform_3")[0].checkValidity()){window["gf_submitting_3"]=true;} jQuery("#gform_3").trigger("submit",[true]); }">
<input type="hidden" class="gform_hidden" name="is_submit_3" value="1">
<input type="hidden" class="gform_hidden" name="gform_submit" value="3">
<input type="hidden" class="gform_hidden" name="gform_unique_id" value="">
<input type="hidden" class="gform_hidden" name="state_3" value="WyJ7XCIyXCI6W1wiMzc5MTQ2MGQxMmVmNDI3ZDY2NjZlZmZkMzNjMmVmNTlcIixcIjBiMTE2Nzc5YmQyZjA0NTJjOTUzNWFiNmMxNmUxMzgwXCIsXCJjMzg1ZWNkMjA4MmVmZjkwOGFjNTU4OTFlY2E1YWRmOVwiXX0iLCJlOWEzY2ZiN2MzNDRlYjE0YThkYmU1ZTFiYTQ2ZGZmMyJd">
<input type="hidden" class="gform_hidden" name="gform_target_page_number_3" id="gform_target_page_number_3" value="0">
<input type="hidden" class="gform_hidden" name="gform_source_page_number_3" id="gform_source_page_number_3" value="1">
<input type="hidden" name="gform_field_values" value="">
</div>
</form>
What am I doing wrong?