maxFileSize && allowedFileType not working #463

New Issue

2016-10-25T08:35:10Z

cili93 commented

2016-10-25 08:35:10 +00:00

(Migrated from github.com)

private uploaderOptions: FileUploaderOptions = {
autoUpload: true,
isHTML5: true,
filters: [],
removeAfterUpload: false,
disableMultipart: false,
allowedFileType: ['image/png', 'image/jpg', 'image/jpeg'],
maxFileSize: 150000
};

Hey people,

when I try uploading a file (.jpg, 17.5 kb) with these options it just doesn't work. If I remove allowedFileType and maxFileSize it works like a charm

I also tried things like allowedFileType: ['png', 'jpg', 'jpeg'],

Documentation is quite bad so I couldn't find any help here, nor on the Google

Hope you'll be able to help me, cheers!

private uploaderOptions: FileUploaderOptions = { autoUpload: true, isHTML5: true, filters: [], removeAfterUpload: false, disableMultipart: false, allowedFileType: ['image/png', 'image/jpg', 'image/jpeg'], maxFileSize: 150000 }; Hey people, when I try uploading a file (.jpg, 17.5 kb) with these options it just doesn't work. If I remove allowedFileType and maxFileSize it works like a charm I also tried things like allowedFileType: ['png', 'jpg', 'jpeg'], Documentation is quite bad so I couldn't find any help here, nor on the Google Hope you'll be able to help me, cheers!

simoazzo commented

2016-10-25 14:53:31 +00:00

(Migrated from github.com)

Hi,

I have a problem regarding size. I don't know if you could help me but my problem is quite related but my problem is that files got unreadable when they exceed the 32kb and this is my call:

this.uploader = new FileUploader({url: this._url_Where_To_Upload_Files, autoUpload:true});

Do you have any clue?

Hi, I have a problem regarding size. I don't know if you could help me but my problem is quite related but my problem is that files got unreadable when they exceed the 32kb and this is my call: this.uploader = new FileUploader({url: this._url_Where_To_Upload_Files, autoUpload:true}); Do you have any clue?

tomwwinter commented

2016-10-25 18:13:33 +00:00

(Migrated from github.com)

Try to use
allowedMimeType: ['image/png', 'image/jpg', 'image/jpeg'],
instead of
allowedFileType: ['image/png', 'image/jpg', 'image/jpeg'],

My config works fine at first glance:

public uploader: FileUploader = new FileUploader({
        isHTML5: true,
        allowedMimeType: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'],
        maxFileSize: 10*1024*1024 // 10 MB
    });

Try to use `allowedMimeType: ['image/png', 'image/jpg', 'image/jpeg'],` instead of `allowedFileType: ['image/png', 'image/jpg', 'image/jpeg'],` My config works fine at first glance: ``` javascript public uploader: FileUploader = new FileUploader({ isHTML5: true, allowedMimeType: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'], maxFileSize: 10*1024*1024 // 10 MB }); ```

👍 6

piyukore06 commented

2016-11-10 12:02:32 +00:00

(Migrated from github.com)

MaxFileSize just filters out from the queue .. is there any way I can display the names of invalid files?

👍 3

karser commented

2017-05-11 21:13:56 +00:00

(Migrated from github.com)

onWhenAddingFileFailed allows doing that. item.name contains the name of invalid file.

export class UploadComponent {
    uploader:FileUploader;
    errorMessage: string;
    allowedMimeType = ['application/zip'];
    maxFileSize = 10 * 1024 * 1024;
    
    constructor(): void {
        this.uploader = new FileUploader({
            url: url,
            allowedMimeType: this.allowedMimeType,
            headers: [{name:'Accept', value:'application/json'}],
            autoUpload: true,
            maxFileSize: this.maxFileSize,
        });
        this.uploader.onWhenAddingFileFailed = (item, filter, options) => this.onWhenAddingFileFailed(item, filter, options);
    }

    onWhenAddingFileFailed(item: FileLikeObject, filter: any, options: any) {
        switch (filter.name) {
            case 'fileSize':
                this.errorMessage = `Maximum upload size exceeded (${item.size} of ${this.maxFileSize} allowed)`;
                break;
            case 'mimeType':
                const allowedTypes = this.allowedMimeType.join();
                this.errorMessage = `Type "${item.type} is not allowed. Allowed types: "${allowedTypes}"`;
                break;
            default:
                this.errorMessage = `Unknown error (filter is ${filter.name})`;
        }
    }
}

`onWhenAddingFileFailed` allows doing that. `item.name` contains the name of invalid file. ``` export class UploadComponent { uploader:FileUploader; errorMessage: string; allowedMimeType = ['application/zip']; maxFileSize = 10 * 1024 * 1024; constructor(): void { this.uploader = new FileUploader({ url: url, allowedMimeType: this.allowedMimeType, headers: [{name:'Accept', value:'application/json'}], autoUpload: true, maxFileSize: this.maxFileSize, }); this.uploader.onWhenAddingFileFailed = (item, filter, options) => this.onWhenAddingFileFailed(item, filter, options); } onWhenAddingFileFailed(item: FileLikeObject, filter: any, options: any) { switch (filter.name) { case 'fileSize': this.errorMessage = `Maximum upload size exceeded (${item.size} of ${this.maxFileSize} allowed)`; break; case 'mimeType': const allowedTypes = this.allowedMimeType.join(); this.errorMessage = `Type "${item.type} is not allowed. Allowed types: "${allowedTypes}"`; break; default: this.errorMessage = `Unknown error (filter is ${filter.name})`; } } } ```

👍 39 ❤️ 12 🎉 15 🚀 5

cpiock commented

2018-09-11 14:51:24 +00:00

(Migrated from github.com)

is there a default value for maxFileSize && allowedFileType?

👍 4

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#463