File uploader with rest services

[Luis Enrique Gonzalez Castro]

Hi, i'm developing a tool for an assigment from my university, and im using angular and springboot with rest web services, so i'm trying to implement a file uploader and i'm having an issue, what i want to do is to asign the selected file to a File type variable that i declared in my component typescript, but i'm not able to do it.

In my Controller in springboot i recieve a MultipartFile type of file, i'm able to do that with a common <input type="file"> but its recieving a null value with the Syncfusion component.

I'll put the code below:

      <mat-dialog-content>

        <ejs-uploader #defaultupload allowedExtensions = '.pdf,.doc,.docx' [autoUpload]='false' multiple = 'false' [dropArea]='dropEle' [asyncSettings]='path'

           (success)="onUploadSuccess($event)" (failure)="onUploadFailure($event)" (selected)='onSelect($event)'></ejs-uploader>

      </mat-dialog-content>

      <button class="btn-ui btn-primario" ejs-button cssClass="e-link" (click)="guardar()">Guardar</button>

 file: File;

  public path: Object = {

    saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',

    removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove' };

    public onUploadSuccess(args: any): void  {

      if (args.operation === 'upload') {

          console.log('File uploaded successfully');

      }

  }

  public onUploadFailure(args: any): void  {

  console.log('File failed to upload');

  }

  public onSelect(args: any){

    this.file = args.file;

    console.log(args.filename);

  }

  public dropEle: HTMLElement ;

  ngOnInit() {

        this.dropEle = document.getElementById('droparea');

  }

[Sureshkumar P]

Hi Luis, 

 

Query 1: what i want to do is to assign the selected file to a File type variable that i declared in my component typescript 

 

Answer:  

            You can get the selected files details in our selected event. Please find the below screen shot. 

 

 

 

Query 2: In my Controller in springboot i recieve a MultipartFile type of file, i'm able to do that with a common <input type="file"> but its recieving a null value with the Syncfusion component.  

 

Answer: 

            Based on your attached code example, we suggest you render the uploader component with ID property. based on the ID property you can get the uploaded files in your service (please use same ID name in your save methods attribute to get the uploaded files). 

 

Kindly refer the code example. 

 

<ejs-uploader #defaultupload id='UploadFiles' [asyncSettings]='path' [dropArea]='dropElement' 

    (removing)='onFileRemove($event)' (selected)='onSelected($event)'></ejs-uploader> 

 

 

[DefaultController.cs] 

[HttpPost("[action]")] 

        public void Save(IList<IFormFile> UploadFiles) 

        { 

            long size = 0; 

            try 

            { 

                foreach (var file in UploadFiles) 

                { 

                    var filename = ContentDispositionHeaderValue 

                            .Parse(file.ContentDisposition) 

                            .FileName 

                            .Trim('"'); 

                    filename = hostingEnv.ContentRootPath + $@"\{FileName}"; 

                    size += (int)file.Length; 

                    if (!System.IO.File.Exists(filename)) 

                    { 

                        using (FileStream fs = System.IO.File.Create(filename)) 

                        { 

                            file.CopyTo(fs); 

                            fs.Flush(); 

                        } 

                    } 

                } 

            } 

            catch (Exception e) 

            { 

                Response.Clear(); 

                Response.StatusCode = 204; 

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload"; 

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message; 

            } 

        } 

        [HttpPost("[action]")] 

        public void Remove(IList<IFormFile> UploadFiles) 

        { 

            try 

            { 

                //getting filename using custom parameter 

                var FileName = Response.HttpContext.Request.Headers["FileName"].ToString(); 

                var filename = hostingEnv.ContentRootPath + $@"\{FileName}"; 

                if (System.IO.File.Exists(filename)) 

                { 

                    System.IO.File.Delete(filename); 

                } 

            } 

            catch (Exception e) 

            { 

                Response.Clear(); 

                Response.StatusCode = 200; 

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File removed successfully"; 

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message; 

            } 

        } 

    } 

 

 

Regards, 

Sureshkumar P