Calling uploadfile control with ajax and c# web method code

Question

How to Ajax Call with upload file control C# and one more parameter please see below code and help me this, I want to save an image with more than one parameter for update image. please help me achieve this.

I want to update an image with more than one parameter

$scope.myData.updateimage = function(item, event) {

    var data = new FormData();

    var files = $("#FileUpload1").get(0).files;

    // Add the uploaded image content to the form data collection
    if (files.length > 0) {
        data.append("UploadedImage", files[0]);
    }

    $.ajax({
        type: "POST",
        url: "contentlist.aspx/updateid",
        data: JSON.stringify({
            FileUpload: data,
            currentid: $scope.currentid
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {

        }
    });
}

C# Code

[WebMethod]
public static string updateid(FileUpload FileUpload1, string currentid)
{

    HttpContext context = HttpContext.Current;
    string baseUrl = context.Request.Url.Authority + context.Request.ApplicationPath.TrimEnd('/');

    if (FileUpload1.HasFile)
    {
        try
        {
            if (FileUpload1.PostedFile.ContentLength < 3267633)
            {
                string strname = FileUpload1.FileName.ToString();
                string url = "http://" + baseUrl + "/Images/" + strname;
                FileUpload1.PostedFile.SaveAs(url);
                int id = Convert.ToInt16(appVars.updatedid);
                string Query = "UPDATE SubCategories SET imageurl = WHERE id = " + id;
                string result = dbAccess.ExecuteOnlyQuery(Query);
            }
            else
            {


            }
        }
        catch (Exception ex)
        {

        }
    }

    return "";
}

Hari Lubovac · Accepted Answer · 2017-12-26 18:44:16Z

You might not be able to execute that AJAX call, submitting a file, because the input-file control is restricted: for security reasons, browsers do not allow client-side scripts to pick files from user's hard-drive.

So, you'll have to use the mechanism that already exists: the said input-file element must be within a form-element, which you will submit, either using a button element or an input-submit element, or by executing form.submit() when you want (e.g. within input-file's onchange event, or within an onclick of some custom button, or similar).

Again, I doubt you'll be able to find a way to get file content from JS. It's possible to have more control using Flash components, but then that's an additional complexity and dependency. Instead of going that route, you can easily style input-file control to look differently (and to even not show its button), and as far as server-side, you'll have to adjust that method for HttpPost, accepting no args (where then you'll have to find them via Request.Files).

The currentid value can perhaps be contained by input-hidden on the client, and it needs to be named, just like input-file, so that it becomes a part of the form-submit package.

I hope that helps.

Collectives™ on Stack Overflow

Calling uploadfile control with ajax and c# web method code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related