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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

I hope MVC Overwrites the url in my javascript

Thread ID:





141153 Nov 27,2018 10:09 AM UTC Nov 28,2018 05:24 AM UTC JavaScript - EJ 2 1
Tags: Uploader
Asked On November 27, 2018 10:09 AM UTC

I have a File upload control in my mvc project which should preview the selected images and delete if needed before uploading. This Code Works Fine in Normal (.html)view, but it does not render the images when it is added to my mvc project that is in my (.cshtml) view:




    <link rel="stylesheet" rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        #drop-zone {
            margin-left: 32%;
            margin-top: 15%;
            width: 500px;
            min-height: 150px;
            border: 3px dashed rgba(0, 0, 0, .3);
            border-radius: 5px;
            font-family: Arial;
            text-align: center;
            position: relative;
            font-size: 20px;
            color: #7E7E7E;

            #drop-zone input {
                position: absolute;
                cursor: pointer;
                left: 0px;
                top: 0px;
                opacity: 0;

            #drop-zone.mouse-over {
                border: 3px dashed rgba(0, 0, 0, .3);
                color: #7E7E7E;
        /*If you dont want the button*/

        #clickHere {
            display: inline-block;
            cursor: pointer;
            color: black;
            font-size: 17px;
            width: 150px;
            border-radius: 4px;
            background-color: #F5D56D;
            padding: 10px;

            #clickHere:hover {
                background-color: #FCE085;

        #filename {
            margin-top: 10px;
            margin-bottom: 10px;
            font-size: 14px;
            line-height: 1.5em;

        .file-preview {
            background: #ccc;
            border: 5px solid #fff;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
            display: inline-block;
            width: 60px;
            height: 60px;
            text-align: center;
            font-size: 14px;
            margin-top: 5px;

        .closeBtn:hover {
            color: red;
            display: inline-block;

    <link rel='nofollow' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    @using (Html.BeginForm("UploadImage", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
        <div id="drop-zone">
            <p>Drop files here...</p>
            <div id="clickHere">
                or click here.. <i class="fa fa-upload"></i>
                <input type="file" name="file" id="file" multiple />
            <div id="filename">
            <button type="submit" class="btn btn-success"> Upload</button>

    var dropZoneId = "drop-zone";
    var buttonId = "clickHere";
    var mouseOverClass = "mouse-over";
    var dropZone = $("#" + dropZoneId);
    var inputFile = dropZone.find("input");
    var finalFiles = {};
    $(function() {

        var ooleft = dropZone.offset().left;
        var ooright = dropZone.outerWidth() + ooleft;
        var ootop = dropZone.offset().top;
        var oobottom = dropZone.outerHeight() + ootop;

        document.getElementById(dropZoneId).addEventListener("dragover", function(e) {
            var x = e.pageX;
            var y = e.pageY;

            if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
                    top: y - 15,
                    left: x - 100
            } else {
                    top: -400,
                    left: -400

        }, true);

        if (buttonId != "") {
            var clickZone = $("#" + buttonId);

            var oleft = clickZone.offset().left;
            var oright = clickZone.outerWidth() + oleft;
            var otop = clickZone.offset().top;
            var obottom = clickZone.outerHeight() + otop;

            $("#" + buttonId).mousemove(function(e) {
                var x = e.pageX;
                var y = e.pageY;
                if (!(x < oleft || x > oright || y < otop || y > obottom)) {
                        top: y - 15,
                        left: x - 160
                } else {
                        top: -400,
                        left: -400

        document.getElementById(dropZoneId).addEventListener("drop", function(e) {
            $("#" + dropZoneId).removeClass(mouseOverClass);
        }, true);

        inputFile.on('change', function(e) {
            finalFiles = {};
            var fileNum = this.files.length,
                initial = 0,
                counter = 0;

            $.each(this.files, function(idx, elm) {
                finalFiles[idx] = elm;


            for (initial; initial < fileNum; initial++) {
                counter = counter + 1;

                $('#filename').append('<div id="file_' + initial + '"> <img src="file:///C:/Users/Ashwanth/Pictures/'+this.files[initial].name+'")/><span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span>' + this.files[initial].name + '<br><Button   class=" btn btn-primary closeBtn" onclick="removeLine(this)" title="remove">Remove</Button></div>');



    function removeLine(obj) {
        var jqObj = $(obj);
        var container = jqObj.closest('div');

        var index = container.attr("id").split('_')[1];

        delete finalFiles[index];

I hope MVC Overwrites the url in my javascript. 

Let me know Any Ideas?



Prince Oliver [Syncfusion]
Replied On November 28, 2018 05:24 AM UTC

Hi Sailaja, 

Thank you for contacting Syncfusion support. 

You can check our EJ2 Uploader JavaScript control which allows to create preview images after selecting the images. You can then either upload or remove the selected image directly from the preview itself. You can check this example in our online demo site: https://ej2.syncfusion.com/javascript/demos/#/material/uploader/image-preview.html  

Instead of using JavaScript code in the MVC application, you can use our EJ2 MVC Uploader control. Kindly refer to the following demo link: https://aspnetmvc.syncfusion.com/Uploader/ImagePreview#/material 

To use our uploader control in your application, kindly refer to the following Getting Started documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/uploader/getting-started/  

Please let us know if you need assistance regarding our controls. 



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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon