Author: pyaschenko Date: 2008-06-24 07:04:07 -0400 (Tue, 24 Jun 2008) New Revision: 9173 Added: trunk/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/swf/ trunk/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/swf/fileUploadComponent.swf Modified: trunk/ui/fileUpload/src/main/config/component/fileUpload.xml trunk/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/js/FileUpload.js trunk/ui/fileUpload/src/main/templates/org/richfaces/fileUpload.jspx Log: http://jira.jboss.com/jira/browse/RF-3549 flash mode doesn't work under IE yet Modified: trunk/ui/fileUpload/src/main/config/component/fileUpload.xml =================================================================== --- trunk/ui/fileUpload/src/main/config/component/fileUpload.xml 2008-06-24 10:50:21 UTC (rev 9172) +++ trunk/ui/fileUpload/src/main/config/component/fileUpload.xml 2008-06-24 11:04:07 UTC (rev 9173) @@ -371,6 +371,15 @@ <description> ID (in format of call UIComponent.findComponent()) of Request status component </description> </property> + + <property> + <name>allowFlash</name> + <classname>java.lang.String</classname> + <description> + Attribute which allow the component to use the flash module that provides file upload functionality [false, true, auto]. + </description> + <defaultvalue>"false"</defaultvalue> + </property> <property elonly="true" hidden="true" existintag="false" exist="false" > <name>size</name> Modified: trunk/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/js/FileUpload.js =================================================================== --- trunk/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/js/FileUpload.js 2008-06-24 10:50:21 UTC (rev 9172) +++ trunk/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/js/FileUpload.js 2008-06-24 11:04:07 UTC (rev 9173) @@ -142,7 +142,11 @@ upload: function() { this.setState(FileUploadEntry.UPLOAD_IN_PROGRESS); this.setupProgressBar(); - this.uploadObject.submitForm(this); + if (this.uploadObject.isFlash) { + this.uploadObject._flashSubmitForm(this); + } else { + this.uploadObject.submitForm(this); + } }, setupProgressBar: function () { @@ -435,6 +439,7 @@ this.actionUrl = actionUrl; this.options = options || {}; + this.initFlashModule(options.allowFlash); this.initEvents(); this.setupAutoUpload(); this.checkFrame(); @@ -561,7 +566,7 @@ this.progressBar.options.onerror = function (e) { this.errorHandler(e); }.bind(this); - this.progressBar.enable(); + if (!this.isFlash) this.progressBar.enable(); }, errorHandler: function (e) { @@ -638,16 +643,18 @@ remove: function(entry) { entry.clear(); + if (this.isFlash) this._flashRemoveFile(this.entries.indexOf(entry)); this.entries = this.entries.without(entry); }, _selectEntryForUpload: function() { + this.uploadIndex = -1; var l = this.entries.length; for (var i = 0; i < l; i++) { var entry = this.entries[i]; if (entry.state == FileUploadEntry.READY || entry.state == FileUploadEntry.INITIALIZED || entry.state == FileUploadEntry.UPLOAD_CANCELED) { - + this.uploadIndex = i; return entry; } } @@ -680,7 +687,8 @@ this.runUpload = false; if (this.activeEntry) { - this.activeEntry.stop(); + if (this.isFlash) this._flashStop(); + else this.activeEntry.stop(); } return false; }, @@ -1026,7 +1034,181 @@ parentForm.enctype = oldEnctype; this.getFileSizeScript(entry.uid, this.formId); } + }, + + initFlashModule: function () + { + var allowFlash = this.options.allowFlash; + if (allowFlash=="auto" || allowFlash=="true") + { + var object = document.createElement('div'); + object.innerHTML = '<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_p... alt="Get Adobe Flash player" /></a>'; + var oid = this.id+":flashContainer"; + object.style.display = allowFlash=="true" ? "" : "none"; + object.id = oid; + this.element.appendChild(object); + this.isFlash = swfobject.hasFlashPlayerVersion("8.0.0"); + if (this.isFlash) + { + var flashvars = {fileUploadId:this.id}; + var params = {allowscriptaccess:true}; + var attributes = {}; + swfobject.embedSWF(this.options.flashComponentUrl, oid, "0", "0", "8.0.0", false, flashvars, params, attributes); + + this.currentInput.parentNode.innerHTML = '<input type="text" style="cursor: pointer; right: 0px; top: 0px; font-size: 10em; position: absolute; padding: 0px" class="rich-fileupload-hidden" id="'+this.id+':file" name="'+this.id+':file"></input>' + this.currentInput = $(this.id + ":file"); + + //this.currentInput.type="text"; + //this.currentInput.onchange = null; + this.currentInput.onmousedown=(function (){this.createFrame();}).bind(this); + this.currentInput.onclick = this._flashOnOpenFileDialog.bind(this); + } + + } + }, + + _flashOnOpenFileDialog: function (event) { + // call flash + this.flashComponent.browse(); + return false; + }, + + _flashSetComponent: function() { + var flashId = this.id+":flashContainer"; + this.flashComponent = (document[flashId]) ? document[flashId] : window[flashId]; + this.flashComponent.setProperties({ + acceptedTypes: this.acceptedTypes, + noDuplicate: this.options.noDuplicate, + maxFiles: this.maxFileBatchSize }); + }, + + _flashAdd: function(files) { + if (this.disabled) return; + + for (var i=this.entries.length; i<files.length;i++) + { + this.currentInput.value = files[i].name; + this.createFrame(); + var newEntry = new FileUploadEntry(this.currentInput, this); + this.entries.push(newEntry); + + if (this.runUpload) { + newEntry.setState(FileUploadEntry.READY); + } else { + newEntry.setState(FileUploadEntry.INITIALIZED); + } + + var newUpload = this.currentInput.cloneNode(true); + newUpload.onclick = this._flashOnOpenFileDialog.bind(this); + //this.currentInput.onchange = null; + this.currentInput.style.cssText = "position: absolute; right: 0px; top: 0px; display: none; visibility: hidden;"; + newUpload.id = this.id + ":file" + (this.idCounter++); + newUpload.value = ''; + this.currentInput.parentNode.appendChild(newUpload); + this.currentInput = newUpload; + } + + /*if (this.runUpload) { + this.upload(); + }*/ + }, + + _flashRemoveFile: function(index) + { + this.flashComponent.removeFile(index); + }, + + _flashFireEvent: function(eventName, object) + { + if (this.events[eventName]) + { + this.element.fire("rich:"+eventName, object); + } + }, + + _flashSubmitForm: function(entry) { + + entry.uid = encodeURIComponent(Math.random().toString()); + + var action = this.actionUrl + (/\?/.test(this.actionUrl) ? '&_richfaces_upload_uid' : '?_richfaces_upload_uid') + '=' + encodeURI(entry.uid) + "&id=" + this.id + "&_richfaces_upload_file_indicator=true&_richfaces_send_http_error=true"; + + var size = this.flashComponent.uploadFile(this.uploadIndex, action); + if (this.labelMarkup) { + this.progressData = new ProgressData(size); + } + + }, + + _flashStop: function() { + if (this.uploadIndex>=0) { + this.flashComponent.cancelUploadFile(this.uploadIndex); + this._flashError(FileUploadEntry.UPLOAD_CANCELED); + } + }, + + _flashOnProgress: function (bytesLoaded, bytesTotal) + { + var entry = this.entries[this.uploadIndex]; + if (entry) { + var p = bytesLoaded*100/bytesTotal; + this.progressBar.setValue(p); + if (entry.state == FileUploadEntry.UPLOAD_IN_PROGRESS) { + var content = this.labelMarkup.invoke('getContent', this.progressData.getContext(p)).join(''); + entry.statusLabel.innerHTML = content; + } + } + }, + + _flashOnComplete: function () { + this.finishProgressBar(); + this._flashSetEntryState(this.uploadIndex, FileUploadEntry.UPLOAD_SUCCESS); + +/* + !!! var restr = iframeDocument.getElementById('_richfaces_file_upload_size_restricted'); + + } else if (restr) { + this.callback(FileUploadEntry.UPLOAD_SIZE_ERROR); + */ + }, + + _flashHTTPError: function (httpErrorNumber) { + if (httpErrorNumber==413) this._flashError(FileUploadEntry.UPLOAD_SIZE_ERROR); + else this._flashError(); + }, + + _flashIOError: function () { + this._flashError(); + }, + + _flashOnSecurityError: function (errorString) { + this._flashError(); + }, + + _flashError: function (error) + { + this.finishProgressBar(); + this._flashSetEntryState(this.uploadIndex, (error==undefined ? FileUploadEntry.UPLOAD_TRANSFER_ERROR : error)); + }, + + _flashSetEntryState: function (entryIndex, state) { + var entry = this.entries[entryIndex]; + if (entry) { + entry.setState(state); + } } }); +FlashFileUpload = { + getComponent: function(componentId) { + return $(componentId).component; + }, + ASTrace: function (msg) + { + console.log(msg); + }, + ASAlert: function (msg) + { + alert(msg); + } +} \ No newline at end of file Added: trunk/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/swf/fileUploadComponent.swf =================================================================== (Binary files differ) Property changes on: trunk/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/swf/fileUploadComponent.swf ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Modified: trunk/ui/fileUpload/src/main/templates/org/richfaces/fileUpload.jspx =================================================================== --- trunk/ui/fileUpload/src/main/templates/org/richfaces/fileUpload.jspx 2008-06-24 10:50:21 UTC (rev 9172) +++ trunk/ui/fileUpload/src/main/templates/org/richfaces/fileUpload.jspx 2008-06-24 11:04:07 UTC (rev 9173) @@ -17,12 +17,15 @@ /org/richfaces/renderkit/html/scripts/utils.js, /org/richfaces/renderkit/html/scripts/json/json-dom.js, /org/richfaces/renderkit/html/js/FileUpload.js, + /org/richfaces/renderkit/html/js/swfobject.js, /org/richfaces/renderkit/html/js/progressBar.js, /org/ajax4jsf/javascript/scripts/form.js, </h:scripts> <f:clientId var="clientId" /> + <f:resource var="flashComponent" name="/org/richfaces/renderkit/html/swf/fileUploadComponent.swf"/> + <jsp:scriptlet> <![CDATA[ Integer max = initMaxFilesCount(context, component, clientId); @@ -118,6 +121,13 @@ <div class="rich-fileupload-list-overflow #{uploadListClass}" style="width: 100%; height: #{listHeight}" id="#{clientId}:fileItems"></div> + <jsp:scriptlet> + <![CDATA[ + String useFlashComponent = ((String) component.getAttributes().get("allowFlash")).trim().toLowerCase(); + variables.setVariable("allowFlash", useFlashComponent); + ]]> + </jsp:scriptlet> + <span> <script type="text/javascript"> FileUpload.CLASSES = { @@ -177,7 +187,7 @@ onclear : #{this:getAsEventHandler(context, component, "onclear")} }; - new FileUpload('#{clientId}','#{formId}','#{actionUrl}',#{this:getStopScript(context, component)}, #{this:getFileSizeScript(context, component)} ,'#{this:getProgressBarId(context, component)}', FileUpload.CLASSES, #{this:getLabelMarkup(context, component)}, #{maxCount}, events, #{component.attributes["disabled"]}, #{this:getAcceptedTypes(context, component)}, {'autoclear':#{component.attributes["autoclear"]},'autoUpload':#{component.attributes["immediateUpload"]},'noDuplicate':#{component.attributes["noDuplicate"]}},#{this:_getLabels(labels)},#{this:getChildrenParams(context, component)}); + new FileUpload('#{clientId}','#{formId}','#{actionUrl}',#{this:getStopScript(context, component)}, #{this:getFileSizeScript(context, component)} ,'#{this:getProgressBarId(context, component)}', FileUpload.CLASSES, #{this:getLabelMarkup(context, component)}, #{maxCount}, events, #{component.attributes["disabled"]}, #{this:getAcceptedTypes(context, component)}, {'autoclear':#{component.attributes["autoclear"]},'autoUpload':#{component.attributes["immediateUpload"]},'noDuplicate':#{component.attributes["noDuplicate"]}, 'allowFlash':'#{allowFlash}', 'flashComponentUrl':'#{flashComponent}'},#{this:_getLabels(labels)},#{this:getChildrenParams(context, component)}); </script> </span> <f:call name="utils.encodeEndFormIfNessesary" />