New to Kendo UI for jQuery? Start a free 30-day trial

ImageBrowser.transport

configuration

Specifies the settings for loading and saving data.

imageBrowser.transport

Object

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
    tools: ["insertImage"],
    imageBrowser: {
        transport: {
            read: "/imagebrowser/read",
            uploadUrl: "/imagebrowser/upload",
            imageUrl: "/imagebrowser/image"
        }
    }
});
</script>

imageBrowser.transport.create

Object|String

Options or URL which will handle the directory creation. If not specified that create new folder button will not be present.

Important: The value of transport.create is passed to jQuery.ajax.

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      create: "/create"
    }
  }
});
</script>

imageBrowser.transport.destroy

Object|String

Options or URL which will handle the file and directory deletion. If not specified the delete button will not be present.

Important: The value of transport.destroy is passed to jQuery.ajax.

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      destroy: "/destroy"
    }
  }
});
</script>

imageBrowser.transport.imageUrl

String|Function

The URL responsible for serving the original image. A file name placeholder should be specified. By default the placeholder value is URL encoded. If this is not desired, use a function.

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      imageUrl: "/content/images/{0}" //the placeholder will be replaced with the current virtual path and selected file name
    }
  }
});
</script>

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      imageUrl: function (e) {
        return "/content/images/" + e;
      }
    }
  }
});
</script>

imageBrowser.transport.read

Object|String|Function

Options or URL for remote image retrieval.

Important: The value of transport.read is passed to jQuery.ajax.

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      read: "/imagebrowser/read"
    }
  }
});
</script>

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      read: function(options) {
          // query async service, then call options.success or options.error
          options.success([
            { "name": "foo", "type": "d" },
            { "name": "bar.png", "type": "f", "size": 15289 }
          ]);
      }
    }
  }
});
</script>

imageBrowser.transport.thumbnailUrl

String|Function

The URL for retrieving the thumbnail version of the image. If not specified a default image icon will be shown. If function is assigned, the current path and image name will be provided.

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      thumbnailUrl: "/thumbnail"
    }
  }
});
</script>

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      thumbnailUrl: function(path, file) {
        return "/thumbnail?path=" + path + file;
      }
    }
  }
});
</script>

imageBrowser.transport.uploadUrl

String

The URL which will handle the upload of the new images. If not specified the Upload button will not be displayed.

The requirements for this handler are the same as for the save handler in the Upload widget.

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  imageBrowser: {
    transport: {
      uploadUrl: "/thumbnail"
    }
  }
});
</script>

Related Members