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

I hope MVC Overwrites the url in my javascript

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:

@{

}

<h2>UploadImage</h2>


<head>
    <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>
    <title>Sample</title>
    <style>
        #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;
            }
            /*Important*/

            #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;
        }
    </style>
</head>

<body>
    <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>
            <div id="filename">
            </div>
            <button type="submit" class="btn btn-success"> Upload</button>
        </div>

        }
    </body>
<script>
    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) {
            e.preventDefault();
            e.stopPropagation();
            dropZone.addClass(mouseOverClass);
            var x = e.pageX;
            var y = e.pageY;

            if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
                inputFile.offset({
                    top: y - 15,
                    left: x - 100
                });
            } else {
                inputFile.offset({
                    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)) {
                    inputFile.offset({
                        top: y - 15,
                        left: x - 160
                    });
                } else {
                    inputFile.offset({
                        top: -400,
                        left: -400
                    });
                }
            });
        }

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


        inputFile.on('change', function(e) {
            finalFiles = {};
            $('#filename').html("");
            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) {
        inputFile.val('');
        var jqObj = $(obj);
        var container = jqObj.closest('div');

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

        delete finalFiles[index];
        console.log(finalFiles);
    }
</script>

I hope MVC Overwrites the url in my javascript. 

Let me know Any Ideas?


Thanks,

Sailaja.


1 Reply

PO Prince Oliver Syncfusion Team 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. 

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon