Genie Discord forum

Is there a widget or control in Stipple for selecting a file from a pop up window? I looked in the Genie builder list of widgets and did not see anything like that, but I might not be looking in the right place. I wanted the user to be able to choose a cab file to put into a data table .

Uploader function

@kungfupanda007 Is Uploader function a widget or something that I can put on an app? I just looked at all of the Genie Builder blocks, but did not see an "uploader" widget. But is there a way to include this in the app anyway?

Search QUploader

Ahh got you. Okay will do. Thanks for the tip.

We have an uploader component, see the CSV uploader tutorial to learn how to use it

https://genieframework.com/blog/how-to-build-a-data-app-with-a-CSV-file-uploader/

@Pere thanks for the link, I was just reading over it. Sorry, I am not much of a web page developer, so I have some basic questions. So if I want to adapt the code in the tutorial to work with a Genie Builder app, seems like I can put that code into the app.jl file--while the tutorial references the ui.jl file. So for Genie Builder I use the no-code tool to create the controls and place them on the UI. This tool then generates the HTML and I can refer to those components through the app.jl file. In the tutorial, seems like the components are placed through the ui.jl file, and not in the HTML. For example this code:

[
    heading("{{title}}")
    row([
        cell(class="col-md-12", [
            uploader(label="Upload Dataset", accpt=".csv", multiple=true, method="POST", url="http://localhost:8000/", field__name="csv_file")
        ])
    ])
] |> string

So is it more appropriate to actually create a "title and content" widget or a "selector" widget--which will place the control in the HTML, and then update the inline properties as in the code above? I just was not sure which widget/control to use.

In the tutorial we are using the low-code API. In this case we use app.jl for the app logic, and ui.jl to define the UI

If you use Genie Builder, then we can have app.jl for the logic and app.jl.html for the UI. The no-code editor writes HTML code to app.jl.html every time a new component is added to the canvas

In the no-code editor we are restricted to the available components, which unfortunately does not include the CSV uploader

Still, you can embed Julia code in html files with <% code %>, which will be executed and its return value rendered. For instance, to include an uploader you can add this to app.jl.html : <% uploader(label="Upload Dataset", accept=".csv", multiple=true, method="POST", url="http://localhost:8000/", field__name="csv_file") %>

@Pere that is wonderful. Okay, I can give that a try and see what happens :).

we do the same in this tutorial to add a table

https://youtu.be/FQFD2YYqtpA?t=641

hello @Pere I was taking a look at this post because i also want to analyse data from CSV files that are uploaded into the GUI. When i add the julia lines to app.html and then edit again in app.jl.html and save the changes it overwrites all changes and the julia code i added disappears, what should i do? Have you found any other more efficient way to analyse data from different CSV files? Thank you. If you remember it happened to me when i wanted to add a table too.

That's strange @itzi , the Julia code should stay there. I have tried pasting the uploader code above into an existing page and it worked

See that the Julia code appears in the nocode editor, but it is rendered on the page. Did you click on the reload button after editing the HTML? Otherwise, if you edit the file and go back to the nocode without reloading, saving new changes will overwrite your edits to the HTML file

Thank you very much, I will try again! but the uploader does not work I am unable to load files because when i do there is a ⚠️ sign, is there a size limit? or is it because it does not work in the preview mode?

it really does not work, when i re save it the code just appears without rendering, and even to do that i had to save it stop the server and restart it then it worked for a bit and the moment i made a change and saved it it was gone again

my only solution is that the user copies the paths to folders manually 😅 but if you have any other ideas

because when i save the html code changes

@Itzi could the issue issue be that in your HTML the <% %> delimiters are being replaced by &lt, and same for other characters like ". When the renderer loads the HTML it does not recognize the delimiters and hence it simply displays the text in the page. could it be because of some extension in your VSCode install?

hi @Pere this substitution happens when I save changes on top of the insert so i associate it with the saving of the no code editor because everything else works alright. Are you able to add components to the UI and save it or you have to add these inserts at the end?