File Upload Handling

[iamganeshagrawal]

I have to create a CRM portal and I want to handle file upload via html input[type=file] so it is possible to pass a file to wails backend binded function.

If yes then how?

[leaanthony]

I don't personally know but I'm sure someone has tried this. What have you tried so far?

[SheetJSDev]

Will raise separate issues on the matter

[moeyashi]

My example

go

func (a *App) SelectFile() string {
	file, err := runtime.OpenFileDialog(a.ctx, runtime.OpenDialogOptions{})
	if err != nil {
		return err.Error()
	}
	return file
}

js

const fileElement = document.getElementById("your file input id");
fileElement .onclick = () => {
  try {
    window.go.main.App.SelectFile()
      .then((result) => {
        fileElement .value = result;
      })
      .catch((err) => {
        console.error(err);
      });
  } catch (err) {
    console.error(err);
  }
}

[KiddoV]

@moeyashi I don't think your method in JS will work since for security reason the value of input with type="file" can only be set by the user, not programmatically.
This line => fileElement.value = result; will throws:

DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

[SheetJSDev]

There is a programmatic way of doing this with DataTransfer, but unfortunately it does not work in WebKit / Safari:

fileElement.onclick = async (evt) => {
  evt.preventDefault();
  try {
    // assuming go SelectFile returns a path string
    const path = await window.go.main.App.SelectFile();
    var dt = new DataTransfer();
    dt.items.add(new File(["abc"], path));
    fileElement.files = dt.files;
  }
}

Demo https://jsfiddle.net/2wuan7xy/

In Chromium, the "No file chosen" string is updated to show the path string

[cyberxnomad]

My example

go

func (a *App) SelectFile() string {
	file, err := runtime.OpenFileDialog(a.ctx, runtime.OpenDialogOptions{})
	if err != nil {
		return err.Error()
	}
	return file
}

js

const fileElement = document.getElementById("your file input id");
fileElement .onclick = () => {
  try {
    window.go.main.App.SelectFile()
      .then((result) => {
        fileElement .value = result;
      })
      .catch((err) => {
        console.error(err);
      });
  } catch (err) {
    console.error(err);
  }
}

great. resolve my problem. <3

[slo-loris]

The uploaded file has to go into a conversion process where it has to be converted to a string at JS end and has to be unmarshalled to a []byte at GO end to read the file. The conversion to string is required due to a strange behavior that I noticed while passing an array from JS to Go. All arrays passed from JS are being read as a map in GO. From my understanding this maybe because in JS, an array is basically a subset of the JS object and the counterpart of JS object in GO is a map. My workaround:

JS: (file -> array buffer -> unit8array -> string)

const file = e.target.files[0]
Promise.resolve(file.arrayBuffer())).then((ab: ArrayBuffer) => {
  const u = new Uint8Array(ab);
  SendFileFromJStoGo(`[${u.toString()}]`);
});

GO: (string -> []byte -> file)

SendFileFromJStoGo(blob string) {
  file := []byte{}
  if err := json.Unmarshal([]byte(file), &zipFile); err != nil {
    log.Fatal(err)
  }
}

For multiple file uploads:

JS: (file -> array buffer -> unit8array -> string)

const files = Array.from(e.target.files)
Promise.all(files.map((file) => file.file.arrayBuffer())).then((ab: ArrayBuffer[]) => {
  const f = files.map((file) => {
    const u = new Uint8Array(file);
    return `[${u.toString()}]`;
  });
  SendFileFromJStoGo(f);
});

GO: (string -> []byte -> file)

SendFileFromJStoGo(blobs []string) {
  for _, file := range blobs {
    file := []byte{}
    if err := json.Unmarshal([]byte(file), &zipFile); err != nil {
      log.Fatal(err)
    }

  }
}

You may notice that for conversion of unit8array into string in JS, I have used template literals & toString() method instead of JSON.stringify. This is again because of the strange behaviour of JS stringifying an unit8Array into a JS object instead of an array.

[mholt]

I'm also trying to figure out how to do this -- it's not an urgent blocking matter on my application, but it would be nice to support file drag-n-drop.

I guess I'm not clear on how wails would turn a multipart HTTP form into a native function call. It'd be pretty cool if we could make a struct with a io.Reader field and have that read from the file input.

(I admit I haven't tried this yet, but I assume it's not currently implemented, based on this discussion.)

[leaanthony]

The Optimus project has DnD. There's nteresting discussions on this topic here: microsoft/vscode#115807
https://stackoverflow.com/questions/27034897/is-there-a-way-to-pass-an-arraybuffer-from-javascript-to-java-on-android

[guiklimek]

Context

I needed to upload TLS files in a Wails + TS React software.

Solution

I did the trick inspired by the @slo-loris solution:

const file: File = event.target.files[0];
file.arrayBuffer().then((fileBuffer: ArrayBuffer) => {
    const decoder: TextDecoder = new TextDecoder("utf-8");
    return decoder.decode(fileBuffer);
}).then((filecontent: string) => {
    // Do what you want with the decoded file in a string
});

Source: https://github.com/Ambre-io/sparkplugui/blob/main/frontend/src/components/containers/FormCard.tsx#L44.

Explanations

• After the ArrayBuffer step, I'm not using a Uint8Array because it makes the encoding layers complicated and I can't get back on my feet on the backend side.

• Instead, I use the TextDecoder because I read positive comments and it seems to work well.

• The decode function gives me the file in a string which is convenient to send and use by the backend.

Best Practices & Security

1. I'm not sure it's a good thing to put the files in plaintext in memory, although the file is on the host machine in any case.

2. I'm not sure that this is a well-optimized solution, I imagine that a byte array would do better.