DEV Community

Clever Cottonmouth
Clever Cottonmouth

Posted on

3 1

Show image after upload without any plugins

fileBrowseHandler(files: any) {
    if (files.target.files && files.target.files[0]) {
      const reader: FileReader = new FileReader();
      reader.readAsDataURL(files.target.files[0]);
      reader.onload = () => {
        this.preview = reader.result;
      };
      reader.onerror = (error) => {
        console.log('Error: ', error);
      };
    }
  }
Enter fullscreen mode Exit fullscreen mode

Here is the explanation for the code above:

  1. files.target.files is an array-like object. It contains the files that the user has selected.
  2. FileReader object lets web applications asynchronously read the contents of files.
  3. reader.readAsDataURL(files.target.files[0]) is used to read the contents of the specified Blob or File.
  4. reader.onload is an event handler which is called when the read operation successfully completes.
  5. reader.onerror is an event handler which is called when the read operation fails.
  6. this.preview is a variable which stores the base64 image data of the selected file.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more