Goal: We want to have a Windows File Explorer app-like where one can select a folder from the dropdown and then the folder will automatically show up in the grid (gridview component). Once you click the button, View Content, it will show up the subfolders. Same process, View Content button > Folders > until you reach the files. We will be getting the source from our S3 bucket.
Steps:
Already connected to S3 and the list of folders from our bucket shows up in the dropdown.
If you select a folder, it will reflect in the grid.
But if you click the button, it's not working.
Details: We are using the latest version since we just started using the tool a week ago. I don't do coding so I rely on chatGPT. I cannot find video tutorial and documentation as well that lines with what we want to achieve.
Screenshots: The dropdown and the gridview component.
I just created a simple setup, it is not entirely working yet, but should help you in the right direction by following these steps:
1 - Configure prefix of 'Folder' (or anything like that) in S3 bucket for your folders.
2 - Create a S3 resource that will 'List all files in a bucket' with the chosen Prefix configured and transform the result to only return the parent objects.
Above code will filter for items with size == 0 (as this is a folder) and will only grab the parent folder names where only 1 '/' is stored as key.
3 - Bind this result to the 'Select' component
4 - Create a variable 'SelectedFolder' which is going to store the selected folder and return it's child objects. On change of select bind the value to the variable.
5 - Create another S3 List all files in a bucket resource, but use {{ selectedFolder.value }} as prefix to filter. This will work dynamically based on the selected folder (either from select or from grid)
6 - Bind the result of the 2nd S3 query to the grid
7 - On click of the button in the grid, it will either set 'SelectedFolder' with the current item.Key, only if the size == 0, or it will trigger the DownloadFile resource when the size > 0. This will also hold a variable 'SelectedFileKey' which is also set whenever the button is clicked for an item where Size is bigger then 0.
In addition to this, you might want to filter out the current selected folder via the transformer so that only the actual files within the folder is shown. You can achieve this by using return data.Contents.filter(item => item.Key !== {{ selectedFolder.value}} );
You'd want to know wether it is an filter or file, so that's why I am saying you should add some sort of prefix in the folder name to determine wether it is a folder or a file and use the S3 resource to filter based on the prefix.
If you'll download my application, you can see how it works. If that's still not clear let me know!
Hello!
Already downloaded and uploaded to our Retool account the app.
However, it's not working. Maybe I really don't know what I am doing.
What I did on the app you created:
Changed the data source to ours.
Settings: List all files in bucket, added our bucket name.
Just that.
Honestly, the step 1, Configure prefix of 'Folder' (or anything like that) in S3 bucket for your folders - I don't understand this. And the rest of the steps. A lot of terms that I do not understand.
I added {{ SelectedFileKey.value}} for the value under selectedFileKey and then {{ selectedFolder.value }} for selectedFolder.
GetParentFolders and GetSubFolders queries prefix is {{ selectedFolder.value }}
Right now, what's working are:
I can download the file.
When I select the main folder, all folders including the files will show up in the gridview which we only want the folder.
I'm sorry if I am too slow and not understanding things. Thank you so much for your help.
It's working now. I have to read your instructions for many times while applying it on the app.
The only thing that is not working is:
Every time I selected a folder from the dropdown, all the contents inside the folder shows up including the files (audio, image, etc.)
Awesome that it seems to work for you now! Showing all files is exactly like the Windows navigator works as well > you open up a folder, see all contents inside including other folders and files and then proceed to the next folder if required.
How would you like to differentiate when files should be shown (as this is what you're searching for) and when it should not be shown? Perhaps I can assist you with that.
Hello! Thanks again for your help.
Now what we want to do is that the select 1 dropdown should show all the main folders under our S3 bucket. And then when we choose one of the main folders, the subfolders of it should show up in select2 dropdown, then when we select one of the subfolders from select2, the subfolders will show up in select3 dropdown. And lastly, once we select a folder from select3 dropdown, all contents )can be folders, image, audio, etc) will show up in the gridview.
I hope I make sense. I'm really sorry because I don't understand the tool that much. But you are already a big help.
Assuming there will be 3 levels within the folders, i've added 2 more selects that are filtered to show child folders of the parent folder. The final grid is then displayed whenever there are 3 folders selected and will display all of the content inside that folder.
Thanks for putting in so much work on this, @RetoolPV! And don't hesitate to follow up with any additional questions, @Mariz.
Based on what you've done so far, it seems that the only edge case you may still want to handle is variable levels of nesting. This may not even be an issue, though, if your buckets are consistently organized.
Hi! Sorry for the very late reply. Been busy these past few days.
I really appreciate your help. I will work on my Retool task next week.
And then I'll send you an update.
Hello! Finally tried the updated file you sent and it worked!
The only thing not working is when I get to the last folder in which when I select it from the dropdown, the content should show up in the grid but it only showed the folder and when I click the view content button, nothing happen.
I attached a screenshot of the query, the elements, and then the button settings. Thank you again for all your help! This means a lot.
I believe you're copying the resources on the page, which is good, but you should make sure that the final resource you're calling to get the files from the final folder will return everything else besides the current folder's name. You can do this by adding the following to the transform results field;
