Help with Js2Bubble and HTML

bekhruzbekmirzaliev · 2024-09-02T15:58:24.044Z

I want to create my custom image uploader with HTML and in HTML i need to pass 2 things to Js2bubble : image_name and base64 image String.

I am having problem with this. When i try to use the value of the js2bubble, it is empty. I am using toolbox plugin for js2bubble and here is my html code:

<!-- Include Google Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<style>
  /* Hide the default file input button */
  #customFileInput {
    display: none;
  }

  /* Style the icon */
  #customFileIcon {
    background-color: transparent; /* No background color */
    color: black; /* Set icon color */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Explicitly set the font size of the icon */
  #customFileIcon .material-icons {
    font-size: 38px; /* Change this value to adjust icon size */
  }

  /* Change appearance when hovering over the icon */
  #customFileIcon:hover {
    color: gray; /* Optional: change color on hover */
  }
</style>

<!-- Hidden file input -->
<input type="file" id="customFileInput" accept="image/*" onchange="fileSelected(event)" />

<!-- Custom label acting as a button with an icon -->
<label for="customFileInput" id="customFileIcon">
  <span class="material-icons">image</span>
</label>

<script>
  function fileSelected(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      
      reader.onloadend = function() {
          const base64String = reader.result
              .replace("data:", "")
              .replace(/^.+,/, "");
          const imageName = file.name;

          // Combine the base64 string and the image name into a single string
          const combinedData = base64String + '|' + imageName;

          // Pass the combined data to Bubble using the JavaScript to Bubble plugin
          bubble_fn_file(combinedData);
      };
      
      reader.readAsDataURL(file); // Read the file as a data URL
  }
</script>

lowcodehelpers · 2024-09-05T13:50:13.937Z

Hey @bekhruzbekmirzaliev, to transfer data from an HTML page to a Bubble application, you’ll need to implement a JavaScript script within your Bubble workflow. This script should:

Retrieve the desired data from the HTML page.
Store the retrieved data in a custom state within your Bubble application.
Save the custom state to your database."

ihsanzainal84 · 2024-09-06T11:10:13.354Z

Have you checked Publish Value in your J2B element?

bekhruzbekmirzaliev · 2024-09-07T05:59:28.547Z

it seems i didn’t. So i need to setup my html element and add js2bubble element and in js2bubble element check publish value and then ? should also do something with output ? I need 2 values so how can i get them ?

bekhruzbekmirzaliev · 2024-09-07T06:00:11.813Z

can you provide me with a sample please

ihsanzainal84 · 2024-09-07T06:44:40.018Z

If you don’t check publish value, the plugin won’t output any.

system · 2024-11-11T15:59:17.239Z

This topic was automatically closed after 70 days. New replies are no longer allowed.