Regex for file extensions, how to understand it - regex

Question

In the jQuery-File-Upload and its basic-plus.html demo there is a regex for the file extensions.
/(\.|\/)(gif|jpe?g|png)$/i
(gif|jpe?g|png)$/i - second part is obvious matches particular file extensions, case-insensitive.
But what about this part :
(\.|\/)
Decimal point is one character, | matches either the first or the second part ?
jQuery-File-Upload basic-plus.html

Answer 1

This part : (\.|\/) mean :
\. : a real dot (escaped), it is not the usual dot, which match every character.
| OR
\/ a slash (escaped)
So you're catching :
.gif, /gif, .GIF, /GIF...
.jpg, /jpg, .JPG, /JPG, .jpeg, /jpeg, .JPEG, /JPEG...
.png, /png, .PNG, /PNG...
This is used to check both file extension (.jpg, .gif...) and MimeType (image/jpeg, image/gif...).
Extract from jquery.fileupload-validate.js sources :
$.widget('blueimp.fileupload', $.blueimp.fileupload, {
options: {
// The regular expression for allowed file types, matches
// against either file type or file name:
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
...
},
processActions: {
validate: function (data, options) {
...
// Check file.type AND file.name
if (options.acceptFileTypes &&
!(options.acceptFileTypes.test(file.type) ||
options.acceptFileTypes.test(file.name))) {
file.error = settings.i18n('acceptFileTypes');
}
...
}
}
});