How to handle Max file size, maximum number of files and error handling in the 3.x version?

[TonyLuo]

the same question in this issue #123

[alllx]

I didn't found any built-in option for this and handled it with additional code:

if (output.type === 'addedToQueue'  && typeof output.file !== 'undefined') {
  if(output.file.size > this.sizeLimit) {
    this.showError('size', output.file.size);
  } else {
    this.files.push(output.file);
  }
}

[retailify]

@alllx thank you for your input!

My idea was to extend the interface UploaderOptions without breaking the current behavior and setting default limits.

NgUploaderService.handleFiles should check the limits and emit a 'sizeLimitReached' and / or 'numberOfFilesLimitReached'. If there are no fileLimits set, handleFiles works as today.

Any suggestions?

export interface UploaderFileLimits {
    sizeLimit: number;
    numberOfFilesLimit: number;
}

export interface UploaderOptions {
  concurrency: number;
  allowedContentTypes?: string[];
  fileLimits?: UploaderFileLimits;
}

[alllx]

My suggestion is: It should be possible to catch result in: if (output.type === 'rejected') {} and then should be property available output.reason to check reject reason like 'fileSize' | 'contentType'

[retailify]

Good catch. Then we don't have to introduce new ServiceEvents.

[inshaf]

hi... im trying to set the max size limit as follows

if (output.type === 'addedToQueue' && typeof output.file !== 'undefined') { if(output.file.size > this.sizeLimit) { console.log('exceed limit') } else { this.files.push(output.file); } }

I'm getting the message at console correctly but still the files is uploading. Not sure what i'm missing. Seems files are uploading even "this.files.push(output.file)" is not there in the code.

[patrickatkeylogic]

All of the examples I've seen so far leave out what to do with the local this.files array. As far as I can tell, the file needs to be set on the upload input event. This is what I've implemented (improvements welcome!):

constructor() {
  this.files = [];
}

onUploadOutput(output: UploadOutput) {

  if (output.type === 'allAddedToQueue') {

    // Iterate across the local files array
    for (let file of this.files) {
      const event: UploadInput = {
        type: 'uploadFile',
        url: "some/upload/url",
        method: 'POST',
        file: file, // <-- Set the file here
        headers: { 'Authorization': `Bearer ${this.token.get()}` }
      };
      this.uploadInput.emit(event);
    }
  } else if (output.type === 'addedToQueue') {
    
    // Do your size checking here
    if (output.file.size > 2000000) {
      alert('File is too large');
    } else {
      this.files.push(output.file);
    }
  }
}

I'm only interested in uploading a single file. This will not send multiple files in a single request.

[jkuri]

@patrickatkeylogic looks good. of course it would be a lot nicer code and implementation if the module itself would have the option for that :) if someone has time to do it, I am accepting pull requests. UploaderOptions interface would look something like:

export interface UploaderOptions {
  concurrency: number; // number of files uploaded at the same time
  allowedContentTypes?: string[]; // content types allowed (default *)
  maxUploads?: number; // max number of files the user can upload
  maxFileSize?: number; // maxium allowed file size in bytes
}

[jainvishal520]

For restricting both max number of files and max file size, I just handled the output type 'addedToQueue' and it is working perfectly for me.

 if (output.type === 'addedToQueue' && typeof output.file !== 'undefined') { 
	if(this.files.length < this.file.maxFileCount){
		if(output.file.size > this.file.maxFileSize) {
			alert('size limit exceeded')
		} else {
		        this.files.push(output.file);
		}
	}else {
		alert("you are allowed to upload only one file")
	}     
 }