Ng2-file-Upload Upload.all() not uploading file to API #1170

New Issue

2021-03-07T13:37:22Z

DeveBj commented

2021-03-07 13:37:22 +00:00

(Migrated from github.com)

Am trying to Upload Files mp4 and jpg extensions, I have 2 separate Fileuploader instance, with some custom validation imposed on 2 separate FileUploader, I have a upload button, onclick of the upload button am pushing Files in 2 FileUploader to a Single FileUploader and calling the inbuilt method upload all to upload the file to Server, but it's not hitting the server (API Service), I hereby paste the code below what I have tried please help me to resolve this issue. @Domainv

File Uploader Initialization

uploader: FileUploader;
    coverImageUploader: FileUploader;
    mergedFileUploader: FileUploader;
    options: FileUploaderOptions = {
        url: URL,
        authToken: `Bearer Token`,
        authTokenHeader: 'authorization',
        isHTML5: true,
        method: 'POST',
        itemAlias: 'file',
        headers: [{
            name: 'refId',
            value: ''
        }, {
            name: 'userId',
            value: ''
        }, {
            name: 'roleId',
            value: ''
        }]
    }

        this.uploader = new FileUploader(this.options);
        this.coverImageUploader = new FileUploader(this.options);
        this.mergedFileUploader = new FileUploader(this.options);

Pushing Files yet to be uploaded from 2 FileUploader to another FileUploader

let files: any = []  
     files.push(this.uploader.getNotUploadedItems().filter((f: FileItem) => !f.isUploading))  
     files.push(this.coverImageUploader.getNotUploadedItems().filter((f: FileItem) => 
     !f.isUploading)) 

var merged = [].concat.apply([], files);
       merged.forEach(e => {
           e.options.headers.find((o, i) => {
                           if (o.name === 'refId') {
                   e.options.headers[i] = {
                       name: 'refId',
                       value: e.formData.reduce(r => r).RefId

                   };
                   return true;
               } else if (o.name === 'userId') {
                   e.options.headers[i] = {
                       name: 'userId',
                       value: user.userId.toString()
                   };
                   return true; 
               } else if (o.name === 'roleId') {
                   e.options.headers[i] = {
                       name: 'userId',
                       value: user.roleId.toString()
                   };
                   return true; 
               }
           })
       })
       this.uploader.clearQueue();
       this.coverImageUploader.clearQueue();
       this.mergedFileUploader.clearQueue()
       this.isUploadProcessing = true
       this.mergedFileUploader.addToQueue(files)

Upload Button Click Event Method

UploadFiles(){
this.mergedFileUploader.uploadAll()
}

Am trying to Upload Files mp4 and jpg extensions, I have 2 separate Fileuploader instance, with some custom validation imposed on 2 separate FileUploader, I have a upload button, onclick of the upload button am pushing Files in 2 FileUploader to a Single FileUploader and calling the inbuilt method upload all to upload the file to Server, but it's not hitting the server (API Service), I hereby paste the code below what I have tried please help me to resolve this issue. @Domainv > File Uploader Initialization ``` uploader: FileUploader; coverImageUploader: FileUploader; mergedFileUploader: FileUploader; options: FileUploaderOptions = { url: URL, authToken: `Bearer Token`, authTokenHeader: 'authorization', isHTML5: true, method: 'POST', itemAlias: 'file', headers: [{ name: 'refId', value: '' }, { name: 'userId', value: '' }, { name: 'roleId', value: '' }] } this.uploader = new FileUploader(this.options); this.coverImageUploader = new FileUploader(this.options); this.mergedFileUploader = new FileUploader(this.options); ``` > Pushing Files yet to be uploaded from 2 FileUploader to another FileUploader ``` let files: any = [] files.push(this.uploader.getNotUploadedItems().filter((f: FileItem) => !f.isUploading)) files.push(this.coverImageUploader.getNotUploadedItems().filter((f: FileItem) => !f.isUploading)) var merged = [].concat.apply([], files); merged.forEach(e => { e.options.headers.find((o, i) => { if (o.name === 'refId') { e.options.headers[i] = { name: 'refId', value: e.formData.reduce(r => r).RefId }; return true; } else if (o.name === 'userId') { e.options.headers[i] = { name: 'userId', value: user.userId.toString() }; return true; } else if (o.name === 'roleId') { e.options.headers[i] = { name: 'userId', value: user.roleId.toString() }; return true; } }) }) this.uploader.clearQueue(); this.coverImageUploader.clearQueue(); this.mergedFileUploader.clearQueue() this.isUploadProcessing = true this.mergedFileUploader.addToQueue(files) ``` > Upload Button Click Event Method ``` UploadFiles(){ this.mergedFileUploader.uploadAll() } ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1170