Insert an instance of the File to Base64 Element on your page in the Editor. Also use the 'Base64 Upload to Bubble' Action to upload a base64 file to your bubble app and get the uploaded file's S3 URL on the 'Uploaded File URL' state of the plugin element.
To Upload from Base64 to Bubble's File Manager,
1. Run the 'Base64 Upload to Bubble' Action
2. Here, pass the file name and the File as base64 (this should be the part after '...base64,' in your file's data URI. You can get it through this plugin via the File Base64 state)
3. If successful, this will set the plugin's 'Uploaded Base64 URL' state as this upload's resulting URL. use this in database actions or for visual elements thereafter
This Plugin also gives you 2 options to convert File URLs to base64:
1. From the plugin Element
2. From the action provided by the Plugin Element
OPTION1: To use directly from the plugin URL, provide the File URL in the element properties. For example on the Element properties via dynamic data:
File URL : FileUploader A's value's URL
This will generate the base64 data every time the FileUploader's value is changed.
OPTION2: To use from the action, call the 'File to Base64' action in the workflow as required. You can then provide the File URL value in the action's properties editor via dynamic data. It will update and set the element's states whenever the action is called.
Available states of this element:
1. Full Base64 String (the entire base64 string including content type metadata for use in <img> tags)
2. File Base64 (Just the base64 encoded image as a string)
3. File Content Type (Just the content type metadata. eg: image/png or application/pdf)
4. Uploaded File URL (this is the S3 url of the last file uploaded via the Upload Base64 File action).
Try it on the editor:
https://bubble.io/page?type=page&name=file_to_base64&id=blur-apps-playground&test_plugin=1653645972850x203266694854213630_current&tab=tabs-1