uploader component

content/1.geniebuilder/docs/4.UI-components.md

@@ -7,6 +7,58 @@ description: How to use the advanced UI components in Genie Builder.
 
 Genie Builder provides over 70 components and charts to build your UIs. Most of them are very easy to use, with many examples shown in the [component gallery](/framework/stipple.jl/docs/component-gallery) but some require a bit more configuration. This page explains how to use these advanced components; to see them used in an app see the [Tutorial app](https://github.com/BuiltWithGenie/GenieBuilderTutorial).
 
+## File uploader
+
+The file uploader component lets users upload files to the app.
+
+<img class="border-gray-300" style="display:block;width:75%;max-width:100%;margin-left:auto;margin-right:auto" src="/assets/docs/gb/uploader.png">
+
+
+The `Accept` field takes the list of file extensions accepted by the uploader. For instance, you can set it to `*` to accept all extensions, or `.png, .jpg, .svg` to accept only images.
+
+In the Julia code, you'll need a handler to manage the uploaded files: 
+
+```julia
+module App
+using GenieFramework
+@genietools
+const UPLOADS_FOLDER = "uploads"
+@app begin
+	@onchange fileuploads begin
+        uploaded_file = UploadedFile(fileuploads)
+        try
+            cp(uploaded_file, UPLOADS_FOLDER; force = true)
+        catch e
+            @error "Error processing file: $e"
+            @notify("Error processing file: $(uploaded_file.name)")
+        end
+	end
+end
+@page("/", "app.jl.html")
+end
+```
+
+The `fileuploads` variable is predefined and contains the information about the uploaded file. Inside the handler, the file information is cast into an `UploadedFile` struct and then the file is copied to its destination folder. If multiple files are selected by the user, this handler will be triggered once for each file.
+
+The uploader component emits events during the upload process. These can be intercepted with an event handler to perform additional processing, or send notifications to the UI as in this code:
+
+```julia
+	@event uploaded begin
+		@info "File uploaded"
+	end
+	@event rejected begin
+		@info "rejected"
+		@notify("File rejected")
+	end
+	@event finished begin
+		@info "Upload finished"
+	end
+	@event failed begin
+		@info "Upload failed"
+		@notify("File upload failed. Please try again.")
+	end
+```
+
 ## Nestable components
 
 Some components like card, scroll area or tab panel behave like containers with other components inside them. In the visual editor, you cannot drag and drop components inside these containers like you would with the row or column elements. Instead, you need to drill down into the component and add the desired content.
@@ -159,3 +211,4 @@ using GenieFramework, PlotlyBase
 end
 
 ```
+