UploadImage.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dojox.editor.plugins.UploadImage"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dojox.editor.plugins.UploadImage"] = true;
  8. dojo.provide("dojox.editor.plugins.UploadImage");
  9. dojo.require("dojox.form.FileUploader");
  10. dojo.require("dijit._editor._Plugin");
  11. dojo.experimental("dojox.editor.plugins.UploadImage");
  12. dojo.declare("dojox.editor.plugins.UploadImage",
  13. dijit._editor._Plugin,
  14. {
  15. //summary:
  16. // Adds an icon to the Editor toolbar that when clicked, opens a system dialog
  17. // Although the toolbar icon is a tiny "image" the uploader could be used for
  18. // any file type
  19. tempImageUrl: "",
  20. iconClassPrefix: "editorIcon",
  21. useDefaultCommand: false,
  22. uploadUrl: "",
  23. button:null,
  24. label:"Upload",
  25. setToolbar: function(toolbar){
  26. this.button.destroy();
  27. this.createFileInput();
  28. toolbar.addChild(this.button);
  29. },
  30. _initButton: function(){
  31. this.command = "uploadImage";
  32. this.editor.commands[this.command] = "Upload Image";
  33. this.inherited("_initButton", arguments);
  34. delete this.command;
  35. },
  36. updateState: function(){
  37. // summary:
  38. // Over-ride for button state control for disabled to work.
  39. this.button.set("disabled", this.get("disabled"));
  40. },
  41. createFileInput: function(){
  42. var node = dojo.create('span', {innerHTML:"."}, document.body)
  43. dojo.style(node, {
  44. width:"40px",
  45. height:"20px",
  46. paddingLeft:"8px",
  47. paddingRight:"8px"
  48. })
  49. this.button = new dojox.form.FileUploader({
  50. isDebug:true,
  51. //force:"html",
  52. uploadUrl:this.uploadUrl,
  53. uploadOnChange:true,
  54. selectMultipleFiles:false,
  55. baseClass:"dojoxEditorUploadNorm",
  56. hoverClass:"dojoxEditorUploadHover",
  57. activeClass:"dojoxEditorUploadActive",
  58. disabledClass:"dojoxEditorUploadDisabled"
  59. }, node);
  60. this.connect(this.button, "onChange", "insertTempImage");
  61. this.connect(this.button, "onComplete", "onComplete");
  62. },
  63. onComplete: function(data,ioArgs,widgetRef){
  64. data = data[0];
  65. // Image is ready to insert
  66. var tmpImgNode = dojo.withGlobal(this.editor.window, "byId", dojo, [this.currentImageId]);
  67. var file;
  68. // download path is mainly used so we can access a PHP script
  69. // not relative to this file. The server *should* return a qualified path.
  70. if(this.downloadPath){
  71. file = this.downloadPath+data.name
  72. }else{
  73. file = data.file;
  74. }
  75. tmpImgNode.src = file;
  76. dojo.attr(tmpImgNode,'_djrealurl',file);
  77. if(data.width){
  78. tmpImgNode.width = data.width;
  79. tmpImgNode.height = data.height;
  80. }
  81. },
  82. insertTempImage: function(){
  83. // inserting a "busy" image to show something is hapening
  84. // during upload and download of the image.
  85. this.currentImageId = "img_"+(new Date().getTime());
  86. var iTxt = '<img id="'+this.currentImageId+'" src="'+this.tempImageUrl+'" width="32" height="32"/>';
  87. this.editor.execCommand('inserthtml', iTxt);
  88. }
  89. }
  90. );
  91. dojo.subscribe(dijit._scopeName + ".Editor.getPlugin",null,function(o){
  92. if(o.plugin){ return; }
  93. switch(o.args.name){
  94. case "uploadImage":
  95. o.plugin = new dojox.editor.plugins.UploadImage({url: o.args.url});
  96. }
  97. });
  98. }