Welcome to %s forums

<No. 1 Community for developers, by developers/>

Login Register

How to make a div as input type file to upload file in Angluar?

Get support on Angular & Typescript related technology.
Post Reply
admin
Site Admin
Posts: 45

How to make a div as input type file to upload file in Angluar?

Post by admin » Fri Aug 23, 2019 1:52 pm

comeponet.html

Code: Select all

  <input type="file" id="file" (change)="uploadFile($event.target.files[0])" accept="image/*">

  <div class="container" (click)="openFileUpload()">
    <p>Upload Photos <p>
  </div>

  <p>{{file?.name}} </p>
component.css

Code: Select all

#file{
  display: none;
}

.container{
  width: 150px;
  height: 150px;
  background-color: grey;
  text-align: center;
  cursor: poiner;
}
component.ts

Code: Select all

  openFileUpload() {
    document.getElementById('file').click();
  }

  uploadFile(file) {
   console.log(file);
  }
Demo : https://stackblitz.com/edit/angular-xwyzsq

Post Reply