Uploading file on icon click

Questions
1

I want to trigger file upload sequence on some icon click for example attachment icon. I do not want to use default file uploader. How can I achieve this

2

Add an HTML element to a page (1px x 1px) with the following code inside it:

// To allow users to upload files (remove any file type from "accept" that you don't want to allow)
<input type="file" id="myInput" accept=".pdf, .doc, .docx, .txt" style="display: none;">

// To allow users to upload any type of image
<input type="file" id="myInput" accept="image/*" style="display: none;">

// To allow users to upload particular types of images
<input type="file" id="myInput" accept=".jpg, .jpeg, .png, .gif, .webp" style="display: none;">

Add an icon to the page and add the workflow to it: When the icon is clicked, “Run JavaScript” (Toolbox plugin feature) with the following code:

document.getElementById('myInput').click()

This way, you will allow users to upload files but, importantly, the file won’t be uploaded to the Bubble server, and you won’t have a file URL. The file will be deleted on page refresh. You will need additional JS code to work with this file.

3

Great this worked but now how to get the file from HTML?

4

As I said:

If the above is not the case and you want to have upload functionality under an icon click, you can:

  1. Search for some plugins that will have this functionality
  2. Use a small UI trick:
  • Create a Group (Container layout=Align to parent)
  • Add your icon to this Group
  • Add a native bubble image/file uploader element (uploader) to this Group. Make sure its width/height is 100% of the parent and set its opacity to 0%

By doing this, users will only see the icon, but when they click on it, they’ll actually be clicking on the uploader and will be able to upload their files.

Since I believe that fewer plugins the better, I would go with either the custom JS or UI trick option. Choose what suits you best.

1 Like