Category / Section
How to show and hide drag wrapper during upload and display file details along with uploaded path after upload.
1 min read
Description
To show and hide drag wrapper during upload and display file details along with uploaded path after uploading.
Solution
Drag and drop wrapper can be hidden or shown through the cssClass property of ejUploadBox. Refer to the following code
<div class="frame">
<div class="control">
Select a file to upload
<div class="posupload">
@Html.EJ().Uploadbox("UploadDefault").SaveUrl("SaveDefault").CssClass("custom").RemoveUrl("RemoveDefault").AllowDragAndDrop(true).ClientSideEvents(e=>e.Begin("onbegin").Success("onSuccess").Error("onError"))
</div>
<div id="filedetail" style="float:right;">
<h3>Uploaded file Details</h3>
</div>
</div>
</div>
To hide the drag wrapper and text during upload, you can set “display” and “border” css for corresponding class in begin event of ejUploadBox.
<script>
function onbegin(args)
{
$(".custom.e-drag-wrapper").css("border", "none");
$(".custom .e-drag-text").css("display", "none");
}
</script>
You can make this wrapper visible in success event of ejUploadBox after successful upload. Return the path from the controller in which the file has been saved and this can be retrieved through “args.responseText” of the success event. Display this detail along with file details on the page as follows
public ActionResult SaveDefault(IEnumerable<HttpPostedFileBase> UploadDefault)
{
var path="";
foreach (var file in UploadDefault)
{
var fileName = Path.GetFileName(file.FileName);
var destinationPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
path = destinationPath;
file.SaveAs(destinationPath);
}
return Content(path);
}
function onSuccess(args)
{
$(".custom.e-drag-wrapper").css("border", "dashed 3px #c1c3c5");
$(".custom .e-drag-text").css("display", "block");
$("#filedetail").append("<b>File Name:</b>"+args.files.name +"<br/>"+"<b>Saved in:</b>"+args.responseText);
}
function onError(args)
{
$(".custom.e-drag-wrapper").css("border", "dashed 3px #c1c3c5");
$(".custom .e-drag-text").css("display", "block");
}
Sample: FileUpload-536953445
