1. Home
  2. Forum
  3. Angular
  4. Need Help for Upload box control in EJ1

Need Help for Upload box control in EJ1

Hi Team ,

  I am divakaran .   we are working on the Angular 4 with typescript and Asp.net Core Web API .  We are using your EJ1 products in our Project.

 1, In my screen , I have list , Add and Edit action . 

2, In Add Page , I have some input type fields and also upoadbox field . I want to upload a multiple file with upload box control using Asp.net core Web API.

3,  After upload the files, i want to show the files in the Grid . 

4,  then After clicking the "add" Button , i want to save the fields in one table and attachment in another table with primary and foreign key relationship.

5, In Edit mode , I want to filled the attachement files in the grid and also filled .

Please tell me how to do this . I have an idea to proceed with this using jquery with sysncfusion . But i dont have idea on typescript . Please do needful on this .

We are waiting for your valauble inputs .

Thanks,
Divakaran N


 

6 Replies
DI divakar July 27, 2018 05:15 AM UTC

Hi Team ,

               Any updates on my request . 


Thanks,
Divakaran N

PK Prasanna Kumar Viswanathan Syncfusion Team August 3, 2018 01:27 PM UTC

Hi Divakaran, 

Query:  I want to upload a multiple file with upload box control using Asp.net core Web API.   
 
In uploadbox control, you can get the files using control name.  

Please find the code example for uploadbox with webAPI.  

<code>  
 
<div style="width:100px;height:35px;">  
    <ej-uploadbox id="uploadDefault" [saveUrl]="saveURL" ></ej-uploadbox>  
</div>  
 
</code>  
<code>  
 
export class AppComponent {  
    saveURL: string;  
    constructor() {  
        this.saveURL = 'api/Upload/Save';  
    }  
}  
</code>  

<code>  
  [Produces("application/json")]  
    [Route("api/Upload")]  
    public class UploadController : Controller  
    {  
        private IHostingEnvironment hostingEnv;  
  
        public UploadController(IHostingEnvironment env)  
        {  
            this.hostingEnv = env;  
        }  
        public void Post([FromForm]IList<IFormFile> uploadDefault) 
        { 
            long size = 0; 
            foreach (var file in uploadDefault) 
            { 
                var filename = ContentDispositionHeaderValue 
                                .Parse(file.ContentDisposition) 
                                .FileName 
                                .Trim('"'); 
                filename = hostingEnv.WebRootPath + $@"\{filename}"; 
                size += file.Length; 
                using (FileStream fs = System.IO.File.Create(filename)) 
                { 
                    file.CopyTo(fs); 
                    fs.Flush(); 
                } 
            } 
    }  
 
</code>  

Please refer the documentation for create a ASP.Core with Angular 4 sample : https://help.syncfusion.com/angular/gettingstarted/getting-started-with-dotnet-cli?cs-save-lang=1&cs-lang=html#synopsis   

Query: i want to show the files in the Grid 
 
We have achieved this requirement by using upload box success event. Please refer the following code snippet:  

App.component.html: 
 
<div style="width:100px;height:35px;"> 
    <ej-uploadbox id="uploadDefault" [saveUrl]="saveURL" (success)=complete($event) ></ej-uploadbox> 
</div> 
 
<ej-grid id="Grid" [dataSource]="gridData" > 
    <e-columns> 
        <e-column field="Name" headerText="Name"></e-column> 
     </e-columns> 
</ej-grid> 
 
App.component.ts: 
 
complete(e: any){ 
              if(this.count == undefined){ 
                     var obj = []; 
                     obj.push({Name: e.files.name}); 
                     this.gridData = obj; 
                     this.count = 1; 
              } 
              else 
                     this.gridData.push({Name: e.files.name});       
       } 

In this code we get the files details within the success event of the uploadbox. After that we have stored the file details in object format by using the gridData public variable and provided that gridData values to the grid dataSource. 

 
Refer the following link to know about success event of uploadbox: 


Regards, 
Prasanna Kumar N.S.V 
 


DI divakar August 13, 2018 10:11 AM UTC

Hi Praveen ,

 Thanks for your Support.

I need one more help . I want to send  userID along with Posted file . I saw Before send event is there in upload box. But when i tried to send ID and retrieve that ID in WebAPI is not working.

Please advice me on this . 


Thanks,
Divakaran N

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 13, 2018 12:22 PM UTC

Hi Divakaran,  
 
We have prepared a sample that can be downloaded from the following location.  
 
 
We can use the begin event in the upload box control to pass additional parameters to the controller. Kindly refer to the following code snippet. 
 
<ej-uploadbox id="uploadDefault" [saveUrl]="saveURL"(success)=complete($event) (begin)=onbegin($event) ></ej-uploadbox>  


.TS 

onbegin(args: any)  
{  
    args.data = "User ID"; //set args.data for sending data to server. //   
}  


Controller 

// POST: api/Upload  
[HttpPost]  
public void Post([FromForm]IList<IFormFile> uploadDefault)  
{  
    string AdditionParam = HttpContext.Request.Form["uploadDefault_data"];// data is received here  
    long size = 0;  
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .  
}  


Regards, 
Seeni Sakthi Kumar S. 


DI divakar August 16, 2018 08:42 AM UTC

Hi Seeni ,

Thanks for your Support.

Your input was very helpful to solve my issue . One more help i need from you .

I want to send upload box control to pass 2 parameters to controller.

Please provide me details asap ..


Thanks,
Divakaran N

KV Karthikeyan Viswanathan Syncfusion Team August 16, 2018 10:39 AM UTC

Hi Divakaran, 
 
Yes, you can achieve this by using the same way for passing a value into data parameter. 
 
Please refer the below code example: 
 
<code> 
 
onbegin(args: any)   
{   
    args.data = { ID: "User ID", Name: “User Name” }; //set args.data for sending data to server. //    
}  
 
</code> 
 
<code> 
 
object AdditionParam = HttpContext.Request.Form["uploadDefault_data"]; 
 
</code> 
 
 
Regards, 
Karthikeyan V. 


Loader.
Up arrow icon