Как передать (установить) строковые данные файла при редактировании в formState с использованием компонента загрузки NgRx и Kendo UI (Angular)? - PullRequest
Новая
       98

Как передать (установить) строковые данные файла при редактировании в formState с использованием компонента загрузки NgRx и Kendo UI (Angular)?

1 голос
/ 07 августа 2020

Для большего контекста я пытаюсь установить состояние формы с ранее добавленными данными в сетку, когда я нажимаю кнопку «Изменить» в своем приложении. Проблема в том, что все настроено, за исключением загруженного файла, но я передаю его с помощью функции setEditFormState из файла'front.ts 'в мой' component.ts '

 setEditFormState(selectedRow: SrvUrgentCareAdviceSheets) {
    this.store.dispatch(
      new SetValueAction(ADD_EDIT_ADVICE_SHEET_FORM_ID, {
        ...addEditAdviceSheetInitialValue,
        title: selectedRow.title,
        category: box(selectedRow.category),
        description: selectedRow.description,
        isDeleted: selectedRow.deleted,
        fileName: selectedRow.file,
        id: selectedRow.id,
      }),
    );
    console.log('SELECTEDROW', selectedRow);
  }

И он вызывается в моем component.ts следующим образом: 

  ngOnInit(): void {
    this.facade.getCategoryItems();
    if (this.isEdit && this.openPayload) {
      this.facade.setEditFormState(this.selectedRow);
    }
    console.log(this.selectedRow);
  }

Компонент загрузки файла отдельный и выглядит следующим образом: 

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { FileInfo, SelectEvent } from '@progress/kendo-angular-upload';
import { SrvFileUploadResults } from '@servelec/data-types';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'srv-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FileUploadComponent implements HttpInterceptor {
  @Input()
  isMultiple = false;

  @Output()
  uploaded: EventEmitter<SrvFileUploadResults> = new EventEmitter<SrvFileUploadResults>();

  uploadSaveUrl = 'mockUpload';
  public myFiles: Array<FileInfo> = [];

  onSelect(ev: SelectEvent) {
    ev.files.forEach((file: FileInfo) => {
      console.log(file.httpSubscription);
      console.log(file.state);
      if (file.rawFile) {
        const reader = new FileReader();
        this.myFiles.push(file);
        reader.onloadend = () => {
          const dataUrl = reader.result as string;
          this.uploaded.emit({
            filename: file.name,
            content: dataUrl.substring(dataUrl.indexOf(',') + 1),
          });
        };
        reader.readAsDataURL(file.rawFile);
      }
    });
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url === this.uploadSaveUrl) {
      const success = of(new HttpResponse({ status: 200 }));
      return success;
    }

    return next.handle(req);
  }
}

Здесь вы можете видеть, что устанавливаются все поля, кроме загруженного файла.

...