PrimeNG - Отправка данных формы и данных FileUpload нажатием кнопки - PullRequest
Новая
       8

PrimeNG - Отправка данных формы и данных FileUpload нажатием кнопки

0 голосов
/ 29 августа 2018

В нашем Angular-проекте у нас есть форма, содержащая поля формы и PrimeNG FileUpload, и мы попытались отправить данные формы с выбранными файлами.

Мы изучили документацию и множество примеров в Интернете, но ни один из них не отвечает нашим требованиям (отправка формы и файлов с помощью кнопки «Сохранить», а не кнопки «Автоматическая загрузка» или «Загрузка файла»).

Мы попробовали следующий подход, добавив каждое свойство модели к файлам в запросе на загрузку файла, но я думаю, что должен быть более разумный способ, добавив файлы к свойствам модели в методе Save (в файле .ts).

Html 

<p-fileUpload name="files" url="/MyController/Save" 
    (onBeforeSend)="onBeforeSendFile($event)" 
    (onUpload)="onUploadFile($event)" 
    (onError)="onErrorFile($event)" 
    (onBeforeUpload)="onBeforeUploadFoto($event)" 
    multiple="multiple" 
    chooseLabel="Select" 
    uploadLabel="Load" 
    cancelLabel="Cancel">
</p-fileUpload>

.ts: 

//code omitted fo brevity

//at here we append model properties to the array in file upload request:
onBeforeUploadFoto(event: any) {
    event.formData.append('id', this.entityId);
    event.formData.append('name', this.entityName);
}

Ответы [ 2 ]

0 голосов
/ 27 сентября 2018

Вы можете использовать событие onSelect: 

<p-fileUpload name="files" (onSelect)="dealWithFiles($event)"></p-fileUpload>

А в твоем компоненте: 

dealWithFiles(event) {
    files = event.originalEvent.files;
    // Deal with your files
    // e.g  assign it to a variable, and on submit add the variable to your form data
}

Поскольку вы хотите загрузить вручную (с помощью другой кнопки), затем скрыть кнопку загрузки по умолчанию, добавив: 

<p-fileUpload name="files" showUploadButton="false" (onSelect)="dealWithFiles($event)"></p-fileUpload>
0 голосов
/ 02 сентября 2018

Добавьте ссылку на ваш p-fileUpload, чтобы вы могли вызывать для него метод upload из вашего Сохранить метода. 

<p-fileUpload #fileInput name="files" ...

и 

@ViewChild('fileInput') fileInput: FileUpload;

// ...

// save method manually called by clicking on your Save button
save() {
    if (this.fileInput && this.fileInput.files.length > 0) {
        this.fileInput.upload();
    }
}
...