Adding file to the database

Question

I am trying to add file to my database but for some reason its not working can someone tell me why. This is what I've sofa:

        $(document).on("click", "#BUTTON", function () {
        var FILE= $('#name').val();

        $.ajax({
            type: "POST",
            dataType: 'json',
            url: "@Url.Action("File", "Controller")",
            data: JSON.stringify(FILE),
        contentType: "application/json; charset=utf-8",
        success: function () {

        }
    });
    });

This is what happens in my controller:

public ActionResult File(HttpPostedFileBase file)
    {
        if (file != null)
        {
            string pic = System.IO.Path.GetFileName(file.FileName);
            string path = System.IO.Path.Combine(Server.MapPath("~/path"), pic);
            // file is uploaded
            file.SaveAs(path);

            // save the image path path to the database or you can send image 
            // directly to database
            // in-case if you want to store byte[] ie. for DB
            using (MemoryStream ms = new MemoryStream())
            {
                file.InputStream.CopyTo(ms);
                byte[] array = ms.GetBuffer();
            }

        }
        // after successfully uploading redirect the user
        return Index();
    }
}

When I place a brakepoint in line HttpPostedFileBase file then file has null value I dont know why? If i do alert(FILE); then I am getting full file path e.g. G:/filename/imagename.jpg but in controller the path is no being passed?

`.val()` only returns string name of file. @Steven , not true, there are ajax methods for uploading — charlietfl, Jul 14 '14 at 13:31
@Steven You can upload files using ajax. Maybe in older browsers it won't work, but newer ones are able to. — jamesSampica, Jul 14 '14 at 13:38

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

You will not be able to post a file that way, the only thing you do is post the text value, in this case the file name.

Maybe this can help you out (another example on stack overflow)

edited May 23 '17 at 10:32

Community

1
1

answered Jul 14 '14 at 13:47

Steven

1,444
17
23

score 0 · Accepted Answer · answered Jul 14 '14 at 14:22

0

You can do this if you will use files collection of your input, so try it. And i hope it will help

$(document).on("click", "#BUTTON", function(){

//Create form data
var data = new FormData(); 

//attach your file
data.append('file', document.getElementById("fileHere").files[0]); 

//and send it on server
$.ajax({
    url: "@Url.Action("File", "Controller")",
    data: data,
    cache: false,
    contentType: 'multipart/form-data',
    processData: false,
    type: 'POST',
    success: function(data){
            }
        });
    });

answered Jul 14 '14 at 14:22

Baximilian

885
7
25

When I run the code I get error message `JavaScript runtime error: Unable to get property 'files' of undefined or null reference`. In this line ` data.append('file', document.getElementById("#name").files[0]); ` – Jul 15 '14 at 09:02
getElementById() using DOM not Jquery selector. So remove # and just type id like this document.getElementById("name") – Baximilian Jul 15 '14 at 09:06

Adding file to the database

2 Answers2