not getting file path after uploading

Hi,

Whenever we are uploading file we are not getting path of file,we are getting empty string webrelative path,

webrelativepath=' '. herewith i am attaching code for ejs uploader, after uploading file i want to store on local machine like c:/file/abc.xls


<div class="page-titles">
  <div>
    <ol class="breadcrumb">
      <li class="breadcrumb-item" tabindex="0" ng-reflect-router-link="/index">Post-Processing</li>
      <li class="breadcrumb-item active">Bulk Data Ingestion</li>
    </ol>
  </div>
</div>



<form #justAForm="ngForm" (ngSubmit)="uploadFiles($event)">

  <!-- First row  -->
  <div class="e-card">
    <div fxFlexFill class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px">
      <div fxFlex class="child-1">

        <span id="custlabelfile">File Upload</span>
         <ejs-uploader #defaultupload id='file' [asyncSettings]='path' [dropArea]='dropElement'
            (removing)='onFileRemove($event)' (change)="getFileDetails($event)"  (selected)='onFileSelect($event)' change="getAgreementTypeData($event)"[ngModel]="file" name="file"></ejs-uploader>
        <!-- <ejs-uploader #chunkupload id='chunkfileupload' [autoUpload]=false [allowedExtensions]='allowExtensions'
          (selected)='onSelect($event)'>
        </ejs-uploader> -->


      </div>

      <div fxFlex class="child-2">

        <ejs-dropdownlist floatLabelType="Always" id='documentName' name="documentName"
          [dataSource]='agreementTypeDatas' [fields]='fieldsvalues' placeholder='Select Document' popupHeight='200px'
          (change)='onDocumentSelect($event)' ngModel>
        </ejs-dropdownlist>

      </div>


      <div fxFlex class="child-3">

        <ejs-textbox placeholder="Identifier" [ngModel]="Identifier" name="Identifier" floatLabelType="Always" ngModel>
        </ejs-textbox>

      </div>

      <div fxFlex="100px" class="child-4">
        <button type="submit" cssClass="e-primary">Upload</button>
      </div>
    </div>
  </div>
</form>

<br>

<ejs-grid #grid [dataSource]='data' [allowPaging]="true" [allowSorting]="true" [allowSelection]="true"
  [allowPaging]="true" [selectionSettings]='selectionOptions' [allowFiltering]='true' [filterSettings]='filterOption'
  showColumnChooser='true' [pageSettings]='pageSettings'>

  <e-columns>

    <e-column textAlign='Left' width='180' field='Identifier' headerText='Identifier'></e-column>

    <e-column textAlign='Left' width='250' field='file' headerText='Transaction Name'></e-column>
    <e-column textAlign='Left' width='160' field='FileType' headerText='Agreement Type'></e-column>
    <e-column textAlign='Left' width='190' field='CFileType' headerText='Created Time'></e-column>
    <e-column textAlign='Left' width='200' field='TypeofAgreement' headerText='Ingestion Time'>



    </e-column>


    <e-column textAlign='Left' width='200' field='TypeofAgreement' headerText='User'>



    </e-column>

    <e-column textAlign='Left' width='200' field='TypeofAgreement' headerText='Status'>



    </e-column>











  </e-columns>

</ejs-grid>


typescript file

import { Component, OnInit,ViewChild } from '@angular/core';
import { GlobalModalComponent } from '../../global-modal/global-modal.component';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { DocexecutionService } from '../../service/data/docexecution.service';
import { NgbModal, NgbTabChangeEvent, NgbTabset, NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';
import { DocumentService, DocumentType} from '../../service/data/document.service';
import { AUTHENTICATE_USER } from '../../service/hardcoded-authentication.service';
import {NgForm} from '@angular/forms';
import { SelectedEventArgs, FileInfo } from '@syncfusion/ej2-angular-inputs';

import { EmitType, detach } from '@syncfusion/ej2-base';
import { DialogUtility } from '@syncfusion/ej2-angular-popups';

@Component({
  selector: 'app-bulk-data-ingestion',
  templateUrl: './bulk-data-ingestion.component.html',
  styleUrls: ['./bulk-data-ingestion.component.css']
})
export class BulkDataIngestionComponent implements OnInit {

  @ViewChild(NgForm) form: NgForm;
  dropdownSettingsDT = {};
  documents: DocumentType[];
  docTypeName: any;

  public allowExtensions: string = '.xls, .xlsx';
  public fileName: string = "";
  public files: FileInfo[];
 
  identifier: any;
  public userName = sessionStorage.getItem(AUTHENTICATE_USER);
 // fileName = '';
  fileTypeMessage: string;
  selectedFiles: FileList;
  isUpload: boolean = true;
  fileList = [];
  text: string = "Upload";
  isLoading: boolean = false;
  model: any = {};
  agreementTypeDatas = [];
  agreementTypeDatas1 = [];
  agreementTypeDatas11 = [];
  fieldsvalues: Object;
  documetTypeId: any;
  selectedFiles1: any;
  public checkFields2:Object={ text:'documentName',value:'documentTypeId'};

  constructor(private docExecuteService: DocexecutionService, private bsModalRef: BsModalRef,
    private bsModalService: BsModalService,
    private modalService: NgbModal,private documentService: DocumentService) { }

  ngOnInit() {
    //this.loadDocuments();
this.getAgreementTypeData(event);
  }



// Getting Data
getAgreementTypeData(event) {
  this.documentService.getAllDocuments().subscribe(response => {
    if (response != null) {
      this.agreementTypeDatas = response
      this.agreementTypeDatas.forEach(data => {
        console.log(JSON.stringify(data));
     
        console.log(JSON.stringify(this.agreementTypeDatas)+"Response Data@@@@@@@@@@@@@@@@@@@@@@@@");
     
        this.agreementTypeDatas1.push(data.documentName);
    //    this.agreementTypeDatas1.push(data.documentName);
       
     
      })
      // for(var i in this.agreementTypeDatas1)
      // {
      //   this.agreementTypeDatas112.push(this.agreementTypeDatas1[i])
       
      // }
      this.fieldsvalues = { text: "documentName", value: "documentTypeId" };

 
     
    } else {
      console.log('Data not fount');
    }
  });
  this.agreementTypeDatas11 = this.agreementTypeDatas1;

    }



 
    onDocumentSelect(args)
    {
      this.documetTypeId=args.value;
      console.log("in method");
      console.log(args.value+"Value*******************************************************************************")
      console.log(args+"args*************************************************************************************************************") ;
    //  console.log(JSON.stringify(args));

    }


  //   onFileSelected(event) {

  //     const file:File = event.target.files[0];

  //     if (file) {

  //         this.fileName = file.name;

  //         const formData = new FormData();

  //       //  formData.append("thumbnail", file);

  //       //  const upload$ = this.http.post("/api/thumbnail-upload", formData);

  // //        upload$.subscribe();
  //     }

  //   }






   

 uploadFiles(rf) {
   alert("hello"+this.form.value.Identifier);


   this.identifier=this.form.value.Identifier;    
     console.log(this.documetTypeId);
     let companyId = sessionStorage.getItem("companyId");
     //this.selectedFiles=this.selectedFiles1;
     console.log(this.selectedFiles);
 
       this.docExecuteService.uploadDocumentType(this.files[0].rawFile, companyId,this.documetTypeId,this.userName,this.identifier).subscribe(
         response => {
        alert("hi"+response);
         });
     }



    public onFileSelect: EmitType<Object> = (args: any) => {
      this.selectedFiles =args.filesData[0].name;
      //this.identifier=this.form.value.Identifier;    
alert(JSON.stringify(args));

      this.files = args.filesData;
      args.cancel = true;
      if (this.files.length > 1) {
        DialogUtility.alert("Please select only one file.");
        args.cancel = true;
        return;
      } else if (this.files.length == 0) {
        DialogUtility.alert("Please select a file.");
        args.cancel = true;
        return;
      }
      this.fileName = this.files[0].name;
 

      alert(this.selectedFiles);







      // console.log(args.filesData[0].name+"hiiiiiiiiiiii")
      // let companyId = sessionStorage.getItem("companyId");
   
      // this.docExecuteService.uploadDocumentType(this.selectedFiles, companyId,this.documetTypeId,this.userName,this.identifier).subscribe(
      //   response => {
       
      //   });
   


    }


  }






3 Replies

SP Sureshkumar P Syncfusion Team March 30, 2022 12:53 PM UTC

Hi Sunil,

This is the default behavior in windows file explorer and Javascript does not include the file selected directory path in the component select event for the security purpose. Also, we can access only the folders within the application's hosted folders after uploading the selected file to your backend service. As like below.


Find the code example here:

[AcceptVerbs("Post")]

        public IActionResult Save(IList<IFormFile> UploadFiles)

        {

            try

            {

                foreach (var file in UploadFiles)

                {

                    if (UploadFiles != null)

                    {

                        var filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');

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

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

                        {

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

                            {

                                file.CopyTo(fs);

                                fs.Flush(); 

                            }

                        }

                        else

                        {

                            Response.Clear();

                            Response.StatusCode = 204;

                            Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File already exists.";

                        }

                    }

                }

            }

 


To know more about files select events not included in the file patch. Please refer to the stack overflow documentation: https://stackoverflow.com/questions/15201071/how-to-get-full-path-of-selected-file-on-change-of-input-type-file-using-jav


Regards,

Sureshkumar P



SU sunil April 5, 2022 07:15 AM UTC

Please look into the above query and provide a solution as soon as possible,as this top priority.Is it possible to set up a meeting?



SP Sureshkumar P Syncfusion Team April 6, 2022 09:38 AM UTC

We noticed that you had created a new ticket in our support portal for the same query. Please follow up on the ticket for further assistance.


Tickets | Syncfusion Support


Loader.
Up arrow icon