How to display svg image after load?

I have an input file type:

  <input type="file" accept="image/*" (change)="openFile($event)" />

Method opens file:

openFile(event: Event) {
    const input = event.target as HTMLInputElement;

    this.read(input);
}

Method reads a data:

private read(input) {
        const fileTypes = ['jpg', 'jpeg', 'png', 'gif', 'svg'];

        if (input.files && input.files[0]) {
            const extension = input.files[0].name.split('.').pop().toLowerCase(),
                isSuccess = fileTypes.indexOf(extension) > -1;

            if (isSuccess) {
                const reader = new FileReader();
                reader.onload = () => {
                        const data = reader.result;

                        // HOW create svg image here?

                        const = svg; // create svg here from data image
                        document.getElementBy('block').appendChild(svg);
                    
                };

                reader.readAsDataURL(input.files[0]);
            } else {
                console.log('Wring image type');
            }
        }
    }

So when I load a SVG image I get content of it. How to place image in block id="block" based data?

SVG image looks like:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
     xml:space="preserve">
<ellipse fill="#C6C6C6" cx="283.5" cy="487.5" rx="259" ry="80"/>
<path id="bird" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
    c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341

As you can see image file has svg tag.

For readAsText I get this:

For readAsDataURL:

Answer

Maybe i think it too simple, but you can read the file as text (reader.readAsText()) and simply use innerHTML for inserting the svg. To get this to work you have to:

• change the (change) listener in your input to an ordinary onchange listener,
• take the event param for the event handler openFile() without a $ and
• declare your functions as ordinary functions with function instead of private

---

Working example: I saved your example svg on my PC, closed the path tag and added a closing svg tag) and uploaded it using the input.

I don’t know why you have that extra function openFile(), but i let it like in your example. But you could just use read(event) and reader.readAsText(event.target.files[0]);.

function openFile(event) {
  this.read(event.target);
}

function read(input) {
  const fileTypes = ['jpg', 'jpeg', 'png', 'gif', 'svg'];

  if (input.files && input.files[0]) {
    const extension = input.files[0].name.split('.').pop().toLowerCase(),
      isSuccess = fileTypes.indexOf(extension) > -1;

    if (isSuccess) {
      const reader = new FileReader();

      if (extension == "svg") {
        reader.onload = () => {
          document.getElementById('block').innerHTML = reader.result;
        };
        reader.readAsText(input.files[0]);
      }
      else {
        // proceed the other image types
      }
    }
    else {
      console.log('Wrong image type');
    }
  }
}

<input type="file" id="file-input" accept="image/*" onchange="openFile(event)">

<div id="block"></div>