dojox.form.uploader.FileList

Project owner:Mike Wilcox
Author:Mike Wilcox
since:1.6

FileList automatically connects to an Uploader and detects when files are added, removed, or uploaded. The fields are added or removed from the list, and a progress bar shows during the upload. It is a simple widget that provides a list of the files currently selected by dojox.form.Uploader. It is a very simple widget, and not beautifully styled. It is mainly for test cases, but could very easily be used, extended, modified, or copied.

There is a required CSS file: resources/UploaderFileList.css.

Setup

Markup

To use the FileList, simply require it and use the appropriate data-dojo-type in an element inside or outside of a form (it is not a form element so will not affect the form action). A key property to be used is uploaderId which is the ID of the Uploader that FileList will connect to.

dojo.require("dojox.form.Uploader");
dojo.require("dojox.form.uploader.FileList");
<form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
   <fieldset>
       <legend>Form Post Test</legend>
       <input class="browseButton" name="uploadedfile" multiple="true" type="file" force="iframe" data-dojo-type="dojox.form.Uploader" label="Select Some Files" id="uploader">
       <input type="text" name="album" value="Summer Vacation" />
       <input type="text" name="year" value="2011" />
       <input type="button" id="remBtn" label="Clear" data-dojo-type="dijit.form.Button" />
       <input type="submit" label="Submit" data-dojo-type="dijit.form.Button" />
       <div id="files" data-dojo-type="dojox.form.uploader.FileList" uploaderId="uploader"></div>
   </fieldset>
</form>

Programmatic

Programmatic creation is also supported. Here the uploader property is used instead of uploaderId:

dojo.require("dojox.form.Uploader");
dojo.require("dojox.form.uploader.FileList");

var myUploader = new dojox.form.Uploader({label:"Programmatic Uploader", multiple:true, uploadOnSelect:true, url:"UploadFile.php"});
dojo.byId("myDiv").appendChild(myUploader.domNode);

var list = new dojox.form.uploader.FileList({uploader:myUploader});
dojo.byId("myDiv").appendChild(list.domNode);
Error in the documentation? Can’t find what you are looking for? Let us know!