Skip to content

Instantly share code, notes, and snippets.

@klipitkas

klipitkas/image.html

Created December 12, 2020 19:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save klipitkas/8629248aa37bb497351ea7701603bc36 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save klipitkas/8629248aa37bb497351ea7701603bc36 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. klipitkas created this gist Dec 12, 2020.
    25 changes: 25 additions & 0 deletions image.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    <html>
    <body>
    <form>
    <input type="file" class="image" name="image">
    </form>
    <script>
    const image = document.querySelector('.image');

    const toBase64 = file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
    });

    image.addEventListener('change', async (event) => {
    toBase64(event.target.files[0]).then((b64) => {
    console.log(b64);
    }).catch((error) => {
    console.error(error);
    })
    });
    </script>
    </body>
    </html>