Page MenuHomeCode
Files F944208

FileInputAuto.js
No OneTemporary
Actions

FileInputAuto.js
View Options

if(!dojo._hasResource["dojox.widget.FileInputAuto"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.widget.FileInputAuto"] = true;
dojo.provide("dojox.widget.FileInputAuto");
dojo.require("dojox.widget.FileInput");
dojo.require("dojo.io.iframe");
dojo.declare("dojox.widget.FileInputAuto",
dojox.widget.FileInput,
{
// summary: An extension on dojox.widget.FileInput providing background upload progress
//
// description: An extended version of FileInput - when the user focuses away from the input
// the selected file is posted via dojo.io.iframe to the url. example implementation
// comes with PHP solution for handling upload, and returning required data.
//
// notes: the return data from the io.iframe is used to populate the input element with
// data regarding the results. it will be a JSON object, like:
//
// results = { size: "1024", filename: "file.txt" }
//
// all the parameters allowed to dojox.widget.FileInput apply
// url: String
// the URL where our background FileUpload will be sent
url: "",
// blurDelay: Integer
// time in ms before an un-focused widget will wait before uploading the file to the url="" specified
// default: 2 seconds
blurDelay: 2000,
// duration: Integer
// The time in ms to use as the generic timing mechanism for the animations
// set to 1 or 0 for "immediate respose"
duration: 500,
// uploadMessage: String
//
// FIXME: i18n somehow?
uploadMessage: "Uploading ...",
_sent: false,
// small template changes, new attachpoint: overlay
templateString:"<div class=\"dijitFileInput\">\n\t<input class=\"dijitFileInputReal\" type=\"file\" dojoAttachPoint=\"fileInput\" />\n\t<div class=\"dijitFakeInput\" dojoAttachPoint=\"fakeNodeHolder\">\n\t\t<input class=\"dijitFileInputVisible\" type=\"text\" dojoAttachPoint=\"focusNode, inputNode\" />\n\t\t<span class=\"dijitInline dijitFileInputText\" dojoAttachPoint=\"titleNode\">${label}</span>\n\t\t<span class=\"dijitInline dijitFileInputButton\" dojoAttachPoint=\"cancelNode\" dojoAttachEvent=\"onclick:_onClick\">${cancelText}</span>\n\t</div>\n\t<div class=\"dijitProgressOverlay\" dojoAttachPoint=\"overlay\">&nbsp;</div>\n</div>\n",
startup: function(){
// summary: add our extra blur listeners
this._blurListener = dojo.connect(this.fileInput,"onblur",this,"_onBlur");
this._focusListener = dojo.connect(this.fileInput,"onfocus",this,"_onFocus");
this.inherited("startup",arguments);
},
_onFocus: function(){
// summary: clear the upload timer
if(this._blurTimer){ clearTimeout(this._blurTimer); }
},
_onBlur: function(){
// summary: start the upload timer
if(this._blurTimer){ clearTimeout(this._blurTimer); }
if(!this._sent){
this._blurTimer = setTimeout(dojo.hitch(this,"_sendFile"),this.blurDelay);
}
},
setMessage: function(/*String*/title){
// summary: set the text of the progressbar
// FIXME: this throws errors in IE?!?!?!? egads.
if(!dojo.isIE){ this.overlay.innerHTML = title; }
},
_sendFile: function(/* Event */e){
// summary: triggers the chain of events needed to upload a file in the background.
if(!this.fileInput.value || this._sent){ return; }
dojo.style(this.fakeNodeHolder,"display","none");
dojo.style(this.overlay,"opacity","0");
dojo.style(this.overlay,"display","block");
this.setMessage(this.uploadMessage);
dojo.fadeIn({ node: this.overlay, duration:this.duration }).play();
var _newForm = document.createElement('form');
_newForm.setAttribute("enctype","multipart/form-data");
var node = dojo.clone(this.fileInput);
_newForm.appendChild(this.fileInput);
dojo.body().appendChild(_newForm);
dojo.io.iframe.send({
url: this.url+"?name="+this.name,
form: _newForm,
handleAs: "text",
handle: dojo.hitch(this,"_handleSend")
});
},
_handleSend: function(data,ioArgs){
// summary: The callback to toggle the progressbar, and fire the user-defined callback
if(!dojo.isIE){
// otherwise, this throws errors in ie? FIXME:
this.overlay.innerHTML = "";
}
this._sent = true;
dojo.style(this.overlay,"opacity","0");
dojo.style(this.overlay,"border","none");
dojo.style(this.overlay,"background","none");
this.overlay.style.backgroundImage = "none";
this.fileInput.style.display = "none";
this.fakeNodeHolder.style.display = "none";
dojo.fadeIn({ node:this.overlay, duration:this.duration }).play(250);
dojo.disconnect(this._blurListener);
dojo.disconnect(this._focusListener);
this.onComplete(data,ioArgs,this);
},
_onClick: function(e){
// summary: accomodate our extra focusListeners
if(this._blurTimer){ clearTimeout(this._blurTimer); }
dojo.disconnect(this._blurListener);
dojo.disconnect(this._focusListener);
this.inherited("_onClick",arguments);
this._blurListener = dojo.connect(this.fileInput,"onblur",this,"_onBlur");
this._focusListener = dojo.connect(this.fileInput,"onfocus",this,"_onFocus");
},
onComplete: function(/* Object */data, /* dojo.Deferred._ioArgs */ioArgs, /* this */widgetRef){
// summary: stub function fired when an upload has finished.
// data: the raw data found in the first [TEXTAREA] tag of the post url
// ioArgs: the dojo.Deferred data being passed from the handle: callback
}
});
dojo.declare("dojox.widget.FileInputBlind",
dojox.widget.FileInputAuto,
{
// summary: An extended version of dojox.widget.FileInputAuto
// that does not display an input node, but rather only a button
// and otherwise behaves just like FileInputAuto
startup: function(){
// summary: hide our fileInput input field
this.inherited("startup",arguments);
this._off = dojo.style(this.inputNode,"width");
this.inputNode.style.display = "none";
this._fixPosition();
},
_fixPosition: function(){
// summary: in this case, set the button under where the visible button is
if(dojo.isIE){
dojo.style(this.fileInput,"width","1px");
//dojo.style(this.fileInput,"height",this.overlay.scrollHeight+"px")
}else{
dojo.style(this.fileInput,"left","-"+(this._off)+"px");
}
},
_onClick: function(e){
// summary: onclick, we need to reposition our newly created input type="file"
this.inherited("_onClick",arguments);
this._fixPosition();
}
});
}

File Metadata

Mime Type
text/plain
Expires
Fri, Apr 25, 20:21 (3 w, 1 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
24861
Default Alt Text
FileInputAuto.js (6 KB)

Event Timeline