We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Is a stand-alone version of the FileExplorer available?

Thread ID:

Created:

Updated:

Platform:

Replies:

118808 Apr 10,2015 10:04 AM Apr 24,2015 03:35 AM ASP.NET MVC 9
loading
Tags: FileExplorer
Paul Meems
Asked On April 10, 2015 10:04 AM

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 [Syncfusion]
Replied On April 13, 2015 08:37 AM

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
Replied On April 16, 2015 05:16 PM

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 [Syncfusion]
Replied On April 17, 2015 08:38 AM

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
Replied On April 17, 2015 02:53 PM

Thanks it is working now.

Paul

Balamurugan P [Syncfusion]
Replied On April 20, 2015 06:16 AM

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

Paul Meems
Replied On April 21, 2015 03:07 PM

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 [Syncfusion]
Replied On April 22, 2015 07:34 AM

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
Replied On April 23, 2015 03:02 PM

And again you help saved my day!

My form is now nicely working with the image controls.

Thanks,

Paul

Balamurugan P [Syncfusion]
Replied On April 24, 2015 03:35 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;