How to : redactor.js imageUpload Post Extra parameters

1.2k views Asked by At

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"
            },
});
1

There are 1 answers

0
Nerdroid On BEST ANSWER

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"
            },
});