AjaxMultiUpload Plugin for Cake 2.0.x and 2.1

by srs2012
A full-blown AJAX file uploader plugin for CakePHP 2.0.x and 2.1. Using this, you can add multiple file upload behavior to any or all of your models without having to modify the database or schema.

AjaxMultiUpload Plugin for CakePHP

A full-blown AJAX file uploader plugin for CakePHP 2.0.x and 2.1. Using this, you can add multiple file upload behaviour to any or all of your models without having to modify the database or schema.

You can click on the Upload File button, or drag-and-drop files into it. You can upload multiple files at a time without having to click on any button, and it shows you a nice progress notification during uploads.

How to Use

Download or checkout

You can either download the ZIP file: https://github.com/srs81/CakePHP-AjaxMultiUpload/zipball/master

or checkout the code (leave the Password field blank):

` git clone https://srs81@github.com/srs81/CakePHP-AjaxMultiUpload.git `

Put it in the Plugin/ directory

Unzip or move the contents of this to "Plugin/AjaxMultiUpload" under the app root.

Add to bootstrap.php load

Open Config/bootstrap.php and add this line:

`php CakePlugin::load('AjaxMultiUpload'); `

This will allow the plugin to load all the files that it needs.

Create file directory

Make sure to create the correct files upload directory if it doesn't exist already: <pre> cd cake-app-root mkdir webroot/files chmod -R 777 webroot/files </pre>

The default upload directory is "files" under /webroot - but this can be changed (see FAQ below.)

You don't have to give it a 777 permission - just make sure the web server user can write to this directory.

Add to controller

Add to Controller/AppController.php for use in all controllers, or in just your specific controller where you will use it as below:

`php var $helpers = array('AjaxMultiUpload.Upload'); `

Add to views

Let's say you had a "companies" table with a "id" primary key.

Add this to your View/Companies/view.ctp:

`php echo $this->Upload->view('Company', $company['Company']['id']); `

and this to your View/Companies/edit.ctp:

`php echo $this->Upload->edit('Company', $this->Form->fields['Company.id']); `

FAQ

Dude! No database/table schema changes?

Nope. :) Just drop this plugin in the right Plugin/ directory and add the code to the controller and views. Make sure the "files" directory under webroot is writable, otherwise uploads will fail.

No tables/database changes are needed since the plugin uses a directory structure based on the model name and id to save the appropriate files for the model.

Help! I get file upload or file size error messages!

The default upload file size limit is set to a conservative 2 MB to make sure it works on all (including shared) hosting. To change this:

  • Open up Plugin/AjaxMultipUpload/Config/bootstrap.php and change the "AMU.filesizeMB" setting to whatever size in MB you like.
  • Make sure to also change the upload size setting ( upload_max_filesize and post_max_size) in your PHP settings ( php.ini) and reboot the web server!

Change directory

Are you stuck to the "files" directory under webroot? Nope.

Open up Config/bootstrap.php under the Plugin/AjaxMultiUpload directory and change the "AMU.directory" setting.

The directory will live under the app webroot directory - this is as per CakePHP conventions.

Change directory paths

Coming soon.

Future Work

  • Deleting files is not supported in this version.

Thanks

This uses the Ajax Upload script from: http://valums.com/ajax-upload/ and file icons from: http://www.splitbrain.org/projects/file_icons

Support

Report

More on Plugins

Advertising

Comments

  • 8bitninjaturtle posted on 05/01/13 08:21:00 PM
    If we wanted to store the filename(s) in a database, could we? If so, how would you?
  • capetownandy posted on 12/06/12 06:22:28 PM
    Hi,

    This is a cool little plugin. Your instructions worked like a charm, but I kept getting error 500 responses (even though the file successfully uploaded).

    I'm under tight deadlines so put a workaround into UploadsController:

    At Line 56 echo out directly what would usually be passed to the view:
    echo htmlspecialchars(json_encode($result),ENT_NOQUOTES);

    then die();


    I am using Cake 2.2.4 and ACL authentication. I did double check using the ACL shell that the relevant user group had access to the AjaxMultiUpload ACO node.
  • arthurb posted on 08/06/12 12:37:17 PM
    Works great in all browsers but IE9. The "Upload a file" button is missing. Looks like no java is loaded in IE9.
    Any ideas for me?
  • arthurb posted on 08/01/12 01:29:34 PM
    This plugin took me 5min to implement :) It works in all browsers BUT thet useless IE9. I can see my uploaded files under view and edit but there is no Upload file button.
    Any ideas?

    Cheers
    Arthur
  • srs2012 posted on 06/18/12 10:34:41 PM
    Thanks to another GitHub user, there is now documentation on how to use AjaxMultiUpload in CakePHP applications with Auth. Please check out the GitHub page for info on how to do so.
  • strmtrpr83 posted on 04/25/12 05:14:22 PM
    I'm trying to implement this on a app that uses ACL and it allows me to click upload, navigate to a but when it starts to upload it says "failed." Are there specific files I'm going to need to allow? Otherwise I was able to get it to work on a generic app.
    • srs2012 posted on 05/02/12 09:49:31 PM
      Can you see if it failed because of the file size? The default implementation allows all file types to be uploaded. I've used it on ACL applications without a problem...
      • strmtrpr83 posted on 05/05/12 04:17:23 PM
        It's not a file size issue. I tried baking an extremely basic cakephp 2.1 app and it worked fine on that, but on my app that has the tutorial "Simple Acl controlled Application" it just says failed :(

        Can you see if it failed because of the file size? The default implementation allows all file types to be uploaded. I've used it on ACL applications without a problem...
    • lily posted on 04/28/12 01:53:58 PM
      I also have the same problem, waiting for answer, thanks
    • lily posted on 04/28/12 01:52:28 PM
      [quote] I'm trying to implement this on a app that uses ACL and it allows me to click upload, navigate to a but when it starts to upload it says "failed." Are there specific files I'm going to need to allow? Otherwise I was able to get it to work on a generic app.
      [end quote]
      • srs2012 posted on 05/02/12 09:51:37 PM
        Can you check if its because of the file size? Or it just doesn't work on ACL applications?
  • beBibietyeu posted on 04/11/12 06:00:52 AM
    Thanks for your plugin.
  • theworkroom posted on 04/05/12 01:59:24 PM
    This is a really nice plugin. Easy to implement. Thank you for sharing it!

    You mentioned that changing directory paths is a feature that is coming soon. I would really like to be able to implement that with a current application. For example, instead of the file structure files/Company, I would like to use files/Company/id, and then show files only associated with a particular id.

    If you can walk me through how to implement that, I would appreciate it very much!
  • theworkroom posted on 04/05/12 01:59:07 PM
    This is a really nice plugin. Easy to implement. Thank you for sharing it!

    You mentioned that changing directory paths is a feature that is coming soon. I would really like to be able to implement that with a current application. For example, instead of the file structure files/Company, I would like to use files/Company/id, and then show files only associated with a particular id.

    If you can walk me through how to implement that, I would appreciate it very much!
    • srs2012 posted on 04/10/12 09:58:57 PM
      [quote]For example, instead of the file structure files/Company, I would like to use files/Company/id, and then show files only associated with a particular id.[end quote]
      Hi, that's exactly how it should work - are all the files going into the root directory?
  • srs2012 posted on 04/03/12 05:24:35 PM
    Delete functionality is now added, so you can delete files in edit view.
  • Tomsky posted on 03/21/12 10:48:32 AM
    Certain new features can be added like:
    - encryption of files
    - file deletion option
    - file existence check

    Anyways nice job srs2012....

    thnx a lot....
    • srs2012 posted on 03/21/12 08:24:21 PM
      Thanks! Glad you like it.

      [quote] Certain new features can be added like:
      - encryption of files
      - file deletion option
      - file existence check
      [end quote]
      Yeah, definitely want to work on file deletion.

      Interesting thought about file encryption - let me think about it some and see if it is useful...

      As for file existence: it only lists the file if it is present - remember, no database, the view actually checks the list of files in that directory from a previous upload.

      Hope this is useful.
login to post a comment.