I look for a coach to POST an audio file to an API

[j_rochereau]

HI there,
Julien from France.
All said in the title.
I am quite new with bubble. Not with no-code.

I have understood several people on the forum faced (and solved?) the issue. I would need a little bit of help to set it up in my bubble app.

Waiting forward to hearing from you, BR,

J.

[redvivi]

Salut Julien,

Quel est le cas d’usage ?

[j_rochereau]

Salut Redvivi,
le cas d’usage est, dans l’app, d’enregistrer des notes audio, et de les envoyer sur cette API:

speechbrain/asr-crdnn-commonvoice-fr · Hugging Face

J’y arrive sans probleme avec Postman, mais n’arrive pas à paramétrer correctement le connecteur API Bubble (je ne reçois qu’un message d’erreur).

[redvivi]

Quel est le message d’erreur ?
Peux-tu faire une capture écran de tes paramètres ?

[j_rochereau]

[j_rochereau]

[j_rochereau]

Si je comprends bien la doc de l’API (et de sa surcouche), le malformed sound file error veut dire que ce qu’on essaie de lui envoyer n’est pas perçu comme un fichier son.

[redvivi]

Là tu envoies du texte, et en l’occurrence le chemin vers le fichier wav.

J’imagine que l’API demande plutôt le fichier encodé en Base64, ou éventuellement une URL?

[j_rochereau]

Merci de ton coup d’oeil.
L’API demande un fichier encodé en UTF-8.
J’ai vu que @aaronsheldon a fait un plugin pour convertir dans ce codage là.
Comment ferais tu du coup pour poster le fichier ?

[rowntreerob]

API connector - Post.body as a binary file

JS Fetch.Post binary body is a standard way of pushing a binary file around in the context of APIs where the browser and using a “form” do not apply. getting the file as a blob/ArrayBuffer from the storage layer should be a requirement sending the above blob/ArrayBuffer as the body of a POST should be a requirement re - Sending file via API connector - #9 by aaronsheldon implement the equivalent of curl -X POST --data-binary @filePath

uses traditional approach (native html , native fetch.post ) in conjunction with bubble widget feature to acommodate native code.

for legacy devs working with an api designed to handle req’s from JS client using fetch.post , this approach can be useful

[j_rochereau]

Thanks for the feedbacks.
It means i have to copy a part of the JS code of the API in the code here, that’s right ?

Does the adress of the API shall be typed in this code?

thanks
JR

[Jici]

Peux tu poster toute ta configuration dans postman? Je crois que tu devrais être en form data et pas en raw. Mais avec la configuration postman, ça aidera

[rowntreerob]

the sample at jsfiddle is intended for developers , using legacy code as an explainer for how to inject clips of legacy code into the esoteric bubble feature that allows for legacy code (js, html ) to be bound to bubble elements in the design dashboard .

There exist aspects of legacy code that in some edge cases may be useful to devs who just need a very specific use case in the genl context of bubble app…

one such case is interacting with legacy apis expecting binarys in the body of a fetch.POST operation.

If you are not comfortable working at the function level with native Javascript in the functional context of a web app, then this solution is not for you.

[j_rochereau]

Thanks for the explanations !

here is the postman Request, in cURL format (but i saw i can have it in many others, like http)
Please note that it works in Postman using the “Binary” option
:

curl --location --request POST ‘https://api-inference.huggingface.co/models/speechbrain/asr-wav2vec2-commonvoice-fr’ \

–header ‘Authorization: Bearer api_org_EKwsdsdsdsezezdszdzezefX’ \

–header ‘Content-Type: audio/wave’ \

–header ‘Cookie: AWSALB=Mwkn0ljrWdkv5aNvB9iB2D0ZXyAarDEWImNrfT8p2SUzcFXNsat6NJs9zPw4hPfrRQ+a1HsFStBazn/6bFrAau3YTUcPvVym6DvQosKe03CJEQwL91L2m7Nvdm52; AWSALBCORS=Mwkn0ljrWdkv5aNvB9iB2D0ZXyAarDEWImNrfT8p2SUzcFXNsat6NJs9zPw4hPfrRQ+a1HsFStBazn/6bFrAau3YTUcPvVym6DvQosKe03CJEQwL91L2m7Nvdm52’ \

–data-binary ‘@/C:/Users/j_roc/OneDrive/CAPSERAT/PROJETS PERSOS/ VOICE2SPEECH/TESTS/News rubbees mars-MINI.wav’

[bestbubbledev]

Any API related stuff @lowcodekrish

[rowntreerob]

background : Uploading a binary file using fetch - Stack Overflow

short answer is that if it works in Postman ,it will work using the native html / js implementation in bubble. Assuming a long lease period on value of cookie.AWS… you can add to the native html fetch, appropriate headers for content-type, Cookie, Authorization and it will work. Note that the content-type should be a function of the file type and corresponding file extension
from the UI file selector . ie if you choose media type video the content-type in the header sets dynamically . if you only upload wav types then you can hard code it.

find someone to help you who knows a bit more about native development and about the way webapps natively move files around. ie CURL & javascript Fetch

[rowntreerob]

fwiw… bubble is ages behind in the general area of nodes streaming io and pipes.

Im not suggesting that bubble is obligated to master features for remoting streams and for remoting any object that can be buffered .

when you have a local binary
when u have a URI to a streamable binary
you should not even have to think about binding the stream readible local object to any service anywhere expecting an input stream in the form of a fetch.Post.body or a piped.readableStream

API Connector - Post Body above was not attempt to hijack this thread or to go off on a teck-tangent. Rather, some more tech toolkits contain powerful tools for remoting any bufferable binary and anyone using Postman/ Curl tools is operating in that more tech sphere.

at min. bubble needs to at least know whats going on out there among users and among people posting faq’s like " if i can do this with a binary using ( curl , wget, fetch, postman ) and its so easy there, then why isn’t it easier to do in bubble?"

my 2 cents from San Fran