File Upload : Listing previously uploaded files in Edit mode. How?

[anespa]

Dear Friends,

I use PrimeNG File Upload in my Angular 6 project and upload files to a master record without any problem. On the other hand, when I edit this master record, I also let users to remove previously added files and add new files by using PrimeNG File Upload.

I think it is good idea to list previously added files (retrieving from Database) of the record as a list item outside of File Upload and display Delete icon right sides of each one. But if there is a possibility to display these previously added files on PrimeNG File Upload, I would like to use File Upload to list them besides adding new ones. So, my questions:

1) Is it possible to use PrimeNG File Upload for such an Edit Scenario and list files (from Database) on it?

2) Is it weird to list previously added files on File Upload element instead of HTML on the popup windows in Edit mode?

Any help would be appreciated.

My html for upload is

Code: Select all

<div class="col-md-6">

      <div class="form-group row">

        <div class="col-md-6">
          <p-fileUpload name="husbandPhoto" url="{{uploadUrl}}" accept="image/*" maxFileSize="1000000" chooseLabel="{{ 'CommonMarriage.HusbandPhoto' | translate}}"
            [previewWidth]="128" [showUploadButton]="false" [showCancelButton]="false" #husbandPhoto>

            <ng-template pTemplate="content">
              <ul>
                <li>Upload only images in JPEG format.</li>
                <li>Prescribed size width * height</li>
              </ul>
            </ng-template>

            <ng-template let-file pTemplate="file">
              <div class="ui-fileupload-row">
                <div><img [src]="file.objectURL" width="128px" height="160px" /></div>
              </div>
            </ng-template>

          </p-fileUpload>
        </div>

        <div class="col-md-6">
          <p-fileUpload name="wifePhoto" url="{{uploadUrl}}" accept="image/*" maxFileSize="1000000" chooseLabel="{{ 'CommonMarriage.WifePhoto' | translate}}"
            [showUploadButton]="false" [showCancelButton]="false" #wifePhoto>

            <ng-template pTemplate="content">
              <ul>
                  <li>Upload only images in JPEG format.</li>
                  <li>Prescribed size width * height</li>
              </ul>
            </ng-template>

            <ng-template let-file pTemplate="file">
              <div class="ui-fileupload-row">
                <div><img [src]="file.objectURL" width="128px" height="160px" /></div>
              </div>
            </ng-template>

          </p-fileUpload>
        </div>

      </div>
    </div>

I need to show the previous uploaded file preview on this place .

Advise me

Thanks

Anes

[padagalingam]

I am also waiting for knowing this Edit mode feature. I think, we can use 'files' attribute for loading previously uploaded image. let me try. if i found solution, will inform you

Thanks

[free270]

Code: Select all

<p-fileUpload #form1  (uploadHandler)="myUploader($event, form1)"></p-fileUpload>

myUploader(event, form){
   // ....
   form.clear();
}