How To Pass A Blob Created In Javascript To JSF Bean

My client side code deals with canvas drawing, and i generate a blob zip file of the shapes using javascript. I want to use the zip at the server side. However, I am not able to f

Solution 1:

You can pass blob from JavaScript to JSF bean by encoding blob to some string representation, for example, to Base64 and passing it to Primefaces p:remoteCommand, sending it to managed bean and finally decoding it there back to byte array.

Procedure would be following:

1. Convert blob to Base64

    function prepareAndSendBlobToManagedBean(){
               //zipped file as blob
               var blob=...;
               ///convert blob to Base64 string
               var blobBase64String=convertToBase64(blob);
               sendBlobBase64([{name : 'blobBase64Name', value : blobBase64String}]);
           }
   

(for converting from blob to base64 reffer to this accepted answer)

2. Add p:remoteCommand to your page

   <p:remoteCommand name="sendBlobBase64" 
                    actionListener="#{yourBean.onBlobBase64Sent}" process="@this"/>
   

3. In managed bean named yourBean you can catch it with

   public void onBlobBase64Sent() {
      String blobBase64 = (String)FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("blobBase64Name");
      byte[]blob=java.util.Base64.getDecoder().decode(blobBase64);
   }