0

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.

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()
}

1 Answer 1

0

Can't get much of file-uploader part, though it might be worth a try using a simple FileReader in javascript, to achieve something similar (reading file contents and then making required server call using http client service). See here:

https://javascript.info/file

Sign up to request clarification or add additional context in comments.

1 Comment

I need drag and drop also

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.