0

I want to hide file upload control behind label I found solution for that on this link:
Styling an input type="file" button
There was a link to this example: http://jsfiddle.net/4cwpLvae/

Now by clicking on label it open file uploader and after uploading file it hides file upload tab, but I want to save file uploaded by that uploader in database throuh a function in aspx.cs file.
How may I call that function?

This link did't help for me How to call code behind function from label.text in asp.net using file uploader in label is just for styling.

Here is my function that I want to call 

 protected void Button1_Click(object sender, EventArgs e)
    {
        if (!inputfile.HasFile)
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "isActive", "Test();", true);
            //Response.Write("No file Selected"); return;
        }
        else
        {
            string filename = Path.GetFileName(inputfile.PostedFile.FileName);
            string extension = Path.GetExtension(filename);
            string contentType = inputfile.PostedFile.ContentType;

            HttpPostedFile file = inputfile.PostedFile;
            byte[] document = new byte[file.ContentLength];
            file.InputStream.Read(document, 0, file.ContentLength);
            /*  Stream fs = inputfile.PostedFile.InputStream;
              BinaryReader br = new BinaryReader(fs);
              Byte[] bytes = br.ReadBytes((Int32)fs.Length);*/
            if ((extension == ".pdf") || (extension == ".doc") || (extension == ".docx") || (extension == ".xls")
                || (extension == ".pptx"))//extension  
            {
                if (file.ContentLength <= 31457280)//size  
                {
                    FYPEntities2 obj = new FYPEntities2();
                    tblFile us = new tblFile();
                    us.Name = filename;
                    us.ContentType = contentType;
                    us.Data = document;
                    //  us.Data = bytes;
                    us.Date = DateTime.Now;
                    obj.tblFiles.Add(us);
                    ClientScript.RegisterStartupScript(GetType(), "hwa", "alert('Hello World');", true);
                    obj.SaveChanges();
                    Response.Redirect(Request.Url.AbsoluteUri);
                }
                else
                {

                    ScriptManager.RegisterStartupScript(this, this.GetType(), "isActive", "filesize();", true);
                }
            }
            else
            {
                ScriptManager.RegisterStartupScript(this, this.GetType(), "isActive", "invalidformat();", true);
            }
        }
    }
Community
  • 1
  • 1
Aneeq Azam Khan
  • 992
  • 1
  • 10
  • 23

1 Answers1

1

I think you are looking for this. Put a LinkButton on the page and give it no Text, so it is not visible for the user but does still exists.

<style>
    input[type="file"] {
        display: none;
    }

    .custom-file-upload {
        border: 1px solid #ccc;
        display: inline-block;
        padding: 6px 12px;
        cursor: pointer;
    }
</style>

<label for="<%=FileUpload1.ClientID %>" class="custom-file-upload">
    <i class="fa fa-cloud-upload">Custom Upload</i>
</label>
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<br />
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="Button1_Click"></asp:LinkButton>

Then in code behind attach an onchange attribute to FileUpload1 with the UniqueID of LinkButton1. When the upload changes, javascript will file the PostBack event of the LinkButton thus automatically uploading the file.

protected void Page_Load(object sender, EventArgs e)
{
    FileUpload1.Attributes.Add("onchange", "__doPostBack('" + LinkButton1.UniqueID + "','')");
}
VDWWD
  • 35,079
  • 22
  • 62
  • 79