How to save uploaded file using primeng fileupload?

Question

I'm trying to use primeng fileupload. But I'm not able to find out how to save the uploaded image on some given path. I get uploadedFiles object but I'm not able to save the file to a given path.

<p-fileUpload multiple="multiple"
                                  name="DefaultFileUploadFileInput[]"
                                  [url]="uploadUrl"
                                  accept="image/*"
                                  maxFileSize="1000000"
                                  (onUpload)="onUpload($event)">

                        <ng-template pTemplate="content">
                            <ul *ngIf="uploadedFiles.length">
                                <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
                            </ul>
                        </ng-template>
                    </p-fileUpload>

Angular Code:

uploadUrl: string;
uploadedFiles: any[] = [];

    constructor(
        injector: Injector,
        private demoUiComponentsService: DemoUiComponentsServiceProxy
    ) {
        super(injector);
        this.uploadUrl = AppConsts.remoteServiceBaseUrl + '/DemoUiComponents/UploadFiles';
    }

    // upload completed event
    onUpload(event): void {
        for (let file of event.files) {
            this.uploadedFiles.push(file);
        }
    };

It's not clear what your problem is. Do you have PHP or some backend code at this url "AppConsts.remoteServiceBaseUrl + '/DemoUiComponents/UploadFiles'" that will accept the file and save it on your server? — Dirk Wessels

Nitin Wahale Nitin Wahale · Accepted Answer · 2018-09-27T07:42:35

in name atrribute we define name that is used in the server site to identify the files . use following code .. rename name="DefaultFileUploadFileInput[]" to name="DefaultFileUploadFileInput"

<p-fileUpload                     multiple="multiple"
                                  name="DefaultFileUploadFileInput"
                                  [url]="uploadUrl"
                                  accept="image/*"
                                  maxFileSize="1000000"
                                  (onUpload)="onUpload($event)">

                        <ng-template pTemplate="content">
                            <ul *ngIf="uploadedFiles.length">
                                <li *ngFor="let file of uploadedFiles"> 
                                 {{file.name}} - {{file.size}} bytes</li>
                            </ul>
                        </ng-template>
 </p-fileUpload>

in API add following code..

/*** File Upload
     * @throws JSONException ***/
        @RequestMapping(value = "/UploadFiles/", 
            method = RequestMethod.POST, 
            produces = MediaType.APPLICATION_JSON_VALUE,
            consumes="multipart/form-data")
          public @ResponseBody String uploadFileOperation(
                  @RequestParam("DefaultFileUploadFileInput") MultipartFile[] files) throws IllegalStateException, IOException, JSONException {
         String filePath="xyz/Test FileUpload/";
         File saveDir = new File(filePath);
               if(!saveDir.exists())
               {
                   saveDir.mkdirs();
               }
 for (MultipartFile file : files) {
                        File f= new File(filePath,file.getOriginalFilename());
                        String Filename=file.getOriginalFilename()
 try {
                                file.transferTo(f); //Transfer or Saving in local memory 
                            }catch (IOException e) {
                                        e.printStackTrace();
                                    }
//your logic here
}
            return "file upload done"
          }

How to save uploaded file using primeng fileupload?

1 Answers