I am a total newbie here. I did quite a bit of searching to try and figure this out on my own, but didn’t really quite find what I need.
I’ve uploaded files in my test environ and can see these files in the Data > File Manager. I want to display all the files posted in a repeating group, but am having trouble actually making that happen. I’m hoping someone here can step me through how to make something simple like this happen.
Thank you in advance!
-Andy Fox
In your workflow after uploading the file, associate the uploaded file’s URL (which you can get via your FileUploader element) with a field of a “thing” in your Bubble App.
Store the above “thing” in your Bubble App database.
After that create a repeating group to display all the above “things” which will have a field consisting of the URL of your files.
(This method will only work for any new files uploaded by you)
Cheers!
Thank you @andrewjohnson56782! I got this to work. Is there any way to also port the File Name and File Size from the File Manager over into corresponding fields in a database? I didn’t see a way to do that…
Thanks again!
af
Any files that are uploaded within the Bubble editor, will be accessible via the Data > File Manager section as you know. But these uploads wont be accessible in the ‘Do a search for’ as they are not stored as a database record in your data types.
Unfortunately there is no way to port over files in bulk, over to a custom data type. You will have to manually enter this data into a data entry or build a very simple interface on the front end that will allow you to upload the file, get the size of the file through the uploader and generate a string as a name.
Thanks @luke2. I know I can only grab some of this info at the time of upload, not retroactively, which i’m presently OK with. The fields of “File Name”, “Type”, and “Size” are all written to the File Manager, so presumably I should be able to grab those at the time of upload and also write them to a database table if desired (having fields created in advance for them to be written to). But when i try to associate the fields with available variables, they aren’t there. I’m sure I’m overlooking something, any guidance would be appreciated. Thanks!
So from an interface perspective we have a input field (can be used to set the name of the file), the file uploader element (default Bubble’s version) and the button element to trigger our workflow:
For the Data Types, there is the ‘File’ which contains three fields:
(best to set ‘Size’ to a number rather than text)
On the button we’re have the workflow ‘When this button is clicked’ and it will create a new thing for the data type.
So the size will be collected from the ‘Fileuploaders’ element and stored as a number. The name will have to be entered manually, as it can’t detect the state of the file being uploaded. The Bubble file uploader is pretty basic and just does the essentials really of uploading the file without collecting any meta data related to that file. The File is saved from the ‘Fileuploaders’ element as well.
As for the type of file, again the default Bubble Fileuploader I believe cannot collect the file format to define the type unfortunately. A few suggestions come to mind, for instance you could have a dropdown that lists the file formats e.g. PDF, JPG, DOCX and the user would select. It depends who is managing this data I suppose.
Alternatively you could post here on the forum a new idea for Bubble to allow selecting the state of the file name and type to be able to be used within the Bubble Editor for workflow usage. There are plugins on Bubble that allow more advanced functionality for uploading files that might be worth checking out if you wish to pull in more data about the file or even to allow for more than a single upload at once. Hope this helps anyhow.
@luke2 Thank you for this, very helpful.
So I see I can get the file size from a FileUploader component but not a Multi-File Uploader. So yeah, a few requests I could see being valuable would be, for both of those components, to be able to extract at least the File Name, Size (this already available in FileUploader) and Type to be saved in a database table.
Is it possible, either via some kind of calculated field in the db or via an expression, to extract just part of the URL? If so, I can probably write something to get at least the File Name and Type that way…
Glad it was helpful.
Yes that’s correct, with using the added plugin of the Multi-file Uploader, it doesn’t have a built in state to total the size of the file uploads yet, again could be worth a post in this forum, under Ideas as I could see its use for sure.
Well its a little strange, although you cannot directly fetch and save the file name into a data type’s field e.g. text field - you can make a call when doing a search to get the file’s name, example below on a simple ‘Do a search for’ on a field that is set to image (I imagine it would work the same for a field set to file):
And this will pull out my-file-name.jpg
Its a shame this state cannot be collected when saving as a data type…at the moment.
For collecting the file name and extension on an expression, I don’t think it would be possible to use the truncated modifier as the length of the text is always a variable, but maybe something possible using Regex, not something I’m versed up in and may be worth a separate topic asking just this (who knows maybe a post already out there asking the same question).
Actually, stumbled across something interesting - a workaround for collecting the file name and also making it easier (with Regex) to get the file format.
What you could do is the following (I haven’t fully tested nor tried on a ‘File’ field within a data type):
So the usual click button to upload the file
But then the 2nd action, is a ‘Make changes to’ which uses the result of Step 1 to find the file (or photo in this case) to fetch the file name and then you can then save the file name into a separate field, like so:
Again for the file format you could use this same technique but either use Regex or possibly the truncate although file formats can sometimes be 2, 3 or 4 letters e.g. .docx, .ai, .pdf
This is great, thanks @luke2. And it worked! Below are the two regex expressions I used (I’m not a regex expert, so could be better ways…). The File Type regex does respect 3 or 4 character file extensions. Not texted at scale, but initial tests look good.
Awesome - glad you’ve got it working with the Regex expressions too.
Its greate that we found a way to insert file data into a THING but how can we retrieve the file or allow user to download the file , is it possible .?
