How to upload blob image from html page using javascript to c# code

Question

Currently I have this code right now,

In my html page, on the form I have this:

<input type="file" id="txtUploadFile" accept="image/*" onchange="changetext();"/>

I upload the picture using javascript on my doUpload() function

function doUpload() {
    var srwebserviceURL = "/Webservices/Facilities/ServiceRequest.asmx";
    var sMsgBody = "<filePath>" + txtUploadFile.value + "</filePath>";
    var a = sendSoapMsg(srwebserviceURL, "SaveSRLogoPhotoSite", sMsgBody, "SaveSRLogoPhotoSiteResult");
}

So as you can see from the code above, I am passing the file path of the photo to my webservice.

On my webservice, the SaveSRLogoPhotoSite, I have the ff. code:

public SRLogoPhoto SaveSRLogoPhotoSite(string filePath)
{
    DataSet ds = null;
    Hashtable param = new Hashtable();
    SRLogoPhoto srlp = new SRLogoPhoto();

    try
    {

        System.IO.FileStream fs = new System.IO.FileStream(filePath, System.IO.FileMode.Open, System.IO.FileAccess.Read);

        Byte[] b = new Byte[fs.Length];
        fs.Read(b, 0, b.Length);
        fs.Close();
        SqlParameter P = new SqlParameter("@Picture", SqlDbType.VarBinary, b.Length, ParameterDirection.Input, false, 0, 0, null, DataRowVersion.Current, b);

        string sqlStr = "UPDATE SRSiteLogo SET srImage = @Picture ";

        param.Add("Picture", P);

        ds = dbHelper.GetDataSet(sqlStr, param);

    }
    catch (Exception ex)
    {
        srlp.Error = "SaveSRLogoPhotoSite() web method failed on call to dbHelper.GetDataSet - " + ex.Message;
    }

    return srlp;
}

This is working on my local pc. But it does not seem to work when I deploy it to an environment other than my pc. When I try to debug in soapUI, it says that it cannot find the file path.

It seems that the filepath I should pass on my webservice should be on the server first instead of the filepath of the current filesystem of the pc it is in.

How do I do that?

--edit-- I was informed that this is possible using ajax..I'm new to ajax and don't know how to do it..

Thank you in advance

score 2 · Accepted Answer · answered Jun 13 '14 at 02:12

2

When you run web on local, file that you need upload and server lie on a machine, so you can determine file path and execute upload task. Howerver, when you deploy your web to another server, you can't determine path file. You have to convert file to stream and send to server, read stream, convert to expect format and go ahead. Thanks.

answered Jun 13 '14 at 02:12

PeaceInMind

1,147
3
11
32

I understand. However, is it possible to read the file in javascript? I am using IE8. I don't know how i can read the file from javascript then pass it to my c# code to convert the file to stream, and so on and etc – ifallelsefailthenstackoverflow Jun 13 '14 at 02:29
Hi @AedzMigraso, to read the file from js and pass it to c#, you can use ajax, it can help you perform that. – PeaceInMind Jun 13 '14 at 02:32
I am new to ajax and don't know how to do that.. edited my question.. if you have any links for ajax on how to do it, that would really help.. thanks – ifallelsefailthenstackoverflow Jun 13 '14 at 02:40
1

Ok, you can follow as the below links: 1. http://api.jquery.com/jquery.ajax/ 2. http://code.tutsplus.com/tutorials/5-ways-to-make-ajax-calls-with-jquery--net-6289 3. http://www.codeproject.com/Articles/41828/JQuery-AJAX-with-ASP-NET-MVC 4. http://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor – PeaceInMind Jun 13 '14 at 02:51
We dont use apache server so posting to php pages wont work.. do you have any other suggestions that will let me post image data straight to webservice? :( @ThiLK – ifallelsefailthenstackoverflow Jun 17 '14 at 07:54

How to upload blob image from html page using javascript to c# code

1 Answers1