Ajax Bestiary: A Javascript Field Guide
 
Ajax Bestiary: A Javascript Field Guide
 
 

Handling Multiple File Uploads with ExtJS File Uploader & PHP

September 28th, 2007 Posted by Don Albrecht

Earlier this month I posted on a powerful ExtJS extension for handling multiple file uploads. Today we will delve deeper into this widget and explore handling the uploads on the server end.

To get started we will need a copy of ExtJS 1.1.1 and a copy of Saki’s Upload Form widget. You’ll also probably want a copy of the widget stylesheet & the Icon collection used. Place the upload form widget in a “extensions” directory inside of the extJS directory and we’re ready to begin. The stylesheet goes in the CSS directory & icons go in images/icons.

  • CSS
    • uploadform.css
  • JS
    • ext
      • extensions
  • uploads
  • upload.php
  • icons

Step 1, the deploying the widget:

We need to embed the widget inside of web page. This is done by creating an empty div that will act as the widgets container when it is instantiated through javascript. We then need to instantiate the widget in the onReady method.

The Code:
<html><head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<link id="theme" rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-default.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/extensions/Ext.ux.UploadForm.js"> </script>
<link rel="stylesheet" type="text/css" href="css/uploadform.css">
<style type="text/css">
#upform {
position: relative;
left: 14px;
width: 180px;
padding: 10px;
border: 1px solid silver;
background-color: #D3E6EA;
margin-bottom: 24px;
}</style>
</head>
<body>
<div id="upform">
</div>
<script type="text/javascript">
// set blank image to local file
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
// run this function when document becomes ready
Ext.onReady(function() {
var iconPath = 'icons/';
Ext.QuickTips.init();
var upform = new Ext.ux.UploadForm('upform', {
autoCreate: true
, url: 'upload.php'
, method: 'post'
, maxFileSize: 1048570
, baseParams: {
cmd:'upload'
, path: 'root'
}
});
}) // end of onReady
// end of file
</script>
</body>
</html>

Most important in the code is the following:

  • The div <div id=”upform”></div> is the div to be replaced by the widget.
  • url:upload.php sets the url of the server script to handle file uploads.
  • maxFileSize sets an upward limit on file size.

Next we have the server code:

<?php // Where the file is going to be placed
$target_path = "uploads/";
$output = "{\"success\" : falseThe COde }";
foreach( $_FILES as $Fileid){
$target_path = $target_path . basename( $Fileid['name']);
if( move_uploaded_file($Fileid['tmp_name'], $target_path) ) {
$output = "{\"success\" : true }";
}
}
echo $output; ?>

This simply iterates through the uploaded files, moves them into the uploads directory and returns a json object representing success or failure.

We’ll explore this in more depth in the future.  I need to stress that this is not code for deployment.  It lacks even the most rudimentary security checks and is a hackers dream.  Next time we’ll discuss implementing the upload progress bar.

Related Posts


Filed under Tutorial, extjs
1 Comment

1 Comment

Leave a Reply