Ajax File Uploading with Cake and jQuery

By David Golding |  Print This Post

Here’s how to upload files in CakePHP using jQuery.

First, make sure you download jQuery 1.2.2 or greater plus the jQuery Form plugin. Place them in the

folder and link them in your layout file:

1
<?=$javascript->link(array('jquery.js','jquery.form.js'));?>

Now, in this example, I have a table named “Stories” in the database. For each Story, I want to make a text upload option available in the add and edit views. What will happen is that the user will upload a plain-text file, then Cake will place the contents of the file into a

field, allowing the user to easily upload a text file but still be able to edit its contents before saving the Story.

In the

folder, I’ve created the

file. You will need to begin the form using the Form helper. Don’t forget to specify the type as

so that the

tag contains the necessary

attribute for the form submission to work correctly.

1
2
3
<h1>Edit Story</h1>



<?=$form->create('Story',array('name'=>'storyEditForm','id'=>'storyEditForm','type'=>'file'));?>

You can put whatever input fields you want in the form. I’m just going to include here the actual uploading part:

1
2
3
4
5
<div id="storyTextUpload">

<span><?=$form->input('Story.text', array('label'=>'Current Text ','rows'=>'15','cols'=>'75'));?></span>

<span><?=$form->input('upload_text',array('label'=>'Upload Text File ','type'=>'file'));?></span>

<span><?=$form->button('Upload Text',array('onClick'=>'$(\'#storyEditForm\').ajaxSubmit({target: \'#storyTextUpload\',url: \''.$html->url('/stories/text').'\'}); return false;'));?></span>

</div>

For the Ajax part of the upload, I’ll need to tell jQuery where to update the Ajax request. In this case, it’s going to be the

tag with

. Notice that the

event is written in escaped jQuery Form plugin syntax. It’s essentially saying to submit the form with

and make the update target the element with an id of

. I’ve linked the Ajax form submission to a controller action I haven’t written yet called “text”.

I can now finish the form with whatever else I want.

1
<?=$form->end('Submit');?>

All I have to do now is create the text action in the Stories controller that will handle the upload and then create a view to be used in the final Ajax returned response.

In the Controller

When the file is chosen and the user clicks the “Upload Text” button, jQuery will submit the whole form to the

action in the stories controller because of the URL parameter I wrote in the onClick event.

So, in the

file, I need to include the following function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function text() {

<span>if (!$this->data['Story']['upload_text']) { //check for uploaded file in $this->data</span>

<span><span>$this->set('error','You must select a text (.txt) file before you can upload.');</span></span>

<span><span>$this->render('text','ajax');</span></span>

<span>} else {</span>

<span><span>$file = new File($this->data['Story']['upload_text']['tmp_name']); //the uploaded file sent by jQuery and parsed by Cake</span></span>

<span><span>if ($this->data['Story']['upload_text']['type'] != 'text/plain') {</span></span>

<span><span><span>$this->set('error','You may only upload text (.txt) files.');</span></span></span>

<span><span><span>$this->render('text','ajax');</span></span></span>

<span><span>} else {</span></span></span>

<span><span><span>$data = h($file->read()); //read file contents and pass through htmlspecialchars function</span></span></span>

<span><span><span>$file->close();</span></span></span>

<span><span><span>$this->set('text',$data);</span>

<span><span><span>$this->render('text','ajax');</span></span></span>

<span><span>}</span></span>

<span>}</span>

}

Notice that once the action fetches the file contents, it assigns it to a Cake variable named

to be used in the

view.

In the View

In the

file, I’ve included the following code:

1
2
3
4
5
6
7
8
9
10
11
<? if (!empty($error)): ?>

<span><?=$form->input('Story.text', array('label'=>'Current Text ','rows'=>'15','cols'=>'75'));?></span>

<span><?=$form->input('Story.upload_text',array('label'=>'Upload Text File ','type'=>'file'));?></span>

<span><?=$form->button('Upload Text',array('onClick'=>'$(\'#storyEditForm\').ajaxSubmit({target: \'#storyTextUpload\',url: \''.$html->url('/stories/text').'\'}); return false;'));?></span>

<span><p><?=$error;?></p></span>

<? else: ?>

<span><?=$form->input('Story.text',array('label'=>'Current Text ','value'=>$text,'rows'=>'15','cols'=>'75'));?></span>

<span><p>Upload successful</p></span>

<span><?=$form->input('Story.upload_text',array('label'=>'Upload Text File ','type'=>'file'));?></span>

<span><?=$form->button('Upload Text',array('onClick'=>'$(\'#storyEditForm\').ajaxSubmit({target: \'#storyTextUpload\',url: \''.$html->url('/stories/text').'\'}); return false;'));?></span>

<? endif; ?>

That’s it… Now this handy set of functions will take a file and upload its contents the plop the contents into a text field which will be saved to the database after the user clicks the Submit button. Of course you will need to create your own edit/add functions but this much will get the file uploaded for you.

A File Transfer Method

Actually getting the data was shown above. But say I wanted to put the file contents not into a form field but do an actual file transfer to the server. This is simple. Instead of putting

into a Cake variable, I could make a new file somewhere on the server like so:

1
2
3
$file = new File(WWW_ROOT.'/files/'.intval(rand()).'_text_upload.txt');

$file->write($data);

$file->close();

A Note on Ajax Submissions

The reason why I’ve used jQuery here is that it is the only Ajax framework I’ve been able to find that will serialize the form elements and actually send to the server as a post variable the

element. Usually, in PHP, the file is accessible in the

variable, but thanks to Cake, I can get the content moved over much more easily by making use of

and the File functions, which you have seen me do. To spare you time trying to get this to work in Prototype (the Ajax framework that the Cake Ajax Helper uses), I hope you’ll stick with my example here and use jQuery. Prototype doesn’t serialize file inputs.

Maybe someone could build a jQuery set for the Ajax helper :) Until then, hope this helps.

Comments

20 Responses to “Ajax File Uploading with Cake and jQuery”

Submit Comment