Is a stand-alone version of the FileExplorer available?

[Paul Meems]

In my admin form I have a textbox which will hold a relative url of an image.

I now paste in the url manually. It would be great if I could fill it using the FileExplorer or ImageExplorer which are already part of the RTE.

Then I can browse my image folder and visually select the needed image.

Is this possible? If so can you provide an example?

Thanks,

Paul

[Balamurugan P]

Hi Paul,
Thanks for using Syncfusion Products.
We have prepared a sample for your requirement using File Explorer control. Please find the sample from the following location: http://www.syncfusion.com/downloads/support/forum/118808/TextBox_FileExplorer865628357.zip

Here have we provided an insert link option in right side of the textbox. While clicking the insert link button, file explorer will be opened inside the dialog box. Using this, we can browse our required files from the given file system. If we select any file, then selected image URL will be updated in the text box.
Please refer below code snippet:
Code snippet [CSHTML]:

@* rendering textbox and button, which is used to insert image link *@

@Html.TextBox("TextBox", "URL", new { style = "width: 300px;height:21px;" })

@Html.EJ().Button("button11").Text("Login").Size(ButtonSize.Normal).ShowRoundedCorner(true).ContentType(ContentType.ImageOnly).PrefixIcon("e-hyperlink").ClientSideEvents(e => e.Click("btnClick"))

<div id="basicDialog" title="Image Browser">

<div id="fileExplorer"></div>

</div>

Code snippet [JavaScript]:

//rendering dialog

$("#basicDialog").ejDialog({ showOnInit: false, height: "auto", width: "auto", enableResize: false });

//dialog object creation

var dialogObj = $("#basicDialog").data("ejDialog");

//dialog will be opened with fileexplorer, while clicking insert url button

function btnClick(args) {

dialogObj.open();

if (!$("#basicDialog").find(".e-fileexplorer").length) {

//rendering fileexplorer

$("#fileExplorer").ejFileExplorer({

fileTypes: "*.png, *.gif, *.jpg, *.jpeg",

height: 350,

width: 800,

layout: "list",

path: "~/FileExplorerContent/",

ajaxAction: "/FileExplorer/FileActionDefault",

select: "updatePath"

});

}

}

//path will be updated in textbox, while selecting files

function updatePath(args) {

$("#TextBox").val(args.path);

}

Please let us know if this helps.
Regards,
Balamurugan P

[Paul Meems]

Thanks for the code example.

It works great.

I have just one additional question.

I have multiple textboxes in the same form I wish to use the file browser with.

I've been trying to get it to work, but I'm having trouble changing this piece;

function updatePath(args) {

 $("#TextBox").val(args.path);

}

I need to change it to a more generic approach and put somehow the id of the textbox in the arguments.

I've tried several options but can't get it to change.

I tried mis-using the Text property of the button, but that doesn't seems to work.

Could you please assist me once more?

Thanks for your help and for these great controls.

Paul

[Balamurugan P]

Hi Paul,
Thanks for your update
Query: I need to change “updatePath” method into a more generic approach
You can achieve this requirement by getting correspondent textbox element at button click. Whenever you click a button, corresponding textbox element will be updated to “updateTextBox” variable. Using this variable, we can set URL value for corresponding textbox in “updatePath” method. This is a generic way of updating corresponding textbox. Please refer below code snippet.
Code snippet [CSHTML]:

@Html.TextBox("TextBox", "URL", new { style = "width: 300px;height:21px;" })

@{IDictionary<string, object> parameters = new Dictionary<string, object>();

parameters.Add("data_textbox_id", "TextBox");

}

@*here we have added custom attribute using HtmlAttributes API*@ @Html.EJ().Button("insertImageURL").Text("Login").HtmlAttributes(parameters).Size(ButtonSize.Normal).ShowRoundedCorner(true).ContentType(ContentType.ImageOnly).PrefixIcon("e-hyperlink").ClientSideEvents(e => e.Click("btnClick"))

Code snippet [JavaScript]:

var updateTextBox;

function btnClick(args) {

//Here "data_textbox_id" attribute contains the corresponding textbox id

updateTextBox = $("#" + this.element.attr("data_textbox_id"));

}

//path will be updated in corresponding textbox, while selecting files using fileexplorer

function updatePath(args) {

updateTextBox.val(args.path);
}

We have prepared a sample based on this and you can find the sample under the following location:
Sample : http://www.syncfusion.com/downloads/support/forum/118808/TextBox_FileExplorer-455945429.zip
Please let us know if this helps.
Regards,
Balamurugan P

[Paul Meems]

Thanks it is working now.

Paul

[Balamurugan P]

Hi Paul,
Thanks for the update.
Please get back to us, if you would require any further assistance.
Thanks,
Balamurugan P

[Paul Meems]

I've got one more question.

I've merged your sample with my form but when I click the button to open the image browser the form is submitted.

In my Create form I solved this by not filling in a required field, so it will not submit.

But for my Edit form all fields are filled in so I can't stop the submit event.

I create my form using

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <div class="form-group">
                @Html.EditorFor(model => model.AdImage, new { @class = "form-control" })
                @Html.EJ().Button("btnAdImage").Text("AdImage").Size(ButtonSize.Normal).ShowRoundedCorner(true).ContentType(ContentType.ImageOnly).PrefixIcon("e-hyperlink").ClientSideEvents(e => e.Click("openImageBrowserClick"))
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
        
        <div id="basicDialog" title="Image Browser">
            <div id="fileExplorer"></div>
        </div>
    </div>
}

I think I need to set another property of EJ().Button but I can't find which one.

Could you provide yet another code snippet?

Thanks,

Paul

[Balamurugan P]

Hi Paul,
We would like to inform you that, by default our button type is "submit". So it will automatically submit a form, while clicking a button. To achieve your requirement change the button type as "button" so it will behave like normal button. Please refer below code.
Code snippet [CSHTML]:

@Html.EJ().Button("insertImageURL").Text("Login").Type(ButtonType.Button).HtmlAttributes(parameters).Size(ButtonSize.Normal).ShowRoundedCorner(true).ContentType(ContentType.ImageOnly).PrefixIcon("e-hyperlink").ClientSideEvents(e => e.Click("btnClick"))

Please let us know if this helps.
Regards
Balamurugan P

[Paul Meems]

And again you help saved my day!

My form is now nicely working with the image controls.

Thanks,

Paul

[Balamurugan P]

Hi Paul,
Thanks for the update.
Please get back to us, if you would require any further assistance.
Thanks,
Balamurugan P