Imad
Imad

Reputation: 7490

@Url.Content with external js file

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.

Upvotes: 1

Views: 1276

Answers (1)

th1rdey3
th1rdey3

Reputation: 4358

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

Upvotes: 1

Related Questions