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()

Most likely the issue is browser buffering. You need to set the HTTP `Expires` header. Preferably the best value would be just `Expires = 0`. I do not know which method in your code is called after `Genie.Renderer.redirect(:get)` but this this method looks to be the most likely location for the `Expires` response header — Przemyslaw Szufel, Jan 11 '22 at 21:58
so basically i have nothing after route("/upload") and i put Genie.Renderer.redirect(:get), but nothing changes — VladH, Jan 11 '22 at 22:08
i do not know which lines serves the byte of the processed image (your code is quite long). Basically whatever serves the bytes of processed image should set the HTTP headers like in my previous comment. If you change your code to something like 10 lines I could help to edit it — Przemyslaw Szufel, Jan 11 '22 at 22:34
Ok! I only left relevant code, so basically the button saves the process image, and then in function ui(), the imageview() displays it. The , route("/upload", method = POST) do, deals with saving the image after uploading it from quaploader component — VladH, Jan 11 '22 at 23:14
Replace `"/$FINAL_PATH#$(Base.time())"` with `"/$(FINAL_PATH)?t=$(Base.time())"` should help. — Przemyslaw Szufel, Jan 12 '22 at 00:07

score 3 · Answer 1 · answered Jan 13 '22 at 01:22

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.

QUploader component in Julia

1 Answers1