1

I am using AngularDart, Angular 5 and Dart 2. I have a file input with a change action.

<input #inp type="file" id="upload_image" accept="image/*" (change)="handleUpload($event)">

This is my handleUpload.

Future<void> handleUpload(html.Event e) async {
    e.preventDefault();
    picfile = (e.target as html.FileUploadInputElement).files[0];

}

I want to be able to take the html.File object and convert it to an io.File object so that I can base64 encode it and pass it in my JSON to my server. I do something similar in my Flutter app. Not sure what I am missing, but nothing seems to get the html.File object to be an io.File object.

Any help would be greatly appreciated.

Robert
  • 5,347
  • 13
  • 40
  • 57
  • There is no such thing as an `io.File` in the browser. That exists only for server/console/mobile apps, you can still read the bytes to encode them. – Günter Zöchbauer Jul 06 '18 at 09:46
  • Thanks, any guidance on how to do that, have not found any way to get it to a base64 String. – Robert Jul 06 '18 at 09:51

1 Answers1

1
import 'dart:html';
...

var blob = e.target as html.FileUploadInputElement).files[0];
var reader = new FileReader()..readAsArrayBuffer(blob);
await reader.onLoadEnd.first;
List<int> /* or Uint8List */ result = reader.result;
print(result);

Here you should be able to base64 encode (https://stackoverflow.com/a/36529793/217408)

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567