123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 |
- /*!
- * Bootstrap Fileselect v3.1.2
- * (c) 2016-2020 Jonathan Nessier, Neoflow
- * Licensed under MIT (https://github.com/Neoflow/Bootstrap-Fileselect/blob/master/LICENSE)
- */
- (function (window, $) {
- const Fileselect = function (fileInput, options) {
- this.$fileInput = $(fileInput);
- this.options = options;
- this.userLanguage = 'en';
- this.$fileselect = $(this);
- this.metadata = this.$fileInput.data();
- this.$inputGroup = $('<div>').addClass('custom-file');
- this.$labelInput = $('<label>').addClass('custom-file-label');
- this.translations = {
- 'en': {
- 'chooseFile': 'Choose file...',
- 'chooseFiles': 'Choose files...',
- 'browse': 'Browse',
- 'rules': {
- 'numberOfFiles': 'The number of uploadable files is limited to [num] file(s)',
- 'fileExtensions': 'The files are restricted to the following file extensions: [ext]',
- 'fileSize': 'The file size is limited to [size]',
- }
- },
- };
- this.init();
- };
- Fileselect.prototype = {
- defaults: {
- restyling: true,
- allowedFileSize: false,
- allowedFileExtensions: false,
- allowedNumberOfFiles: false,
- language: false,
- translations: {},
- validationCallback: function (message, instance) {
- alert(message);
- }
- },
- init: function () {
- this.config = this.loadConfig();
- this.translations = this.loadTranslation();
- if (this.config.restyling) {
- this.$fileInput
- .addClass('custom-file-input')
- .before(this.$inputGroup);
- this.$inputGroup
- .append(this.$fileInput, this.$labelInput);
- this.$labelInput.attr('data-browse', this.translations.browse);
- this.$labelInput.css({
- 'overflow': 'hidden'
- });
- if (this.$fileInput[0].hasAttribute("multiple")) {
- this.$labelInput.text(this.translations.chooseFiles);
- } else {
- this.$labelInput.text(this.translations.chooseFile);
- }
- }
- this.$fileInput.on('change', $.proxy(this.changeEvent, this));
- return $(this);
- },
- changeEvent: function (e) {
- this.$fileInput.trigger('bs.fs.change', [this]);
- const files = this.$fileInput[0].files,
- label = $.map(files, function (file) {
- return file.name;
- }).join(', ');
- let result = false;
- if (this.validateNumberOfFiles(files) && this.validateFileExtensions(files) && this.validateFileSize(files)) {
- this.$labelInput.text(label);
- result = true;
- } else {
- this.$fileInput.val(null);
- }
- this.$fileInput.trigger('bs.fs.changed', [this]);
- return result;
- },
- loadConfig: function () {
- let config = $.extend({}, this.defaults, this.options, this.metadata);
- if (typeof config.allowedFileExtensions === 'string') {
- config.allowedFileExtensions = config.allowedFileExtensions.split(',');
- }
- return config;
- },
- loadTranslation: function () {
- $.each(this.config.translations, $.proxy(function (language, translations) {
- this.translations[language] = translations
- }, this));
- let userLanguage = (this.config.language || navigator.language || navigator.userLanguage).substring(0, 2).toLowerCase(),
- translatedLanguages = $.map(this.translations, function (translations, key) {
- return key;
- });
- if ($.inArray(userLanguage, translatedLanguages) >= 0) {
- this.userLanguage = userLanguage;
- } else {
- // console.info('User language (' + userLanguage + ') has no translation. Switched to default language (' + this.userLanguage + ').')
- }
- return this.translations[this.userLanguage];
- },
- validateNumberOfFiles: function (files) {
- this.$fileInput
- .trigger('bs.fs.validate', [this])
- .trigger('bs.fs.number-of-files-validate', [this]);
- let result = true;
- if (this.config.allowedNumberOfFiles && files.length > parseInt(this.config.allowedNumberOfFiles)) {
- this.config.validationCallback(this.translations.rules.numberOfFiles.replace('[num]', this.config.allowedNumberOfFiles), 'allowedNumberOfFiles', this);
- result = false;
- }
- this.$fileInput
- .trigger('bs.fs.validated', [this])
- .trigger('bs.fs.number-of-files-validated', [this]);
- return result;
- },
- validateFileExtensions: function (files) {
- this.$fileInput
- .trigger('bs.fs.validate', [this])
- .trigger('bs.fs.file-extensions-validate', [this]);
- let result = true;
- if (this.config.allowedFileExtensions) {
- $.each(files, $.proxy(function (i, file) {
- var fileExtension = file.name.replace(/^.*\./, '').toLowerCase();
- if ($.inArray(fileExtension, this.config.allowedFileExtensions) === -1) {
- this.config.validationCallback(this.translations.rules.fileExtensions.replace('[ext]', this.config.allowedFileExtensions.join(', ')), 'allowedFileExtensions', this);
- result = false;
- return;
- }
- }, this));
- }
- this.$fileInput
- .trigger('bs.fs.validated', [this])
- .trigger('bs.fs.file-extensions-validated', [this]);
- return result;
- },
- validateFileSize: function (files) {
- this.$fileInput
- .trigger('bs.fs.validate', [this])
- .trigger('bs.fs.file-size-validate', [this]);
- let result = true;
- if (this.config.allowedFileSize) {
- $.each(files, $.proxy(function (i, file) {
- if (file.size > this.config.allowedFileSize) {
- this.config.validationCallback(this.translations.rules.fileSize.replace('[size]', Math.round(this.config.allowedFileSize / 1024 / 1024) + 'MB'), 'allowedFileSize', this);
- result = false;
- return;
- }
- }, this));
- }
- this.$fileInput
- .trigger('bs.fs.validated', [this])
- .trigger('bs.fs.file-size-validated', [this]);
- return result;
- },
- };
- Fileselect.defaults = Fileselect.prototype.defaults;
- $.fn.fileselect = function (options) {
- this.each(function () {
- new Fileselect(this, options);
- });
- return this;
- };
- window.Fileselect = Fileselect;
- })(window, jQuery);
|