Apigility file upload multipart/form-data - multipartform-data

Question

I've got a problem with the file upload, too.
I get the following JSON Response from API after submitting the form below. I'm using multipart/form-data.
{validation_messages: {file_attachment: []},…}
detail: "Failed Validation"
status: 422
title: "Unprocessable Entity"
type: "http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html"
validation_messages: {file_attachment: []}
file_attachment: []
Apigility Validators:
0 => array(
'required' => true,
'validators' => array(),
'filters' => array(
0 => array(
'name' => 'Zend\\Filter\\File\\RenameUpload',
'options' => array(
'target' => 'data/',
'randomize' => true,
),
),
),
'name' => 'file_attachment',
'type' => 'Zend\\InputFilter\\FileInput',
'allow_empty' => false,
'continue_if_empty' => false,
),
1 => array(
'required' => false,
'validators' => array(),
'filters' => array(),
'name' => 'title',
),
This is my Form:
<form id="avataruploadform" class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="title">Title</label>
<div class="col-md-4">
<input id="title" name="title" type="text" placeholder="Some title for your sample file"
class="form-control input-md" required=""> <span
class="help-block">Sample field (title)</span>
</div>
</div>
<!-- File Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="file_attachment"> (PDF)</label>
<div class="col-md-4">
<input id="file_attachment" name="pdf" class="input-file" type="file">
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit">Submit</label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Submit AJAX upload with file</button>
</div>
</div>
</fieldset>
</form>
jQuery (AJAX Request):
<script type="application/javascript">
jQuery(document).ready(function() {
jQuery('#avataruploadform').submit(function(e) {
e.preventDefault();
// Note: if you observe 422 responses, check what's assembled into fd amd
// that it looks correct.
var fd = new FormData();
fd.append('file_attachment', $('#file_attachment')[0].files[0]);
jQuery.ajax({
url : 'http://localhost:8080/api/upload/avatar', // Specify the path to your API service
type : 'POST', // Assuming creation of an entity
contentType : false, // To force multipart/form-data
data : fd,
processData : false,
success : function(data) {
// Handle the response on success
// alert(JSON.stringify(data));
}
});
});
});
</script>
This is the response:
Remote Address:127.0.0.1:8080
Request URL:http://localhost:8080/api/upload/avatar
Request Method:POST
Status Code:422 Unprocessable Entity
Response Headers
view source
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:Keep-Alive
Content-Length:202
Content-Type:application/problem+json
Date:Sun, 13 Sep 2015 15:14:27 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive:timeout=5, max=94
Pragma:no-cache
Server:Apache/2.2.22 (Ubuntu)
Set-Cookie:apigility_oauth2_doctrine_skeleton=lcgemufh1sag5ive1o5smh51e3; path=/
X-Powered-By:PHP/5.4.45-1+deb.sury.org~precise+1
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Content-Length:355592
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryaXrmYN1JAB3ShBJa
Host:localhost:8080
Origin:http://localhost:3000
Referer:http://localhost:3000/inserate
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36
X-FirePHP-Version:0.0.6
Request Payload
------WebKitFormBoundaryaXrmYN1JAB3ShBJa
Content-Disposition: form-data; name="title"
test
------WebKitFormBoundaryaXrmYN1JAB3ShBJa
Content-Disposition: form-data; name="file_attachment"; filename="_DSC2288.jpg"
Content-Type: image/jpeg
------WebKitFormBoundaryaXrmYN1JAB3ShBJa
Content-Disposition: form-data; name="submit"
------WebKitFormBoundaryaXrmYN1JAB3ShBJa--

Answer 1

Add enctype="multipart/form-data" to your form tag.
Ensure your "data/" folder is writable.
Also, check if your PHP error log has a warning message to the effect "Invalid boundary..."
I also had the same issue with the same example. Finally got it working with the POST and PUT methods but now I am having same issues with the PUT with X-HTTP-Method-Override. it just isn't working and looks like a bug in the apigility code.