dna-engine ~~ Photo upload component

An uncomplicated user interface library

by pilafmon

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dna-engine@3/dist/dna-engine.css">
<script src="https://cdn.jsdelivr.net/npm/dna-engine@3/dist/dna-engine.min.js"></script>
<h1>Photo Upload</h1>

<div data-component=photo-upload>
   <button data-on-click=photoUpload.open>Upload Image</button>
   <input type=file accept=image/* data-on-change=photoUpload.process>
   <figure><img src=# alt=avatar></figure>
</div>

<div data-component=photo-upload>
   <button data-on-click=photoUpload.open>Upload Image</button>
   <input type=file accept=image/* data-on-change=photoUpload.process>
   <figure><img src=# alt=avatar></figure>
</div>

CSS

body {
   font-family: system-ui, sans-serif;
   margin: 30px;
   }
button:hover {
   cursor: pointer;
   }

/* Photo Upload Component */
[data-component=photo-upload] {
   display: flex;
   justify-content: space-between;
   align-items: start;
   background-color: goldenrod;
   padding: 10px 20px;
   margin-bottom: 20px;
   }
[data-component=photo-upload] input {
   display: none;
   }
[data-component=photo-upload] figure {
   display: none;
   margin: 0px;
   }
[data-component=photo-upload] figure img {
   max-height: 120px;
   border: 8px solid silver;
   }

JavaScript

// dna-engine.org

const photoUpload = {
   open(elem, event, component) {
      component.querySelector('input[type=file]').click();
      },
   process(elem, event, component) {
      const file =   elem.files[0];
      const reader = new FileReader();
      const insertImage = (loadEvent) => {
         const figure = component.querySelector('figure');
         const img =    figure.querySelector('img');
         img.setAttribute('src', loadEvent.target.result);
         dna.ui.fadeIn(figure);
         console.log(loadEvent.target.result);  //see js console
         };
      reader.onload = insertImage;
      reader.readAsDataURL(file);
      },
   };