Insert another image.

[Adeel]

Currently Insert image option on your control is inserting image to editor by giving it a URL like "https:/localhost/MyProject/ImageName.jpg" but can i insert an image from client machine. like in the case of Upload where i choose from machine
i want insert image to choose image from machine instead of dialog box asking for URL....

[Vessy]

Hi Adeel,

If I understand you correctly you need to list files from the client's computer. If this is the case, I will have to disappoint you. It is not possible to access user's local hard drive using JavaScript. This is not a restriction of RadFileExplorer but is a general JavaScript security restriction.

You can find more detailed explanation on the subject in the following forum thread: Specifying a FilePath & Name to Read From & Write To

Regards,
Vessy
Telerik

 

 

[Adeel]

First of thanks for your reply,

Secondly , I am uploading images through RadAsyncUpload and inserting it on RadImageEditor Canvas from the machine, How its accessing the machine.It is the same functionality i want for Insert Image(ClipArt).

Thirdly, I have read the documentation of RadImageEditor and i have found "InsertImage(Some parameters)" methods on client side Api and server side Api. What are they for

Fourthly, can you please give me an example to use insertImage(Some parameters) on client side and InsertImage(Some Parameters) on server side because i have not found any code example for them.

Thank you.

[Vessy]

Hi Adeel,

The browsing functionality provided by the Upload/AsyncUpload controls is a jQuery functionality used by us. The only possible way to allow your users to insert images from there own machines could be if you implement your own dialog, asking them to upload the desired image on the server and then insert the uploaded file in ImageEditor.

The insertImage() method is executing the ImageEditor's built-in InsertImage command. Calling this method inserts the image which url is passed to it, on the passed X and Y coordinates and the desired operations applied. The client-side documentation for this method is:

insertImage: function(x, y, value, operationsToApply)
{
    /// <summary>Inserts image (clip art) into the editable image at the specified position</summary>
    /// <param name='x' type='Number' integer='true' mayBeNull="false">The X coordinate of the image's (clip art) position</param>
    /// <param name='y' type='Number' integer='true' mayBeNull="false">The Y coordinate of the image's (clip art) position</param>
    /// <param name='value' type='String' mayBeNull="false">The client URL of the image to insert.</param>
    /// <param name='operationsToApply' type='Array' mayBeNull="false">Array of operations to apply to the clip art image, before it is inserted into the editable image.</param>
}

So you can use it in a similar way:

$find("RadImageEditor1").insertImage(5, 15, "http://www.geekchamp.com/upload/symbolicons/animals/1f41f-fish.png", [])

The server-side usage of this functionality is a little bit more complected, because you will need to create a stream from the desired image. Please, note that when the ImageEditor is used in CanvasMode all changes are kept on the client, so the only proper moment to apply a Server-side command will be the ImageSaving event, after all editing are passed to the Server. For example:

protected void RadImageEditor1_ImageSaving(object sender, ImageEditorSavingEventArgs e)
{
    Telerik.Web.UI.ImageEditor.EditableImage img = e.Image;
    System.Drawing.Point position = new System.Drawing.Point() {X=10, Y=20};
    System.Net.WebClient wc = new System.Net.WebClient();
    byte[] bytes = wc.DownloadData("http://www.geekchamp.com/upload/symbolicons/animals/1f41f-fish.png");
    System.IO.MemoryStream ms = new System.IO.MemoryStream(bytes);
    System.Drawing.Image imgToInsert = System.Drawing.Image.FromStream(ms);

    e.Image.InsertImage(position, imgToInsert);
}

Regards,
Vessy
Telerik