QUploader component in Julia

Question

I have been developing an application in Julia using Genie Framework and Stipple, and the main task of this app is to implement Sobel and Prewitt operator. The problem that I am struggling with is the uploader component. So basically I am able to upload an image, on button click the image is transformed, but then when i upload another image and try to output the transformed version of it, the output that i get is still the old image. I have been trying to find the issue and I noticed that QUploader API has some methods that could help solve this problem: reset() method, or removeUploadedFiles() method, but I do not know how to call/use these functions regarding Julia syntax. Are there any solutions available?

const FILE_PATH = "public/sample.jpg"
const FINAL_PATH = "final.jpg"
#const IMGPATH = "demo.png"

model = Model |> init


on(model.process_s3) do _
    model.imageurl[] = ""
    @info "Working"

    img = FileIO.load(FILE_PATH)
    img_gray = Gray.(img)

    @info img_gray
    sobel_image = convert(Array{Float64}, img_gray)
   
    lastImage = clamp01nan.(sobel(sobel_image, sobel3_kernel_x, sobel3_kernel_y))
    save(joinpath(@__DIR__, "public", FINAL_PATH), lastImage)
    model.imageurl[] = "/$FINAL_PATH#$(Base.time())" * string(rand())

    @info model.imageurl[]
    if (model.process_s3[])
        model.process_s3[] = false
    end 
    
end


function ui(model)
    [
        page( model,
            class = "container",
            title = "Card Demo",
            partial = true,
            [
                row( # row takes a tuple of cells. Creates a `div` HTML element with a CSS class named `row`.
                    cell([h1("Edge Detection Project")]),
                )
                row(
                    [
                        cell(class="st-module", [
                            h2("Initial Image"),
                            card(
                                class = "q-pa-md row items-start q-gutter-md",
                               
                                    uploader(
                                            label = "Upload Image",
                                            method = "POST",
                                            :multiple,
                                            url = "http://localhost:8000/upload",
                                            field__name = "img",
                                            :finish="finished",
                                            ref="uploader"

                                        ),
                            
                            ),
                    
                                
                            btn("Sobel 3x3",color="primary", @click("process_s3 = true")),
                     
                            
                        ])
                        cell(class="st-module", [
                            h2("Transformed Image"),
                            card(
                                class = "q-pa-md row items-start q-gutter-md",
                                #quasar(:img, src=:imageurl, spinner__color="white", style="height: 300px; max-width: 350px")
                                imageview(src=:imageurl, spinner__color="white", style="height: 250px; max-width: 250px")

                            ),
                        ])
                    ],
                )
            ],
        ),
    ]
end

route("/") do
    html(ui(model), context = @__MODULE__)
end


route("/upload", method = POST) do
    if infilespayload(:img)
        @info Requests.filename(filespayload(:img))
        
        open(FILE_PATH, "w") do io
            write(FILE_PATH, filespayload(:img).data)
        @info File
        end
    else
        @info "No image uploaded"
       
    end 
    Genie.Renderer.redirect(:get)
end

# isrunning(:webserver) || up()

Answer 1

Replace:

"/$FINAL_PATH#$(Base.time())"

with

"/$(FINAL_PATH)?t=$(Base.time())"

Explanation:

# makes just an anchor link to an HTML document. This will obviously result in buffering the document as the browser might just look for different anchors (and not find them) yet has no motivation to re-download.

On the other hand adding the ? makes the request actually different every time (understood by browser as a different document). In result the cache will not be used - a new copy gets requested.