Click here to Skip to main content
15,910,661 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello,

What I would like to do is upload image with JavaScript and save that image to the Database (db)in the code behind (c#).
To save it to the db I need the uploaded image path.
Can you help me how to get the uploaded image path from the JavaScript to the code behind.
I include my .aspx file and .aspx.cs file

.aspx file

ASP.NET
<div>Upload your image </div>
   <div>
       <input type='file' id="FileUploadImage" /></div>
   <figure>
       <img id="imgPreview" alt="your image" src="Images/Maria_Hernandez.jpg" width="100" height="100" />
       <figcaption>
           <asp:Label ID="lblImagePath" runat="server"></asp:Label>
       </figcaption>
   </figure>

   <div>
       <asp:Button ID="btnSave" runat="server" Text="Save Profile" Width="140px" OnClick="btnSave_Click" />
   </div>

    <script type="text/javascript">
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#imgPreview').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#FileUploadImage").change(function () {
            readURL(this);
        });
   </script>




.aspx.cs file



C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class UploadImage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnSave_Click(object sender, EventArgs e)
        {
            // I wouldlike to save the uploaded image here
            //First I have to access the uploaded image path from the JavaScript ???
        }
    }
}
Posted
Updated 8-Jan-15 11:33am
v2
Comments
CHill60 16-Jan-15 10:39am    
Have a try at the code for the btnSave_Click event then amend your question if you still have problems.
We don't even know what database you are using so we can't write that code for you
websource 17-Jan-15 3:22am    
Thanks I tried and it is working fine.

1 solution

The path of the image won't do you any good - it will be a local path on the user's computer, which your code running on the server won't be able to access.

What you need to do is read the content of the file which has been posted to the server.

Either add runat="server" to your file input and access the PostedFile property:
aspx
<input type='file' id="FileUploadImage" runat="server" />

C#
protected void btnSave_Click(object sender, EventArgs e)
{
    HttpPostedFile theFile = FileUploadImage.PostedFile;
    ...
}

or give the file input a name and use the Request.Files collection:
aspx
<input type='file' id="FileUploadImage" name="FileUploadImage" />

C#
protected void btnSave_Click(object sender, EventArgs e)
{
    HttpPostedFile theFile = Request.Files["FileUploadImage"];
    ...
}

Now you've got an HttpPostedFile instance[^] representing the uploaded file, you can either save it to disk[^], or use the InputStream property[^] to read the content of the file into a byte array, which you can then store in the database.

For example: http://www.aspsnippets.com/Articles/Save-Files-to-SQL-Server-Database-using-FileUpload-Control.aspx[^]
 
Share this answer
 
Comments
websource 17-Jan-15 3:36am    
Thank you, If I put runat=server my uploaded image preview is not working in the JavaScript.
the second part is working fine.
I have another question related, If I am using the input for multiple file, is there a way to manualy cutomize or change the HttpFileCollection and HttpPostedFile in the JavaScript.
Richard Deeming 19-Jan-15 4:19am    
If you're using a master page, or other naming container, adding runat="server" will mean that the control's ID will change. You can either add ClientIDMode="Static" to force the ID to remain the same, or change the selector in your javascript code ($("#FileUploadImage").change(...)

The HttpPostedFileCollection and HttpPostedFile are built on the server based on the files which were uploaded. The only way to change them is to change which files you upload.
websource 19-Jan-15 16:43pm    
Thank you

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900