MyBB Community Forums

Mentioned in other threads, don't want base64 image data in our database.  Usually pasting such data fails because of database character limits - but if the image is small enough - it will work.

Finding these posts is not a problem, but any ideas to prevent this from happening?

cheers...

I'd imagine it's a limitation of the attachments system, we'd have to capture the pasted image and upload it as an attachment, and I don't think it's set up to do that.

I'd be happy if I could capture such attempts - and reject them.  Something with preg_match logic to trigger an outcome.  We use Shade's MyDropZone to replace / supplement the attachment system.  Which I believe is now a free MyBB plugin.

@Crazycat's ABP Restrict url gives me some ideas.  Super plugin BTW.   

All the posts I've found in our database have "%base64%" in the posts / message field.  Can find them with the search page too.   Of course doing that is probably a plugin as well.

This is a standard function of this editor in WYSIWYG mode. It automatically recognizes copy&paste images and inserts the image as data:image/filetype;base64 to the post content.
Yes, depending on the image size and format, this may cause issues with a charcater limitation of mybb_post.message.

To prevent this at all, you need to edit the editor hard code - so make it dismiss any copy&paste images.

When I remember right, set the editor to source mode will avoid this behaviour.

[ExiTuS]

Source mode does seem to prevent pasting of image data.  But that would mean forcing that mode on users, and prevent them from toggling to WYSIWYG.

Pasting images into the database is still undesirable behaviour from our perspective.

to disable base64 image in sceditor check this https://github.com/mybb/mybb/issues/4078...-651064741

Then I guess the only options to remedy:
- Force Source Mode
- Modify editor code to prevent Data-URI
- Switch to another standard editor

[ExiTuS]

Edit - Crosspost
Thanks martec for this tip.

[ExiTuS]

Where you guys wanna upload the file?
I have a neat solution. I may push a PR for this as well.

Alright, this is a quick one to enhance paste and drag/drop image (I am in a hurry, I can't write a tut now):

This will solve your problem uploading the file to IMGUR. For that your Imgur anon Client ID is required.
If you need to upload to other image host or even in your own site - you need to write a separate function.

1. First, download the attached SCE plugin file and upload to jscripts/sceditor/plugins folder.
2. Replace your codebuttons template with following:

<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/themes/{$theme['editortheme']}" type="text/css" media="all" />
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/jquery.sceditor.bbcode.min.js?ver=1822"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/bbcodes_sceditor.js?ver=1823"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/plugins/undo.js?ver=1821"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/plugins/dragdrop.js?ver=1826"></script>
<script type="text/javascript">
var partialmode = {$mybb->settings['partialmode']},
imgurClientID = '<YOUR_IMGUR_CLIENT_ID_HERE>',
opt_editor = {
plugins: "undo, dragdrop",
format: "bbcode",
bbcodeTrim: true,
style: "{$mybb->asset_url}/jscripts/sceditor/styles/jquery.sceditor.{$theme['editortheme']}?ver=1823",
dragdrop: {
allowedTypes: ['image/jpeg', 'image/png'],
isAllowed: function (file) {
return true;
},
handlePaste: true,
handleFile: function (file, createPlaceholder) {
var placeholder = createPlaceholder();
imgurUpload(file).then(function (url) {
placeholder.insert('<img src=\'' + url + '\' />');
}).catch(function () {
placeholder.cancel();
});
}
},
rtl: {$lang->settings['rtl']},
locale: "mybblang",
width: "100%",
enablePasteFiltering: true,
autoUpdate: true,
emoticonsEnabled: {$emoticons_enabled},
emoticons: {
// Emoticons to be included in the dropdown
dropdown: {
{$dropdownsmilies}
},
// Emoticons to be included in the more section
more: {
{$moresmilies}
},
// Emoticons that are not shown in the dropdown but will still be converted. Can be used for things like aliases
hidden: {
{$hiddensmilies}
}
},
emoticonsCompat: true,
toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,{$email}{$link}|video{$emoticon}|{$list}{$code}quote|maximize,source",
};
{$editor_language}
$(function() {
$("#{$bind}").sceditor(opt_editor);

MyBBEditor = $("#{$bind}").sceditor("instance");
{$sourcemode}
});


function imgurUpload(file) {
    var headers = new Headers({
        'authorization': 'Client-ID '+ imgurClientID
    });

    var form = new FormData();
    form.append('image', file);

    return fetch('https://api.imgur.com/3/image', {
        method: 'post',
        headers: headers,
        body: form
    }).then(function (response) {
        return response.json();
    }).then(function (result) {
        if (result.success) {
            return result.data.link;
        }

        throw 'Upload error';
    });
}
</script>

REMEMBER to replace <YOUR_IMGUR_CLIENT_ID_HERE> with your original Imgur Client ID.

Save the template.

Your editor will now support drag and drop image upload as well as paste from clipboard image upload.

Note: Its a tested code. Don't come up with "dat no work". Applied to the blank installation here for testing...
https://dev.eff.one

Thanks guys - I'll look at both of those options.  Have a test system I can fiddle with.

P.S.  Not a fan of "that don't work" posts either.