@Url.Content with external js file

Question

I am using blueimp upload library. I have upload code in different javascript file. I am using ASP.Net MVC. I want to get root of my application through Url.Content("~") or something else (if any). I tried this amswer but it's giving me literal '@Url.Content("~")' as a result. So I thought to use data-* of html. Now my file upload looks like

 <input type="file" name="files[]" data-root ='<%= @Url.Content("~/") %>' multiple/>

and upload code is

$('input:file', subscriber).fileupload({
                dataType: 'json',
                url: $(this).data('root')+'ControllerName/ActionName',
                done: function (e, data) {
                    if (!data || !data.result || !data.result.length) {
                        alert("Error occured when uploading the file");
                        return;
                    }

                    if (data.result[0].error) {
                        alert("Error occured. " + data.result[0].error);
                        return;
                    }

                    LoadHtmlInDiv('AssigneeDocList', '/Assignee/DocumentList');
                },
                fail: function (e, data) {
                    alert("Error occured when uploading the file");
                }
            });

but it's giving Error 404 because new url is like

/ProjectName/ControllerName/undefinedControllerName/ActionName

I tried to check value of the same in fail callback, it's proper. Don't know why it's wrong with making url.

score 1 · Accepted Answer · answered Feb 22 '16 at 13:17

I am assuming your <input/> tag is inside a form. If so, you can just pass empty string as url. blueimp upload upload uses the form's action method url as base and appends its own url part to it. That why you are getting url like this

/ProjectName/ControllerName/undefinedControllerName/ActionName

In my own code I declared my form like -

@using (Html.BeginForm("Upload", "Document", FormMethod.Post, new { enctype = "multipart/form-data" }))

and my input tag was inside it like -

<input id="fileupload" type="file" name="file" />

and javascript -

$('#fileupload').fileupload({
    url: '',
    dataType: 'json',
    add: function (e, data) {},
    done: function (e, data) {},
    progressall: function (e, data) {}
});

I have removed the function implementations, but you can get the idea. This post the file to

/Document/Upload

I have nested form, and it is finding parent form's action instead of closest form action — Imad, Feb 22 '16 at 14:25
I don't think it's a good idea to nest `form` tags. Isn't there any way to place them separately? — th1rdey3, Feb 23 '16 at 04:05

@Url.Content with external js file

1 Answers1