javascriptjquerywysiwygredactorredactor.js

How to : redactor.js imageUpload Post Extra parameters


I am using this awesome editor, but I have no idea how to pass extra parameters with imageUpload and clipboardUpload.

I would like to be able to post extra params when the user past an image into the editor

$el.redactor({
    imageUpload: '/WebUpload/Save',
    clipboardUploadUrl: '/WebUpload/Save',
});

http://imperavi.com/redactor/


Update

as of Redacor v10 the extra param are included just use uploadImageFields

$el.redactor({
    imageUpload: '/WebUpload/Save',
    clipboardUploadUrl: '/WebUpload/Save',
    uploadImageFields: {
                id: 1234,
                name: "test123"
            },
});

Solution

  • Could not find answer anywhere so I hacked the core redactor.js file

    I added

    $.Redactor.opts = {
            imageUploadExtraParams: {},
    

    to the options and changed the post to include these params in pasteClipboardUploadMozilla and pasteClipboardUpload

    pasteClipboardUploadMozilla: function() {
        var imgs = this.$editor.find('img[data-mozilla-paste-image]');
    
        $.each(imgs, $.proxy(function(i, s) {
    
            var $s = $(s);
            var arr = s.src.split(",");
            var data = arr[1]; // raw base64
            var contentType = arr[0].split(";")[0].split(":")[1];
    
            var postData = {
                contentType: contentType,
                data: data,
            };
            var extraParams = this.opts.imageUploadExtraParams || {};
            for (var propName in extraParams) {
                postData[propName] = extraParams[propName];
            }
    
            $.post(this.opts.clipboardUploadUrl, postData,
    

    and changed

    pasteClipboardUploadMozilla: function() {
        var imgs = this.$editor.find('img[data-mozilla-paste-image]');
    
        $.each(imgs, $.proxy(function(i, s) {
    
            var $s = $(s);
            var arr = s.src.split(",");
            var data = arr[1]; // raw base64
            var contentType = arr[0].split(";")[0].split(":")[1];
    
            var postData = {
                contentType: contentType,
                data: data,
            };
            var extraParams = this.opts.imageUploadExtraParams || {};
            for (var propName in extraParams) {
                postData[propName] = extraParams[propName];
            }
    
            $.post(this.opts.clipboardUploadUrl, postData,
    

    now I can post extra params just by adding imageUploadExtraParams object

    $el.redactor({
        imageUpload: '/WebUpload/Save',
        clipboardUploadUrl: '/WebUpload/Save',
        imageUploadExtraParams: {
                    id: 1234,
                    name: "test123"
                },
    });
    

    Update

    as of Redacor v10 the extra param are included just use uploadImageFields

    $el.redactor({
        imageUpload: '/WebUpload/Save',
        clipboardUploadUrl: '/WebUpload/Save',
        uploadImageFields: {
                    id: 1234,
                    name: "test123"
                },
    });