Как сбросить форму ввода файла после загрузки изображения в Angular? - PullRequest
Новая
       36

Как сбросить форму ввода файла после загрузки изображения в Angular?

0 голосов
/ 18 января 2019

У нас есть 2 проблемы, связанные с выбором файлов и их загрузкой. Первая проблема заключается в том, что при загрузке изображения имя файла все еще остается на входе. Вот код. 

OnFileSelected(event) {
    const file: File = event[0];

    this.ReadAsBase64(file)
      .then(result => {
        this.selectedFile = result;
      })
      .catch (err => this.error = err);

  }

  Upload() {
    if (this.selectedFile) {
      this.usersService.AddImage(this.selectedFile).subscribe(
        data => {
          this.socket.emit('refresh', {});
          console.log(data);
          this.SettingsForm.reset()
        },
        err => err
      );
    }
  }
  ReadAsBase64(file): Promise<any> {
    const reader = new FileReader();
    const fileValue = new Promise((resolve, reject) => {
      reader.addEventListener('load', () => {
        const result = reader.result;
        if (!result) reject('Cannot read variable');
        if (this.images.length>=4) reject('You can have only 4 images');
        if (result.length * 2  > 2**21) reject('File exceeds the maximum size'); // Note: 2*2**20 = 2**21 
        resolve(reader.result);
      });

      reader.addEventListener('error', event => {
        reject(event);
      });

      reader.readAsDataURL(file);
    });

    return fileValue;
  }

HTML 

 <div>
                <div class="form-group">
                    <label for="exampleFormControlFile1">Example file input</label>
                    <input #myInput ng2FileSelect [uploader]="uploader" (onFileSelected)="OnFileSelected($event)" type="file"
                        class="form-control-file" id="exampleFormControlFile1" />
                </div>
                <p *ngIf="error"> {{error}}</p>
                <button (click)="Upload()" type="submit" class=" btn btn-default submit-btn btn-upload ">
                    <i class="material-icons">attachment</i>
                    Upload Image</button>
            </div>

Как сбросить форму после загрузки изображения? Кроме того, как я могу сделать сообщение об ошибке, например, в течение 3 секунд? Если вы выбрали неправильный файл, ошибка будет оставаться там все время, даже после добавления действительного файла. Мы думали о добавлении 

setTimeout(() => {

        }, 3000); // just example
      },

но не знаете, где его добавить? Как я могу исправить эти 2 проблемы?

1 Ответ

0 голосов
/ 18 января 2019

Вы можете сделать это так в вашем component.ts

import { ViewChild } from '@angular/core';

Затем определение переменной для ее хранения: 

@ViewChild('myInput')
myInputVariable: ElementRef;

Тогда в твоей функции 

Upload() {
    if (this.selectedFile) {
      this.usersService.AddImage(this.selectedFile).subscribe(
        data => {
          this.socket.emit('refresh', {});
          console.log(data);
          this.myInputVariable.nativeElement.value = "";
        },
        err => {
            console.log(err);
        }
      );
    }
  }

Чтобы удалить ошибку: OnFileSelected (event) { константный файл: File = event [0]; 

this.ReadAsBase64(file)
  .then(result => {
    this.selectedFile = result;
  })
  .catch (err => {this.error = err; setTimeout(()=> {this.error = ''},2000}));

}

...