Does anyone have any experience implementing dropzone.js with UserFrosting?
I receive the following error in browser's control:
POST '.../website/images/upload 400 (Bad Request)'
Dropzone.js is added to /website/images/upload, whenever I drag and drop a file I end up with the above.
Here are my index.php entries:
$app->get('/website/images/upload?', function () use ($app) {
$controller = new RDCW\LGWebsiteController($app);
return $controller->websiteImagesUpload();
});
$app->post('/website/images/upload?', function () use ($app) {
$controller = new RDCW\LGWebsiteController($app);
return $controller->imagesUpload();
});
Controller's functions:
public function websiteImagesUpload()
{
// Access-controlled page
if (!$this->_app->user->checkAccess('uri_website')) {
$this->_app->notFound();
}
$schema = new \Fortress\RequestSchema($this->_app->config('schema.path') . "/forms/lg-file-upload.json");
$this->_app->jsValidator->setSchema($schema);
$this->_app->render('lg-website/image-upload.twig', [
"validators" => $this->_app->jsValidator->rules(),
]);
}
public function imagesUpload()
{
// Access-controlled page
if (!$this->_app->user->checkAccess('uri_website')) {
$this->_app->notFound();
}
$post = $this->_app->request->post();
$ms = $this->_app->alerts;
$requestSchema = new \Fortress\RequestSchema($this->_app->config('schema.path') . "/forms/lg-file-upload.json");
$rf = new \Fortress\HTTPRequestFortress($ms, $requestSchema, $post);
$rf->sanitize();
if (!$rf->validate()) {
$this->_app->halt(400);
}
$ms->addMessageTranslated("success", "LG Notification! " . var_dump($post), $post);
}
Twig template:
<form class="form-horizontal dropzone"
id="my-awesome-dropzone"
role="form"
name="uploadImage"
action="/website/images/upload"
method="post">
</form>
...
<script>
$(document).ready(function() {
// Load the validator rules for this form
var validators = {{validators | raw}};
ufFormSubmit(
$("form[name='uploadImage']"),
validators,
$("#userfrosting-alerts"),
function(data, statusText, jqXHR) {
// Reload the page on success
window.location.reload(true);
}
);
});
</script>
I am not sure if the schema part can be skipped, hence I included the following:
{
"file" : {
"validators" : {
"length" : {
"min" : 1,
"max" : 128,
"message" : "Path length must be up to 128 characters long."
}
},
"sanitizers" : {
"raw" : ""
}
}
}
Perhaps there are other, better ways of handling file uploads. I am open for suggestions :)