Я использую Angular 6 и хочу получить изображение, которое было сброшено в div, и установить его как значение в input type="file" формы.
Итак, пользователь опускает изображение в div, файл ввода получает это изображение в качестве значения, а затем я могу отправить форму.
Это код
<form [formGroup]="imageUpload" (ngSubmit)="imageUploadSubmitted()">
<div id="imageDrop" (drop)="drop($event)" (dragover)="allowDrop($event)" #imageDrop></div>
<input type="file" formControlName="imageInput" required #imageInput id="imageInput" >
<label>
<input type="text" formControlName="imageName" placeholder="name" required >
</label>
<button type="submit" [disabled]="!imageUpload.valid">Submit</button>
</form>
и компонент
allowDrop(e) {
e.preventDefault();
}
drop(e) {
e.preventDefault();
this.imageUpload.controls.imageInput.reset();
this.imageDrop.innerHTML="";
let input = this.imageUpload.controls.imageInput as any;
input.value = e.dataTransfer.files[0];
this.readfiles(e.dataTransfer.files);
}
readfiles(files){
const reader = new FileReader();
let image = new Image();
reader.onload = (event) =>{
this.imageDrop.nativeElement.innerHTML="";
let fileReader = event.target as FileReader;
image.src = fileReader.result;
image.width = 150;
this.imageDrop.nativeElement.appendChild(image);
/*if (this.imageUpload.controls.imageInput.value==null) {
let input = this.imageUpload.controls.imageInput as any;
input.value = event.target.result;
} */
};
reader.readAsDataURL(files[0]);
}
input.value в drop всегда имеет значение, но я думаю, это тип значения wrog. Кнопка отправки формы не активна.
Тогда, возможно, мне нужно прочитать изображение, чтобы установить его в качестве значения, поэтому я перенесу логику в readfiles - проверьте закомментированный код. Это не работает, так как я получаю сообщение об ошибке result из input.value = event.target.result;. Ошибка Property result does not exist on type EventTarget
Как я могу это исправить и установить изображение в качестве входного значения файла?
Спасибо
PS, вот стекблиц