1. Home
  2. Forum
  3. ASP.NET Web Forms (Classic)
  4. Sample Use case to access the upload file information in Save Button

Sample Use case to access the upload file information in Save Button

Hi,

I have a form which has fields as below

----------------------------------------------
Name: [TextBox]
Age: [TextBox]
Resume: [SyncFusion UploadBox]

[Save]
----------------------------------------------

The uploaded pdf file is saved successfully by the saveFiles.ashx HTTP handler.
I am also able to access file info in the Complete event of the UploadBox Control.

However I am not able to access any of the file information in the click event of the [Save] button. Even when checking HasFiles property it shows zero.

My requirement is: I want to add code in the OnClick of the [Save] button to access Name, Age and Resume so I can save this form data in the database. 
DB Fields:
NAme varchar(100)          -- Store Name
Age int                               -- Store Age
FileName varchar(250)     -- Store Uploaded FileName with extension
FileData BinaryData          -- Store the binary file content of the Uploaded file.

Thanks
Avinash Tauro

6 Replies
KR Keerthana Rajendran Syncfusion Team May 13, 2020 09:36 AM UTC

Hi Avinash, 
 
Greetings from Syncfusion support.  
 
Based on your update regarding complete event of Uploadbox and save handler file,  we suspect that you are using Asp.Net WebForms UploadBox as Asp.Net Classic Uploadbox doesn’t have complete event. If so, you can use Synchronous upload of EJ1 Uploadbox through which you can get the selected file details in form post method and textbox values using Id as shown in the below image. 
 
 
 
 
 
With Synchronous upload, you can choose the file to be uploaded and once form is submitted save action will take place and here you can fetch the form details as per your requirement. Please refer to the following code used in post method to get file details. 
 
protected void post_Click(object Sender, Syncfusion.JavaScript.Web.ButtonEventArgs e) 
        { 
            string targetFolder = HttpContext.Current.Server.MapPath("uploadfiles"); 
            if (!Directory.Exists(targetFolder)) 
            { 
                Directory.CreateDirectory(targetFolder); 
            } 
            if (Upload1.HasFiles) 
            { 
                string UserName = Name.Text; 
                string UserAge = Age.Text; 
                for (int i = 0; i < Upload1.PostedFiles.Count; i++) 
                { 
                    string fileName = Upload1.PostedFiles[i].FileName; 
                    int indx = fileName.LastIndexOf("\\"); 
                    if (indx > -1) 
                    { 
                        fileName = fileName.Substring(indx + 1); 
                    } 
                    Upload1.PostedFiles[i].SaveAs(targetFolder + "\\" + fileName); 
                } 
            } 
        } 
 
 
We have attached a sample for your reference in the following link.  
 
 
 
If we have misunderstood, kindly revert us with additional details on your requirement with exact platform used in your end.  
 
Regards, 
Keerthana.  
 


AV Avinash May 13, 2020 07:58 PM UTC

Wow you guys are good and quick. Thanks for that quick reply.
Just a followup question,
When I click on Browse, it shows me the "Upload Box" popup with the filename displayed, like this.


I have to drag it away, before I can click on the [Save] button.
Can we hide the popup on clicking Browse, and just show the uploaded filename in a label with an x button like below.

Thanks
Avinash Tauro

MK Muthukrishnan Kandasamy Syncfusion Team May 14, 2020 03:25 PM UTC

 
Thanks for the update. 
 
We have validated your requirements in UploadBox control. To achieve this requirement we can use the ShowFileDetails property to hide the file upload dialog. Please refer to the below documentation link to know more about file details. 
 
 
We can also get the selected file details in the ClientSideOnFileSelect event. Using this event, we can add the file name in the label. We have prepared sample to meet your requirement, please refer to the below link for the sample. 
 
 
 
Please refer the below screenshot of attached sample. 
 
 
 
 
Please refer to the below link for API documentation of UploadBox. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


AV Avinash May 15, 2020 11:37 AM UTC

Awesome as always.
Works perfectly.

Thank you and keep up the good work.

AV Avinash May 15, 2020 01:53 PM UTC

Sorry, I have one more query on the project
I added an clientOnError event to display a custom message if user uploads larger than 5 MB.

On the UploadBox, I set FileSize="5242880" and handled ClientSideOnError along with ClientSideOnFileSelect
     <ej:UploadBox ID="UploadBoxHandHistory" runat="server" AsyncUpload="false"
          ExtensionsAllow=".zip" FileSize="5242880" ShowFileDetails="false"
    ClientSideOnError="onError" ClientSideOnFileSelect="complete">
     </ej:UploadBox>


Now it calls the ClientOnError correctly but it also calls the ClientOnFileSelect.
Is there a way in ClientOnFileSelect event, to check if an error has occured?



MK Muthukrishnan Kandasamy Syncfusion Team May 18, 2020 09:07 AM UTC

Hi Avinash, 
 
Thanks for the update. 
 
We are glad to know that previously provided solution helped you to resolve your issue. 
 
We have validated your requirement in EJ UploadBox control. We can show the custom error message using ClientSideOnError event. However, we can also use ClientSideOnFileSelect event. In this event we can get the selected file size, using this file size we can check whether the selected file size is greater than assigned file size. If the Selected file size is greater than assigned file size then you can perform custom functionality based on your requirement. Please refer to the below code block. 
 
<ej:UploadBox ID="Upload1" runat="server" AsyncUpload="false" ExtensionsAllow=".zip" FileSize="5242880" ShowFileDetails="false" ClientSideOnFileSelect="complete"> 
</ej:UploadBox> 
 
<script> 
        function complete(args) { 
            if (args.files[0].size > this.model.fileSize) { 
                alert("This file too large"); 
            } 
        } 
</script> 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


Loader.
Up arrow icon