1

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 :)

Luke G
  • 1,741
  • 6
  • 23
  • 34
  • 1
    Adding to the form addressed the 400 response. I am yet to understand the flow - it looks that it works with or without the ufFormSubmit. – Luke G Dec 11 '16 at 17:58

0 Answers0