RichFaces FileUpload and Flash Support ending in 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();
    }