Breaking News: Grepper is joining You.com. Read the official announcement!

image file upload in angular

Add Answer

KARTIK SHARMA answered on October 24, 2021 Popularity 10/10 Helpfulness 2/10

answer image file upload in angular

related file upload in angular

related upload files with angular

related upload file angular

related file upload in angular 10

related angular file upload

image file upload in angular

Comment

import { Component, OnInit } from '@angular/core';
import { FileUploadService } from './file-upload.service';
  
@Component({
    selector: 'app-file-upload',
    templateUrl: './file-upload.component.html',
    styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
  
    // Variable to store shortLink from api response
    shortLink: string = "";
    loading: boolean = false; // Flag variable
    file: File = null; // Variable to store file
  
    // Inject service 
    constructor(private fileUploadService: FileUploadService) { }
  
    ngOnInit(): void {
    }
  
    // On file Select
    onChange(event) {
        this.file = event.target.files[0];
    }
  
    // OnClick of button Upload
    onUpload() {
        this.loading = !this.loading;
        console.log(this.file);
        this.fileUploadService.upload(this.file).subscribe(
            (event: any) => {
                if (typeof (event) === 'object') {
  
                    // Short link via api response
                    this.shortLink = event.link;
  
                    this.loading = false; // Flag variable 
                }
            }
        );
    }
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: www.geeksforgeeks.org

Tags: angular javascript

Link to this answer
Share Copy Link

Contributed on Apr 20 2022

KARTIK SHARMA

0 Answers Avg Quality 2/10

Closely Related Answers

file upload in angular

Comment

<button type="button" (click)="fileInput.click()"
                style="background-color: lightseagreen;width: 159px;color: black;border-radius: 15px;">Choose
                File</button>
            <input #fileInput type="file" id="file" (change)="setFilename(fileInput.files)" hidden />
            <label>{{ filename }}</label>

 setFilename(files) {
        this.documentService.setFile("File");
        if (files[0]) {
            this.filename = files[0].name;
        }
    }
onSubmit(files) {
        if (this.attachmentType == "") {
            this.notificationService.showMessage(AlertMessageType.Error, AppConstant.selectAttachmentType);
            return;
        }
        const formData = new FormData();

        if (files[0]) {
            formData.append(files[0].name, files[0]);
            formData.append("memberId", this.memberEnrollmentHeaderId.toString());
            formData.append("attachmentType", this.attachmentType);
        }
        this.documentService.OtherFileUpload(formData).subscribe({
            next: (res) => {
                this.OECFileProcessModel = res;
                this.notificationService.showMessage(AlertMessageType.Success, AppConstant.attachmentUploadSuccess);
                this.attachmentDataList = this.Documents;
                this.UploadedFiles = [];
                this.Documents = [];
                this.getAttchmentList();

            }, error: (err) => {
                this.notificationService.showMessage(AlertMessageType.Error, AppConstant.fileUploadError);
            }
        });
    }
}

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: angular

Link to this answer
Share Copy Link

Contributed on Dec 02 2023

Nanu

0 Answers Avg Quality 2/10

upload files with angular

Comment

fileChange(element) {
  this.uploadedFiles = element.target.files;
}

upload() {
  let formData = new FormData();
  for (var i = 0; i < this.uploadedFiles.length; i++) {
    formData.append("uploads[]", this.uploadedFiles[i], this.uploadedFiles[i].name);
  }
  this.http.post('/api/upload', formData)
    .subscribe((response) => {
    console.log('response received is ', response);
  })
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: angular

Link to this answer
Share Copy Link

Contributed on Oct 24 2021

Disturbed Dunlin

0 Answers Avg Quality 2/10

upload file angular

Comment

<input type="file" class="file-upload" (change)="functionName($event)">

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: angular

Link to this answer
Share Copy Link

Contributed on Jul 27 2022

Doodler_101

0 Answers Avg Quality 2/10

file upload in angular 10

Comment

onFileChange(event) {
    const reader = new FileReader();

    if (event.target.files && event.target.files.length) {
      const [file] = event.target.files;
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.data.parentForm.patchValue({
          tso: reader.result
        });

        // need to run CD since file load runs outside of zone
        this.cd.markForCheck();
      };
    }
  }

Popularity 10/10 Helpfulness 3/10 Language typescript

Source: stackoverflow.com

Tags: angular

Link to this answer
Share Copy Link

Contributed on Jun 23 2022

Zany Zebra

0 Answers Avg Quality 2/10

angular file upload

Comment

upload() {
    let formData = new FormData();
    for (var i = 0; i < this.uploadedFiles.length; i++) {
        formData.append("uploads[]", this.uploadedFiles[i], this.uploadedFiles[i].name);
    }
    this.http.post('/api/upload', formData)
    .subscribe((response) => {
         console.log('response received is ', response);
    })
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: blog.jscrambler.com

Tags: angular

Link to this answer
Share Copy Link

Contributed on Jun 28 2022

Zany Zebra

0 Answers Avg Quality 2/10

image file upload in angular

Contents

More Related Answers

image file upload in angular

Closely Related Answers

file upload in angular

upload files with angular

upload file angular

file upload in angular 10

angular file upload

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.