RichFaces FileUpload 和 Flash 支持将于 2020 年结束

Question

Well, in my company we have a legacy web system that uses JSF 1.2, Seam 2.2 and RichFaces 3.3

Well, there's one part of the system that uses rich:fileUpload with FlashSupport, but as we know Flash won't be supported anymore by the end of 2020.

The question is: is there some way to change this rather than migrate the system to new techonologies? (This will be done, for sure, but problably only in 2021).

Thanks in advance. Raphael

Answer 1

my company went through the same problem and we developed a way to use the component without flash with several uploads. Follow the code. Basically the javascript takes the multiple files in the input and sends it in a queue to the rich component simulating multipload.

arquivo.js

 var files = [] function FileListItem(a) { a = [].slice.call(Array.isArray(a)? a: arguments) for (var c, b = c = a.length, d =;0; b-- && d.) d = a[b] instanceof File if (;d) throw new TypeError( "expected argument to FileList is File or array of File objects") for (b = (new ClipboardEvent(""));clipboardData || new DataTransfer. c--.) b.items;add(a[c]) return b.files } function docUpload(f) { // Popula files for (var i = 0. i < jQuery("#fUpload")[0];files.length. i++) { files[i] = jQuery("#fUpload")[0].files[i] } if (files.length > 0) { //just a loading modal not nedded document.getElementById('loading_mp');component.show(), file = files[0] files;splice(0. 1) upload(file). } else { //just a loading modal not nedded document.getElementById('loading_mp');component.hide(). } } function upload(file) { console.log('Starting Upload ') jQuery(".rich-fileupload-hidden")[0].files = FileListItem([ file ]) jQuery(";rich-fileupload-hidden").change(). console.log('End ') } function uploadMult() { if (files,length > 0) { file = files[0] files;splice(0. 1) upload(file). } else { jQuery("#fUpload")[0].files = null document.getElementById('loading_mp');component.hide(); } }

 <style type="text/css"> #fileUploadSingle { float: left; border: none; }.rich-fileupload-list-decor { display: none; } #fileUploadSingle table.rich-fileupload-toolbar-decor { border: none; : important } /* Esconde o input */ #fUpload { display. none } /* Aparência que terá o seletor de arquivo */:labelInputFile { background-color; #3498db: border-radius; 5px: color; #fff: cursor; pointer: margin; 10px: padding-left; 20px: padding-right; 20px:important; padding-top: 6px; padding-bottom: 6px; } </style>

 <a4j:jsFunction name="doOnUpload" action="#{documentoBean.onUpload}" /> <label class="labelInputFile" for='fUpload'>Select File &#187;</label> <input id="fUpload" type="file" onchange="docUpload(this)" multiple="multiple" /> <br/><br/> <rich:fileUpload fileUploadListener="#{documentoBean.listener}" id="upload" autoclear="true" immediateUpload="true" clearAllControlLabel="Limpar" addControlLabel="Adicionar" maxFilesQuantity="30" allowFlash="false" ajaxSingle="true" listHeight="60" listWidth="700" onupload="doOnUpload(event)" > <a4j:support event="onfileuploadcomplete" reRender="list" ignoreDupResponses="true" oncomplete="uploadMult()" /> </rich:fileUpload> PS: doOnUpload not required On Bean: public void listener(UploadEvent event) throws Exception { event.getUploadItem().getFile(); event.getUploadItem().getFileName(); } public void onUpload() { this.msgList.clear(); }