hashmode/cakephp-jquery-file-upload

Cakephp 3.x Jquery File Upload

Cakephp-Jquery-File-Upload

This is a Cakephp 3.x vendor/plugin for blueimp jquery file upload widget https://github.com/blueimp/jQuery-File-Upload, _(*1)

Requirements

1. Cakephp 3.x
2. Blueimp Jquery File Upload - https://github.com/blueimp/jQuery-File-Upload (dependency is added into the plugin's composer, so it wil be automaticaly installed)

Installation

1) Installation is done by composer: add the following into your main composer.json (inside require) and then run composer update, _(*2)

"hashmode/cakephp-jquery-file-upload": "~1.0"

To use the css and js files from the original library, they are being copied to plugin's webroot directory: for that inside your application's main composer.json the following should be added, _(*3)

"scripts": {
    "post-update-cmd": "CakephpJqueryFileUpload\\Console\\Installer::postUpdate"
},

2) Load Plugin from bootstrap, and add component into controller, helper - to AppView, _(*4)

// bootstrap.php
Plugin::load('CakephpJqueryFileUpload');

// inside your controller's initialize
$this->loadComponent('CakephpJqueryFileUpload.JqueryFileUpload');

// inside AppView.php initialize
$this->loadHelper('CakephpJqueryFileUpload.JqueryFileUpload');

3) To add the UploadHelper class to autoload classmap, add this into your main composer - under autoload, same level as psr-4, _(*5)

"classmap": [
    "vendor/blueimp/jquery-file-upload/server/php"
]        

and run composer dump-autoload, _(*6)

4) Simple setup example, _(*7)

JqueryFileUpload->loadCss(); ?>
JqueryFileUpload->loadScripts(); ?>

<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Select files...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" type="file" name="files[]" multiple>
</span>

inside your myAction, _(*8)

// example options
$options = array(
    'max_file_size' => 2048000,
    'max_number_of_files' => 10,
    'access_control_allow_methods' => array(
        'POST'
    ),
    'access_control_allow_origin' => Router::fullBaseUrl(),
    'accept_file_types' => '/\.(jpe?g|png)$/i',
    'upload_dir' => WWW_ROOT . 'files' . DS . 'uploads' . DS,
    'upload_url' => '/files/uploads/',
    'print_response' => false
);

$result = $this->JqueryFileUpload->upload($options);

For full $options please refer to https://github.com/blueimp/jQuery-File-Upload, _(*9)

License

MIT, _(*10)