multi-file upload with dojo

If you use dojo, you might want a nice file-uploader.

Good news is that such a widget exits! Bad news is that it’s not very easy to use, at least for now.
I will try here to gather what I’ve learnt while using it (or at least while trying to make it work). Maybe someone will find it useful.

Before we start

As of now (dojo 1.3.1), I’m using trunk version of dojox.fileUploader (it has more features and greater flexibility than version available in dojo 1.3.1).
=> you will need to download trunk version too (http://archive.dojotoolkit.org/nightly/) if you want example to work (and we cannot use cdn for nows, too bad).

Quickstart

We will use dojox.fileUploader widget.

First we will do a basic file-upload form. No progress bar, just a plain file-upload.

Currently it works as follow: the node you pass through when creating the widget is what will be the upload button.
If flash is detected, flash uploader is automatically instanciated (with its nice multi-file selection) otherwise regular js uploader is created (you can force either of them by providing ‘force’ option with value set to ‘html’ or ‘flash’).

So what’s important:

  • provided node at instanciation (will be upload button)
  • ‘fileListId’ option (id of node/div that will store list of selected files for upload)
  • ‘uploadUrl’ option (make it point to your server-side script)
  • have an upload button and connect it to your widget upload function upon click event

Here is all the js you need:

dojo.require("dojox.form.FileUploader");

dojo.addOnLoad(function() {
 var uploader = new dojox.form.FileUploader({
   isDebug:true,
   deferredUploading:true,
   uploadUrl:'ReceiveFile.php',
   uploadOnChange:false,
   force:'',
   fileListId:'attachmentList'
  },
  "addFiles"
 );

 dojo.connect(dojo.byId('uploadFiles'), 'onclick', uploader, 'upload');
});

Here is a live example, with both flash / non-flash version of the uploader: simple multi-file uploader with dojo

note1: to remove a file from the selection, simply click on it
note2: as server-side script, I’ve used script dojox/form/resources/RecieveFile.php (which name I corrected due to typo and adding a dump into text file to ensure data were received on server side).

Well, big thanks to mike wilcox for this great widget.

Progress bar

If you want to have a nice progress bar on your multi-file uploader (when working in js mode since flash mode is dealt by flash already), read on the next post: dojo + multifile uploader + progressbar

sources

3 Comments: Trackback URL | Comments RSS

  1. Valdelievre Says:

    Hi. I've got an alternative to dojox.form.FileUploader , i developped my own upload mecanism. You can see a demo here : http://developers.sirika.com/mfu/
  2. land rover Says:

    i copy and paste http://www.qc4blog.com/rd_coding/dojo-uploader/simple-uploader.php to a.htm include external js files like this And of course, i have dojo.js, simple-uploader.js But when i open a.htm, nothing happens when i click on SELECT FILES TO UPLOAD... What's wrong with my code?
  3. land rover Says:

    Due to site restrictions, i wrote [ instead of Please be considerate. i copy and paste http://www.qc4blog.com/rd_coding/dojo-uploader/simple-uploader.php to a.htm include external js files like this [script type="text/javascript" src="dojo.js"][/script] [script type="text/javascript" src="simple-uploader.js"][/script] And of course, i have dojo.js, simple-uploader.js But when i open a.htm, nothing happens when i click on SELECT FILES TO UPLOAD... What's wrong with my code?

Post a Comment

Your email is never published nor shared. You're allow to say what you want...