FileInput.js 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. require({cache:{
  2. 'url:dojox/form/resources/FileInput.html':"<div class=\"dijitFileInput\">\n\t<input id=\"${id}\" class=\"dijitFileInputReal\" type=\"file\" dojoAttachPoint=\"fileInput\" name=\"${name}\" />\n\t<div class=\"dijitFakeInput\">\n\t\t<input class=\"dijitFileInputVisible\" type=\"text\" dojoAttachPoint=\"focusNode, inputNode\" />\n\t\t<div class=\"dijitInline dijitFileInputText\" dojoAttachPoint=\"titleNode\">${label}</div>\n\t\t<div class=\"dijitInline dijitFileInputButton\" dojoAttachPoint=\"cancelNode\" \n\t\t\tdojoAttachEvent=\"onclick:reset\">${cancelText}</div>\n\t</div>\n</div>\n"}});
  3. define("dojox/form/FileInput", [
  4. "dojo/_base/declare",
  5. "dojo/_base/kernel",
  6. "dojo/_base/fx",
  7. "dojo/dom-attr",
  8. "dojo/dom-class",
  9. "dojo/text!./resources/FileInput.html",
  10. "dijit/form/_FormWidget",
  11. "dijit/_Templated"
  12. ],
  13. function(declare, kernel, fx, domAttr, domClass, template, FormWidget, Templated){
  14. kernel.experimental("dojox.form.FileInput");
  15. /*=====
  16. FormWidget = dijit.form._FormWidget;
  17. =====*/
  18. declare("dojox.form.FileInput", FormWidget,
  19. {
  20. // summary: A styled input type="file"
  21. //
  22. // description: A input type="file" form widget, with a button for uploading to be styled via css,
  23. // a cancel button to clear selection, and FormWidget mixin to provide standard dijit.form.Form
  24. // support (FIXME: maybe not fully implemented)
  25. // label: String
  26. // the title text of the "Browse" button
  27. label: "Browse ...",
  28. // cancelText: String
  29. // the title of the "Cancel" button
  30. cancelText: "Cancel",
  31. // name: String
  32. // ugh, this should be pulled from this.domNode
  33. name: "uploadFile",
  34. templateString: template,
  35. startup: function(){
  36. // summary: listen for changes on our real file input
  37. this._listener = this.connect(this.fileInput,"onchange","_matchValue");
  38. this._keyListener = this.connect(this.fileInput,"onkeyup","_matchValue");
  39. },
  40. //get rid of the this.connect in _FormWidget.postCreate to allow IE to show
  41. //the file picker dialog properly
  42. postCreate: function(){},
  43. _matchValue: function(){
  44. // summary: set the content of the upper input based on the semi-hidden file input
  45. this.inputNode.value = this.fileInput.value;
  46. if(this.inputNode.value){
  47. this.cancelNode.style.visibility = "visible";
  48. fx.fadeIn({ node: this.cancelNode, duration:275 }).play();
  49. }
  50. },
  51. setLabel: function(/* String */label,/* String? */cssClass){
  52. // summary: method to allow use to change button label
  53. this.titleNode.innerHTML = label;
  54. },
  55. reset: function(/* Event */e){
  56. // summary: on click of cancel button, since we can't clear the input because of
  57. // security reasons, we destroy it, and add a new one in it's place.
  58. this.disconnect(this._listener);
  59. this.disconnect(this._keyListener);
  60. if(this.fileInput){
  61. this.domNode.removeChild(this.fileInput);
  62. }
  63. fx.fadeOut({ node: this.cancelNode, duration:275 }).play();
  64. // should we use cloneNode()? can we?
  65. this.fileInput = document.createElement('input');
  66. // domAttr.set(this.fileInput,{
  67. // "type":"file", "id":this.id, "name": this.name
  68. //});
  69. this.fileInput.setAttribute("type","file");
  70. this.fileInput.setAttribute("id", this.id);
  71. this.fileInput.setAttribute("name", this.name);
  72. domClass.add(this.fileInput,"dijitFileInputReal");
  73. this.domNode.appendChild(this.fileInput);
  74. this._keyListener = this.connect(this.fileInput, "onkeyup", "_matchValue");
  75. this._listener = this.connect(this.fileInput, "onchange", "_matchValue");
  76. this.inputNode.value = "";
  77. }
  78. });
  79. return dojox.form.FileInput;
  80. });