Filter file with specific extension #348

New Issue

2016-08-13T19:23:58Z

sfali23 commented

2016-08-13 19:23:58 +00:00

(Migrated from github.com)

Hi,

I would like to filter file with specific extension. Does anyone know how to accomplish this?

Regards,

Farhan

Hi, I would like to filter file with specific extension. Does anyone know how to accomplish this? Regards, Farhan

rasit-kuscu commented

2016-08-14 14:07:18 +00:00

(Migrated from github.com)

Hello,

You could use allowedMimeType. You can find all mime types on here

this.uploader = new FileUploader({
    url: 'https://evening-anchorage-3159.herokuapp.com/api/',
    allowedMimeType: ['image/png', 'image/gif', 'video/mp4', 'image/jpeg'] 
});

Hello, You could use allowedMimeType. You can find all mime types on [here](http://www.freeformatter.com/mime-types-list.html) ``` this.uploader = new FileUploader({ url: 'https://evening-anchorage-3159.herokuapp.com/api/', allowedMimeType: ['image/png', 'image/gif', 'video/mp4', 'image/jpeg'] }); ```

linusbrolin commented

2016-09-03 09:51:51 +00:00

(Migrated from github.com)

In order for the actual file selector to also filter for specific file types, you will need to add the mimetypes to the html input aswell, like so:

<input type="file" ng2FileSelect [uploader]="uploader" accept="image/png,image/gif,video/mp4,image/jpeg">

Of course, you could also use a variable for both, so you don't have to hardcode it:

template:

<input type="file" ng2FileSelect [uploader]="uploader" [accept]="allowedMimeType.toString()">

class:

this.allowedMimeType = ['image/png', 'image/gif', 'video/mp4', 'image/jpeg'];
this.uploader = new FileUploader({
    url: 'https://evening-anchorage-3159.herokuapp.com/api/',
    allowedMimeType: this.allowedMimeType 
});

In order for the actual file selector to also filter for specific file types, you will need to add the mimetypes to the html input aswell, like so: ``` <input type="file" ng2FileSelect [uploader]="uploader" accept="image/png,image/gif,video/mp4,image/jpeg"> ``` Of course, you could also use a variable for both, so you don't have to hardcode it: template: ``` <input type="file" ng2FileSelect [uploader]="uploader" [accept]="allowedMimeType.toString()"> ``` class: ``` this.allowedMimeType = ['image/png', 'image/gif', 'video/mp4', 'image/jpeg']; this.uploader = new FileUploader({ url: 'https://evening-anchorage-3159.herokuapp.com/api/', allowedMimeType: this.allowedMimeType }); ```

👍 18 🎉 1

sahil1989 commented

2017-03-06 11:30:43 +00:00

(Migrated from github.com)

Is there any way to add filter on file name? As I need to allow only those files which have a numeric name.

vikasmanze commented

2017-11-27 14:54:10 +00:00

(Migrated from github.com)

Hi,

How to get error response if I try to browse file which is not mentioned in allowedMimeType?

Hi, How to get error response if I try to browse file which is not mentioned in allowedMimeType?

👍 3

linusbrolin commented

2018-01-05 13:23:30 +00:00

(Migrated from github.com)

I'm not sure you can prevent anyone from browsing files that are not in allowedMimeType, since the file selector is native to the browser, not this component.
But you could always check the selected file(s) after closing the file selector, but before uploading, and remove any files that do not match the allowedMimeType.

I'm not sure you can prevent anyone from browsing files that are not in allowedMimeType, since the file selector is native to the browser, not this component. But you could always check the selected file(s) after closing the file selector, but before uploading, and remove any files that do not match the allowedMimeType.

galvakojis commented

2018-03-16 15:18:13 +00:00

(Migrated from github.com)

seems not working with chrome and "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" - .xlsx

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#348