Image Browser
By default, the Insert Image tool opens a simple dialog that allows you to type in or paste the URL of an image and, optionally, specify a tooltip.
The Editor also supports another way of picking an image by browsing a list of predefined files and directories. Uploading new images is also supported. For a runnable example, refer to the demo on file and image browser in the Editor.
To retrieve and upload the files and directories, the image browser needs a server-side implementation. To configure the image browser tool, use the ImageBrowser()
method.
@(Html.Kendo().Editor()
.Name("editor")
.ImageBrowser(imageBrowser => imageBrowser
.Image("~/Content/UserFiles/Images/{0}")
.Read("Read", "ImageBrowser")
.Create("Create", "ImageBrowser")
.Destroy("Destroy", "ImageBrowser")
.Upload("Upload", "ImageBrowser")
.Thumbnail("Thumbnail", "ImageBrowser")
)
)
The following list provides information about the default requests and responses for the Create()
, Read()
, Destroy()
, and Upload()
operations.
-
Create()
—Makes aPOST
request for the creation of a directory with the following parameters and does not expect a response.{ "name": "New folder name", "type": "d", "path": "foo/" }
-
Read()
—Makes aPOST
request that contains thepath
parameter which specifies the path that is browsed and expects a file listing in the following format.[ { "name": "foo.png", "type": "f", "size": 73289 }, { "name": "bar.jpg", "type": "f", "size": 15289 }, ... ]
name
from the previous example is the name of the file or directory,type
is either anf
for a file or ad
for a directory, andsize
is the file size (optional). -
Destroy()
—Makes aPOST
request with the following parameters:-
name
—The file or the directory that will be deleted. -
path
—The directory in which the file or the directory resides. -
type
—The file or the directory that will be deleted (anf
or ad
). -
size
—(Optional) The file size, as provided by theRead()
response.
-
-
Upload()
—Makes aPOST
request. The request includesFormData
which contains the upload path and the file name and type. Its payload consists of the uploaded file. The expected response is afile
object in the following format:{ "name": "foo.png", "type": "f", "size": 12345 }
Thumbnail()
—Makes aGET
request for each individual image to display its thumbnail in the explorer window. The single request parameter is thepath
to the image. The service is expected to respond with the image file for the thumbnail.Image()
—Used by the Editor to generate thesrc
attribute of the original image when the image is inserted. It results in aGET
request generated by the browser for each inserted image. The URL can point to a file system or to a service and is parameterized—the{0}
placeholder denotes thepath
andfileName
as received from theRead()
service.
You can update all of these requests and responses through the ImageBrowser()
configuration. Each of them exposes more options that you can tweak.