How to read file from disk and pass it to WebAssembly using Go?

Question

Specifically, how to connect <input type="file"> with this function in Go? I know there is "syscall/js" package, but I didn't find any examples with file reading.

func parseCSVFile(filePath string) []LabelWithFeatures {
    fileContent, _ := ioutil.ReadFile(filePath)
    lines := bytes.Split(fileContent, newline)
    numRows := len(lines)

    labelsWithFeatures := make([]LabelWithFeatures, numRows-2)

    for i, line := range lines {
        // skip headers
        if i == 0 || i == numRows-1 {
            continue
        }
        labelsWithFeatures[i-1] = NewLabelWithFeatures(bytes.Split(line, comma))
    }
    return labelsWithFeatures
}

Answer 1

I've wanted a satisfactory answer for this for years, finally figured it out the other night.

You can essentially boil the whole thing down to:

    fileInput := document.Call("getElementById", "fileInput")

    fileInput.Set("oninput", js.FuncOf(func(v js.Value, x []js.Value) any {
        fileInput.Get("files").Call("item", 0).Call("arrayBuffer").Call("then", js.FuncOf(func(v js.Value, x []js.Value) any {
            data := js.Global().Get("Uint8Array").New(x[0])
            dst := make([]byte, data.Get("length").Int())
            js.CopyBytesToGo(dst, data)
            // the data from the file is in dst - do what you want with it
            

            return nil
        }))

        return nil
    }))

I wrote a little blog post about it here with the working WASM code running at the bottom

https://donatstudios.com/Read-User-Files-With-Go-WASM

Answer 2

You can't really access the filesystem in the browser. wasm_exec.js is used to execute Go webassembly in the browser, it mocks out some filesystem functionality, but I don't think it's very useful to you: https://github.com/golang/go/blob/9d23975d/misc/wasm/wasm_exec.js#L41-L73

The file read method even returns an error by default.

You mentioned <input type="file">. You can get bytes from an uploaded file: Getting byte array through input type = file. You could then pass those bytes to the Golang wasm runtime.

Define a global syscall/js callback in your Go code and call it from the browser to pass the bytes down to the Go runtime.

I would look for blogposts on how to define callbacks from within the Go runtime. Also look out for changes between go 1.11 and 1.12, the api has breaking changes.