Translate

> > Angular File, Image data manipulation

Angular File, Image data manipulation

Posted on Monday, March 8, 2021 | No Comments

 HTML

 

 <div class="col-md-6">

          <div class="col-md-12">
            <br>
            <br>
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text">NID Image</span>
                </div>
                <div class="custom-file">
                  <input type="file" class="custom-file-input" #file
                         name="imageFile" (change)="fileChange($event)"
                         id="inputGroupFile01"
                         >
                  <label class="custom-file-label" for="inputGroupFile01">{{FilePath}}</label>
                </div>
              </div>
            </div>

          </div>

          <div class="col-md-12">
            <div class="row">
                <div class="col-md-3">

                </div>

                <div class="col-md-6">
                  <div class="card" >
                    <div class="el-card-item">
                        <div class="el-card-avatar el-overlay-1"> 
                          <img [src]="nidImageData" alt="user" width="200" height="100">
                        </div>
                        <div class="el-card-content">
                            <br> 
                        </div>
                    </div>
                  </div>
                </div>

                <div class="col-md-3">

                </div>
            </div>
            
          </div>
 
 
 

 TypeScript

file: File
FilePath: string='Choose file';
nidImageData:string;

fileChange(event) {
  let fileList: FileList = event.target.files;
  if (fileList.length > 0{
    this.file = fileList[0];
    this.FilePath = this.file.name;
    //let fileSize: number = fileList[0].size;
    //if (fileSize <= 10485760) {
      
    //}
    //else {
    //  this.alertService.error("File size is exceeded");
    //}

    const reader = new FileReader();
    reader.readAsDataURL(this.file); // toBase64
    reader.onload = () => {
      this.nidImageData = reader.result as string; // base64 Image src
    };

  }
  else {
    this.alertService.error("Something went Wrong.");
    this.FilePath ='Choose file';
}
}  

 

  let formData: FormData = new FormData();
  formData.append('Document', this.file);

  this._http.post<Result>(this.env.apiUrl + url, formData).subscribe(result => {
    console.log(result);
    this.resultMaster = result;
    if (this.resultMaster.Status == true{
      console.log(this.resultMaster);
      // this.designationList = JSON.parse(this.resultMaster.Data);
      this._alertService.success('Data Saved Successfully');

      this._file.nativeElement.value = '';

      this.model = new ProductSetup();
      this.rerender();


    } else {
      this._alertService.error(this.resultMaster.Message);

      //window.scroll(0, 0);

    }

  }, error => {
    this._alertService.error(error);

    //window.scroll(0, 0);

  });

 

.NET CORE API

 

[Authorize(Policy = nameof(Policy.Account))]
        [HttpPost("create")]
        public ActionResult Create() //[FromBody] Supplier request
        {
            try
            {
                var DocumentMain = JsonConvert.DeserializeObject<Supplier>(Request.Form["DocumentMain"].ToString());
                var DocumentDoc = JsonConvert.DeserializeObject<SupplierDoc>(Request.Form["DocumentDoc"].ToString());

                if(Request.Form.Files.Count > 0)
                {
                    foreach(var d in Request.Form.Files)
                    {
                        IFormFile file = d;
                        switch (file.Name)
                        {
                            case "Document1":
                                using (var ms = new MemoryStream())
                                {
                                    file.CopyTo(ms);
                                    DocumentDoc.TradeFile = ms.ToArray();
                                    DocumentDoc.TradeFileType = file.FileName;
                                }
                                break;

...............

.....................

Leave a Reply

Powered by Blogger.