FilePicker 패키지를 통해 File 업로드를 구현할 수 있겠지만 FilePicker는 일반 html의 파일업로드하기 버튼이 라인 위젯에서도 보이는 이슈를 보이고 있다,
하지만 FileUploadInputElement 를 통해 해당 문제를 해결하고 구현을 할 수 있으며 FilePicker 패키지를 사용하지 않아 프로젝트의 용량 및 성능을 높일 수 있다.
final FileUploadInputElement input = FileUploadInputElement();
input..accept = '.png,.jpg,.jpeg'; /// 확장자 설정
input.click();
input.onChange.listen((event) {
File file = input.files.first;
print("이름 : ${file.name}");
print("타입 : ${file.type}");
print("?? : ${file.relativePath}");
print("시간 : ${file.lastModifiedDate}");
print("사이즈 : ${file.size}");
});
이미지 띄우기 방법은 먼저 FileReader 객체를 생성 후 readAsDataUrl 함수의 매개 변수로 파일을 넣어준 다음에 reader.onLoadEnd.listen안에서 Base64Decoder 클래스를 통해 변환하면 된다.
/// Uint8List로 변환
final FileUploadInputElement input = FileUploadInputElement();
input..accept = '.png,.jpg,.jpeg';
input.click();
input.onChange.listen((event) {
File file = input.files.first;
print("이름 : ${file.name}");
print("타입 : ${file.type}");
print("?? : ${file.relativePath}");
print("시간 : ${file.lastModifiedDate}");
print("사이즈 : ${file.size}");
final reader = FileReader();
reader.onLoadEnd.listen((_) {
setState(() {
[변수] = Base64Decoder().convert(reader.result.toString().split(",").last);
});
});
reader.readAsDataUrl(file);
});