Hi all. This is a UX / design question. Does anyone know a way that I can modify the default behaviour of the File Uploader control so that it does NOT display the uploaded name inside the button?
I’m able to display the uploaded file name outside the button … but however I try to manipulate the ‘placeholder’, I can’t get it to change from displaying the filename once a file has been uploaded.
If it’s impossible, I’ll work around it. But just want to know whether it can be done. Any help appreciated
@heraghty interesting solution. Exactly what I need, except if you click directly on the text that’s laid on top of the file uploader it doesn’t activate the file uploader. Any ideas?
I suppose I could make the file uploader transparent and lay the text behind it. But I’m trying to make my file uploader look like a solid blue button that says “upload”.
@brad.h Unfortunately I am out of any better solutions here. As I mentioned, the solution above is quite hacky.
I do find the overall File Uploader UX quite sub-optimal. Functionally it is good, but the experience has strange quirks.
Number one is the decision to force the filename to be the button label (which an inspect reveals is not the same thing as the button placeholder).
But there is also strange a strange cursor behaviour on the button itself – hover over the left side of the placeholder and it’s the default cursor; move to the right of the placeholder and it switches to the pointer (hand) cursor.
There are lots of little UX anomalies like these in Bubble that make it difficult to work with from a design perspective – despite it being a powerful way to rapidly prototype and build software.
Thought I’d follow up as I opened a bug ticket with support and after a nice back and forth, received this reply :
Instead of having to implement a workaround to show the “clean” filename, it may help to allow an option for showing this in the editor.
As such, I have submitted this to the team as a feature request. We dedicated engineering hours to rolling out new features every month, updating the releases page. This will be considered in our future batches.
I’m displaying the “File Uploader’s value’s file name” below the uploader, and this of course displays the file name as expected (with spaces, not %20s).
I completely understand that Bubble, in the background, must use url encoding and therefore %20s when saving files that have spaces in their names, and this is expected when accessing the Uploader’s value’s URL.
The desired effect can be had by setting the Font Size of the Uploader to 0 when the Uploader’s value is not empty and then have a conditional text showing the File Uploader’s value’s file name, I went ahead and made a demo:
The question is then, can Bubble display the File Uploader’s value’s file name instead of the truncated url as default behavior? This would be less confusing to the end user, as what they see displayed would match what they have uploaded, and it would make it easier to use the Uploader without having to hack it with the font size/conditional text element work around.
If others +1 this, perhaps it will be considered in an earlier, rather than later, batch.
