VueJS decode base64 html string

Question

So that I can implement a live preview for uploadable HTML files, I need help decoding the base64 string.

When I pass a file to the input element and read it with FileReader(), I get a base64 encoded string.

What do I have to do to convert it to HTML/TXT?

I already found some stuff about decoding pictures, which unfortunately didn't help me.

handleFileUpload() {
          this.file = this.$refs.file.files[0];
          let reader = new FileReader();

          reader.addEventListener("load", function() {
            this.html = atob(reader.result);
          }.bind(this), false);

          reader.readAsDataURL(this.file);
        },

Output:

data:text/html;base64,PGh0bWwgeG1sbnM6dj0idXJuOnNjaGVtYXMtbWljcm9zb2Z0LWNvbTp2bWwiDQp4bWxuczpvPSJ1cm46c2NoZW1hcy1taWNyb3NvZnQtY29tOm9mZmljZTpvZmZpY2UiDQp4bWxuczp4PSJ1cm46c2NoZW1hcy1taWNyb3NvZnQtY29tOm9mZmljZTpleGNlbCINCnhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy9UUi9SRUMtaHRtbDQwIj4NCg0KPGhlYWQ+DQo8bWV0YSBodHRwLWVxdWl2PUNvbnRlbnQtVHlwZSBjb250ZW50PSJ0ZXh0L2h0bWw7IGNoYXJzZXQ9d2luZG93cy0xMjUyIj4NCjxtZXRhIG5hbWU9UHJvZ0lkIGNvbnRlbnQ9RXhjZWwuU2hlZXQ+DQo8bWV0YSBuYW1lPUdlbmVyYXRvciBjb250ZW50PSJNaWNyb3NvZnQgRXhjZWwgMTUiPg0KPGxpbmsgaWQ9TWFpbi1GaWxlIHJlbD1NY......

Matt Ellen · Accepted Answer · 2019-11-06 14:09:20Z

3

Instead of readAsDataURL, you should use readAsText, so that you get the text instead of a blob.

handleFileUpload() {
          this.file = this.$refs.file.files[0];
          let reader = new FileReader();

          reader.addEventListener("load", function() {
            this.html = reader.result;
          }.bind(this), false);

          reader.readAsText(this.file);
        },

answered Nov 6, 2019 at 14:09

Matt Ellen

11.6k5 gold badges74 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Philipp Nies Over a year ago

So simply...facepalm. Thank you!

Vaunt · Accepted Answer · 2019-11-06 14:16:43Z

2

You can preview your html file, with the answer of Math Ellen by put the result in an html object like this :

    <object type="text/html"
     data="file.html"
     width="250"
     height="200">
    </object>

answered Nov 6, 2019 at 14:16

Vaunt

1261 silver badge7 bronze badges

1 Comment

Philipp Nies Over a year ago

Also a very nice solution. Thank you

Collectives™ on Stack Overflow

VueJS decode base64 html string

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related