Jquery drag and drop issue in partial view

Question

I have a partial View that can upload files using drag and drop. I wrote a script like this:

<script>
    $(function () {

        $('#dropArea').filedrop({
            url: '@Url.Action("Desert1Content")',
            allowedfiletypes: ['image/jpeg', 'image/png', 'image/gif'],
            allowedfileextensions: ['.jpg', '.jpeg', '.png', '.gif'],
            paramname: 'files',
            maxfiles: 5,
            maxfilesize: 5, 
            dragOver: function() {
                $('#dropArea').addClass('active-drop');
            },
            dragLeave: function() {
                $('#dropArea').removeClass('active-drop');
            },
            drop: function() {
                $('#dropArea').removeClass('active-drop');
            },
            afterAll: function(e) {
                $('#dropArea').html('file uploaded successfully');
            },
            uploadFinished: function(i, file, response, time) {
                $('#uploadList').append('<li class="list-group-item">' + file.name + '</li>');
            }
        });
    });
</script>

This code works fine when I run the page independently. But when this Partial View loads in a view and I drag a file into the upload zone I get this error:

This is my controller:

public PartialViewResult Desert1Content(IEnumerable<HttpPostedFileBase> files)
{
    if (files!=null)
    {
        foreach (var file in files)
        {
            string filePath = Guid.NewGuid() + Path.GetExtension(file.FileName);
            file.SaveAs(Path.Combine(Server.MapPath("~/UploadFiles"), filePath));

        }
        return PartialView();
    }
    return PartialView();
}

Update, I think I found the problem. but not the solution for it. the problem is I added jquery.js files to my shared Layout. running partial view without using shared layout works without any problems. when I use shared Layout(for test) on this partial view. the problem appears. the thing is, to make this work both jquery-1.10.2.min.js and jquery.filedrop.js should be added on this page. the script will not work if the files are referenced in shared layout. and this will make conflict and make that error.

What browser are you using to launch that request ? It maybe not related to the patialView itself. Rather to the implementation of the Ajax upload function...Try it in different browsers (Firefox should work) — Jason Krs, Aug 13 '17 at 18:03
i tried 4 different browsers including fire fox. each one them return same error — Hossain Ehsani, Aug 13 '17 at 20:28

score 0 · Answer 1 · answered Aug 13 '17 at 22:43

Try to use

<script type="text/javascript" src="<path to your .js file>" defer></script>

The defer attribute which works only for external scripts (i.e scr must exist in script declaration) will defer the execution of the script until the page has loaded. w3schools defer attribute

Since partial views load before any parent view, using defer will ensure what you want.

Anyways, if that still doesn't work, I'd suggest you simply reference your Javascript files (JQuery, and other scripts) needed in the partial view inside them.

Try this read this also : How to use jquery in partial view asp.net mvc 4

Jquery drag and drop issue in partial view

1 Answers1