How to use uploaded files

So getting files into Bubble is easy. Just use the file uploader or multifile uploader.

Doing things with those files is much less straight forward.

I’m looking for a general explanation of how to do a few basic things:

  • provide users a link to download an uploaded file
  • provide users a link to view an uploaded file in the browser
  • incorporate the content of an uploaded file (such as a *.txt or *.html) into a page in my app
  • differentiate between files in a list of files
  • differentiate between how Bubble tracks the file(s), the URL for the file(s), and the actual content of the file(s)

For example, I’ve tried uploading multiple files into a thing of type “list of files”. I can see a list of links to the files (on Amazon) in the database. I’ve setup a repeating group with a text field assuming the files would be split out in the repeating group (source is the list of files, text’s dynamic data is the file). But mostly it just displays the text of the list of files. Sometimes it will pull out one of the files alone, but I’ve got no idea how it’s deciding which file. I used a link element and was able to link to one of the files, but it takes me to an error page because Amazon isn’t happy with the XML (or something like that).

1 Like

To provide links to your users you should use a link element. Whether it download should the file or opens it in a new tab depends on the user’s settings.

Regarding how to use a list of files it’d be easier if you share a situation in a public app. It’s probably just about using a rep group that shows a list of files but it’s hard to tell like this.

I’ve sketched out an idea of what I want to be able to do

https://using-files.bubbleapps.io/version-test?debug_mode=true

I also have confusion about this subject. I would like to the user to upload files, lets say a PDF. But when I upload a pdf and preview page I don’t see anything (i.e. PDF icon or pic of file). I just figured I am doing something wrong and one day I might figure it out, but if someone knows and can show/explain - that would be much appreciated. Is this also what you are referring to Blueback?

Yes, exactly. I know that

  • users can upload files
  • I can store and find those uploaded files
  • I can insert uploaded images into my app’s pages
  • I can display some information about uploaded files, such as the amazon link (or list of links in the case of a list)

Beyond that I’m not sure how to use the files that users upload. There’s a lot more we can do, I just don’t know how to do it.

1 Like

See what I did for one of the repeating groups, that gives access to each file in a list after being uploaded in the multifile uploader.

3 Likes

Ahhhh…Thanks, I will try that. It’s so much easier when they tell you the answers:slight_smile:

Okay, so after I select several files MultiFileInput A’s value is a list of files (correct?) that the repeating group knows to separate into individual files, one for each repeating element.

But when I tell an identical repeating group to use a thing in the database as its data source, and point it to a field that is a list of files, the repeating group lumps the whole list together as one thing. The file list doesn’t get separated into individual files, one for each repeating element.

So after I save the value of the MultiFileInput to a thing in the database, how do I address the individual files?

https://bubble.io/page?name=index&id=using-files&tab=tabs-1

You can do first item, item # and a number, etc.

I see an option in the expression builder in the repeating group to add “item #” or “first item” after the search data source "dropdown [whatever]'s value ['s field with list of files].

But I don’t understand what that’s supposed to help with. I don’t want the data source for the repeating group to be a single file, I want it to be a list of files. Or am I misunderstanding something?

I don’t even get how to experiment with that because the expression builder won’t let me add “first item” without also adding a lot more stuff such as ['s URL] [is] etc.

When I set the data source of the repeating group to a list of files then the text field in each group can easily be set to “current cell’s file” which seems like exactly how it should work. The repeating group should accept a list of files and put one file into each cell.

When I change the text field from “current cell’s file” (which dumps the whole list of files) to “current cell’s file’s filename” it does display the file name correctly (instead of the whole list of files) but ONLY in the first cell of the repeating group. It doesn’t show any of the other files in the list.

https://using-files.bubbleapps.io/version-test?debug_mode=true

Can you create a simpler page with the thing that you don’t get? It’s hard to help as the page is very busy.

https://bubble.io/page?type=page&name=simple&id=using-files&tab=tabs-1

I’m trying to understand how to put a list of files from a thing in the database into each cell of a repeating group.
It’s failing in two ways:

  • it puts the entire text of the list of files into the first cell of the repeating group
  • it puts the correct information for one file into only one cell of the repeating group; nothing else for the rest of the list

From the reference page

Data Source
Actual list of things you want to display in this group. It can either be

  • the result of a search using ‘Do a search for’
  • the content of a field whose type is list of things
  • the result of an API call through the ‘Get data from an external API’

Once this is set, each cell will display one thing, and elements drawn inside the cell will be able to refer to the 'Current cell’s thing.

I think the issue is around the way you have added the files to the list in the first place.

You have used an “Add” which looks like it concatenates all the files, because if you use “Set List” (or probably Add List would work too) it works fine. If you look at some of the later entries that I added using Set List they come out in the way your would expect.

Bear in mind that the entries are going to look a bit odd you use “When value has changed” on the multi file. It will create TWO things if you drop one file and then another. What you probably want to do is have some sort custom state on the page and then do an update instead. Or just have a “Save this” button.

1 Like

Ugh, the list actions don’t even appear in the documentation.

BUT! thanks to @NigelG, we uncovered their functionality and exposed why my lists of files weren’t working.

It looks like “add” simply creates a text string out of the files but “add list” creates an actual list of separate files.

Here’s what it looks like when the data source of a repeating group is set to a field in a thing that is technically a “list of files” but in fact is just a text string. This was made using the “add” expression.

Here’s what it looks like when the data source is ACTUALLY a list of files. This was made using the “add list” expression.

1 Like

Hokay, so…it looks like the remaining difficulty with using uploaded files is that the links are being broken.

In my example I’ve got a simple little static HTML document with an image (relative link). As long as those two files are in the same folder together the image displays in the HTML just fine.

The multifile uploader putting the files into Amazon is arranging them such that the relative link no longer works.

So I need a way to upload them all into the same folder, or fix the links after they’re uploaded.

For example, here’s the HTML
https://s3.amazonaws.com/appforest_uf/f1482001346596x348967490019276740/instructions.html
https://s3.amazonaws.com/appforest_uf/f1482001346596x348967490019276740/instructions.html
and here’s the image embedded in it
https://s3.amazonaws.com/appforest_uf/f1482001345895x251914548687636860/31d9046e_8a4d_4633_9310_9dce9c0c9a57.gif

The code in the HTML is
<a href="31d9046e-8a4d-4633-9310-9dce9c0c9a57.gif" target="_blank"><img src="31d9046e-8a4d-4633-9310-9dce9c0c9a57.gif" width="200"></a>

2 Likes

Hi can you tell me how you made the uploaded files be shown as a list in one cell of a repeating group? Let me explain my question. Lets say I uploaded files “1” and “2”. I want them to be shows as a list (horizontally if possible) in one cell in the repeating group. And then I uploaded files “3” and “4” and they need to be shown as a list (horizontally if possible) in one cell in the repeating group. @emmanuel maybe you can help me.
Thanks in advance!

Can Bubble also access a csv file after upload and process the contents into a table?
Can anyone point me in the right direction?

1 Like

ok i was woundring how do i make so users can upload .rar files of any size to my bubble site i play minecraft and have mod packs and i want people to be able to download the mod packs directly from my site as a direct file download but cant figure out the dynamic link option in the workflow i hve it so that on the download page when u click on the icon of the modpack or mod it opens up a popup and has 2 options a direct download and a external i got the external woking but how do i make it for a internal download and make it so users can upload there own files as a .rar and the file of any size if anyone knows how to make this happen pls add me on dscord at DeathSoulYT#5045 and i will be willing to show my workflow for it and explain more in depth

edit: note im not sure if this made any sense so if not just add me on discord and voice call me and ill try to explain as best as i can

I got part way.

First parse the CSV (into JSON seems like the only option):

Then render using Bubble’s Excel-like HandsonTable (plugin):
https://handsontable.com/

I only got Headers to work, unfortunately. Got stuck trying to iterate through the Blocks.

Very sad.