Skip to content

feat(base64): add mimeTypes option #1670

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mpryvkin wants to merge 6 commits into
base: develop
Choose a base branch
from
+90 −19
Open

feat(base64): add mimeTypes option #1670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c707e99
feat(base64): add `mimeTypes` option
mpryvkin Apr 9, 2026
c26a1f9
address review: rename variable from `errInvalidMimeType` to `errNotA…
mpryvkin Apr 11, 2026
dbd490d
address review: Improve handling of `mimeTypes` option.
mpryvkin Apr 11, 2026
8213091
address review: Improve testing for valid MIME type.
mpryvkin Apr 11, 2026
ce75701
address review: Update documentation.
mpryvkin May 26, 2026
4a4beeb
fix: Invalid default option `allowedMmimeTypes`.
mpryvkin May 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions docs/demos/plugins/base64.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,31 @@ <h4>The code</h4>
</code></pre>
</div>

<div class="feature">
<h3>MIME types</h3>

<div id="editor-mime-types">
<p>
Option <code>mimeTypes</code> allows to specify allowed MIME types. Default value is <code>['image/*']</code> which accepts all images.
</p>
</div>

<h4>The code</h4>
<pre><code class="js-code-to-eval javascript">
$('#editor-mime-types')
.trumbowyg({
btns: [
['base64']
],
plugins: {
base64: {
mimeTypes: ['image/gif', 'image/jpeg', 'image/png', 'image/webp']
}
}
});
</code></pre>
</div>

<div class="feature">
<h3>Setup</h3>

Expand Down
84 changes: 65 additions & 19 deletions plugins/base64/trumbowyg.base64.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
};

var defaultOptions = {
maxFileSize: 0
maxFileSize: 0,
mimeTypes: ['image/*']
};

$.extend(true, $.trumbowyg, {
Expand All @@ -29,21 +30,24 @@
file: 'File',
errFileReaderNotSupported: 'FileReader is not supported by your browser.',
errInvalidImage: 'Invalid image file.',
errFileTooLarge: 'Image file is too large.'
errFileTooLarge: 'Image file is too large.',
errNotAllowedMimeType: 'File type is not allowed.'
},
az: {
base64: 'base64 olaraq şəkil',
file: 'Fayl',
errFileReaderNotSupported: 'FileReader brauzeriniz tərəfindən dəstəklənmir.',
errInvalidImage: 'Yanlış şəkil faylı.',
errFileTooLarge: 'Şəkil faylı çox böyükdür.'
errFileTooLarge: 'Şəkil faylı çox böyükdür.',
errNotAllowedMimeType: 'Fayl növünə icazə verilmir.'
},
by: {
base64: 'Выява (фармат base64)',
file: 'Файл',
errFileReaderNotSupported: 'FileReader не падтрымліваецца вашым браўзэрам.',
errInvalidImage: 'Несапраўдны файл выявы.',
errFileTooLarge: 'Файл выявы занадта вялікі.'
errFileTooLarge: 'Файл выявы занадта вялікі.',
errNotAllowedMimeType: 'Тып файла не дазволены.'
},
cs: {
base64: 'Vložit obrázek',
Expand All @@ -54,90 +58,104 @@
file: 'Fil',
errFileReaderNotSupported: 'FileReader er ikke understøttet af din browser.',
errInvalidImage: 'Ugyldig billedfil.',
errFileTooLarge: 'Billedfilen er for stor.'
errFileTooLarge: 'Billedfilen er for stor.',
errNotAllowedMimeType: 'Filtypen er ikke tilladt.'
},
de: {
base64: 'Bild als base64',
file: 'Datei',
errFileReaderNotSupported: 'FileReader ist nicht in deinem Browser unterstützt.',
errInvalidImage: 'Ungültige Bilddatei.',
errFileTooLarge: 'Bilddatei ist zu groß.'
errFileTooLarge: 'Bilddatei ist zu groß.',
errNotAllowedMimeType: 'Dateityp ist nicht erlaubt.'
},
et: {
base64: 'Pilt base64 formaadis',
file: 'Fail',
errFileReaderNotSupported: 'Teie veebilehitseja ei toeta FileReader funktsiooni.',
errInvalidImage: 'Vigane pildifail.',
errFileTooLarge: 'Pildifail on liiga suur.'
errFileTooLarge: 'Pildifail on liiga suur.',
errNotAllowedMimeType: 'Failitüüp ei ole lubatud.'
},
fr: {
base64: 'Image en base64',
file: 'Fichier',
errFileReaderNotSupported: 'FileReader n\'est pas supporté par votre navigateur.',
errInvalidImage: 'Fichier image invalide.',
errFileTooLarge: 'Le fichier image est trop volumineux.'
errFileTooLarge: 'Le fichier image est trop volumineux.',
errNotAllowedMimeType: 'Le type de fichier n\'est pas autorisé.'
},
ha: {
base64: 'Hoto a matsayin base64',
file: 'Fayil',
errFileReaderNotSupported: 'Burauzar bata da FileReader.',
errInvalidImage: 'Fayil ɗin hoton ba shida inganci.'
errInvalidImage: 'Fayil ɗin hoton ba shida inganci.',
errFileTooLarge: 'Fichye imaj la twò gwo.',
errNotAllowedMimeType: 'Kalite fichye a pa otorize.'
},
hu: {
base64: 'Kép beszúrás inline',
file: 'Fájl',
errFileReaderNotSupported: 'Ez a böngésző nem támogatja a FileReader funkciót.',
errInvalidImage: 'Érvénytelen képfájl.',
errFileTooLarge: 'A képfájl túl nagy.'
errFileTooLarge: 'A képfájl túl nagy.',
errNotAllowedMimeType: 'A fájltípus nem engedélyezett.'
},
ja: {
base64: '画像 (Base64形式)',
file: 'ファイル',
errFileReaderNotSupported: 'あなたのブラウザーはFileReaderをサポートしていません',
errInvalidImage: '画像形式が正しくありません',
errFileTooLarge: '画像ファイルが大きすぎます'
errFileTooLarge: '画像ファイルが大きすぎます',
errNotAllowedMimeType: '許可されていないファイル形式です'
},
ko: {
base64: '그림 넣기(base64)',
file: '파일',
errFileReaderNotSupported: 'FileReader가 현재 브라우저를 지원하지 않습니다.',
errInvalidImage: '유효하지 않은 파일',
errFileTooLarge: '이미지 파일이 너무 큽니다.'
errFileTooLarge: '이미지 파일이 너무 큽니다.',
errNotAllowedMimeType: '허용되지 않는 파일 형식입니다.'
},
nl: {
base64: 'Afbeelding inline',
file: 'Bestand',
errFileReaderNotSupported: 'Uw browser ondersteunt deze functionaliteit niet.',
errInvalidImage: 'De gekozen afbeelding is ongeldig.',
errFileTooLarge: 'Het afbeeldingsbestand is te groot.'
errFileTooLarge: 'Het afbeeldingsbestand is te groot.',
errNotAllowedMimeType: 'Het bestandstype is niet toegestaan.'
},
pt_br: {
base64: 'Imagem em base64',
file: 'Arquivo',
errFileReaderNotSupported: 'FileReader não é suportado pelo seu navegador.',
errInvalidImage: 'Arquivo de imagem inválido.',
errFileTooLarge: 'O arquivo de imagem é muito grande.'
errFileTooLarge: 'O arquivo de imagem é muito grande.',
errNotAllowedMimeType: 'Tipo de arquivo não permitido.'
},
ru: {
base64: 'Изображение как код в base64',
file: 'Файл',
errFileReaderNotSupported: 'FileReader не поддерживается вашим браузером.',
errInvalidImage: 'Недопустимый файл изображения.',
errFileTooLarge: 'Файл изображения слишком большой.'
errFileTooLarge: 'Файл изображения слишком большой.',
errNotAllowedMimeType: 'Тип файла не разрешён.'
},
sl: {
base64: 'Slika kot base64',
file: 'Datoteka',
errFileReaderNotSupported: 'FileReader ni podprt v tem brskalniku.',
errInvalidImage: 'Neveljavna datoteka s sliko.',
errFileTooLarge: 'Slikovna datoteka je prevelika.'
errFileTooLarge: 'Slikovna datoteka je prevelika.',
errNotAllowedMimeType: 'Vrsta datoteke ni dovoljena.'
},
tr: {
base64: 'Base64 olarak resim',
file: 'Dosya',
errFileReaderNotSupported: 'FileReader tarayıcınız tarafından desteklenmiyor.',
errInvalidImage: 'Geçersiz resim dosyası.',
errFileTooLarge: 'Resim dosyası çok büyük.'
errFileTooLarge: 'Resim dosyası çok büyük.',
errNotAllowedMimeType: 'Dosya türüne izin verilmiyor.'
},
zh_cn: {
base64: '图片（Base64编码）',
Expand All @@ -148,7 +166,8 @@
file: '檔案',
errFileReaderNotSupported: '你的瀏覽器不支援FileReader',
errInvalidImage: '不正確的檔案格式',
errFileTooLarge: '圖片檔案過大'
errFileTooLarge: '圖片檔案過大',
errNotAllowedMimeType: '不允許的檔案類型'
},
},
// jshint camelcase:true
Expand All @@ -168,6 +187,8 @@
trumbowyg.saveRange();

var file;
var mimeTypes = trumbowyg.o.plugins.base64.mimeTypes;

var $modal = trumbowyg.openModalInsert(
// Title
trumbowyg.lang.base64,
Expand All @@ -178,7 +199,7 @@
type: 'file',
required: true,
attributes: {
accept: 'image/*'
accept: mimeTypes.join(', ')
}
},
alt: {
Expand All @@ -199,6 +220,31 @@
return;
}

// Validate MIME type
//
// If:
// 1) file is provided, and
// 2) list of allowed MIME types is an array, and
// 3) list of allowed MIME types is not empty, and
// 4) list of allowed MIME types doesn't contain entry that accepts all images
if (
file
&& Array.isArray(mimeTypes)
&& mimeTypes.length
&& !mimeTypes.includes('image/*')
) {
var fileType = file.type || '';
var isAllowed = mimeTypes.includes(fileType);

if (!isAllowed) {
trumbowyg.addErrorOnModalField(
$('input[type=file]', $modal),
trumbowyg.lang.errNotAllowedMimeType
);
return;
}
}

var fReader = new FileReader();

fReader.onloadend = function (e) {
Expand Down