By: Sylvain BONNEFON user 02 Jun 2021 at 10:30 a.m. CDT

2 Responses
Sylvain BONNEFON gravatar
Hello, We would like to send a live recorded audio file to our gluu server to analyse this and make our authentication logic. Everything is working well **if** we select an audio file with a JSF <h:inputFile> and send it with submit btn. But what we need is not selected a file but created it from user microphone. We succefuly created the audio file blob with MediaAudio recorder. But we don't know how to use JSF to send this file to the backend. What we commonly do is to append this blob to a formData content created from the html form. But here I don't know how to set my xhr request action to #{authenticator.authenticate}. this doesn't seems to be received but the python script: form.addEventListener("click", function(event){ event.preventDefault() }); var formData = new FormData(form); formData.append('loginForm:loginVoice', _voice.data); var url = form.action; var xhr = new XMLHttpRequest(); xhr.addEventListener('load', function(event){ console.log('data sent.'); }) xhr.addEventListener('error', function(event) { alert('Request failed.'); }); xhr.open('POST', '#{authenticator.authenticate}') //also tried with form.action aka https://gluu.pre.whispeak.io/oxauth/whispeak_login.htm, without success xhr.send(formData); I didn't find any integration example with this process maybe could you direct me to a solution. I also thought about translating my blob to a base64 string but I would prefer to not do that.

By Madhumita Subramaniam staff 08 Jun 2021 at 1:08 a.m. CDT

Madhumita Subramaniam gravatar
Hi Sylviann, Use f:ajax - ``` <h:commandButton id="saveFile" onclick="initNewRequest()" value="Save file" > <f:ajax execute="@form" listener="#{authenticator.authenticate()}" render="@form messages" /> </h:commandButton> ``` In the javascript function which gets called onclick ``` function initNewRequest() { // stay on the same page window.location = window.location.href.split(“?”)[0]; // you can append the blob here } ``` In the <f:ajax> tag, * execute="name" – By this assignment, the form component which has id "name" will be sent to the server for processing. In case of multiple components, it is required to separate the ids with the space in between. * render="output" - Subsequent to the Ajax request this will refresh the component which has id "output". * Here after completion of the Ajax request <h:outputText> component will be refreshed. I hope this helps you Have a good day!

By Sylvain BONNEFON user 08 Jun 2021 at 10:40 a.m. CDT

Sylvain BONNEFON gravatar
Hi madhu, My problem is that I want to send some data that are programmaticaly generated and that are not in a form component