title: How do I access the value of the first of multiple uploaded files
body: <p>Currently the code below will display the last uploaded image as a large image after the submit click event.  I want the full-image class to display the first uploaded image instead of the last. Is there a way to display the first uploaded image instead of the last uploaded image. Is there a way to grab the value of the first uploaded image? Any help would be appreciated.</p>
  <pre><code>HTML 
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Image Gallery App&lt;/title&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;link ref=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles.css&quot; /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
     
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;fieldset&quot;&gt;
          &lt;div class=&quot;legend&quot;&gt;
              Your Images
              &lt;div class=&quot;menu-btn&quot;&gt;
                  &lt;div class=&quot;menu-btn__burger&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;upload_form&quot;&gt;
              &lt;div class=&quot;menu&quot;&gt;
                  &lt;label for=&quot;avatar&quot;&gt;Upload Your Image:&lt;/label&gt;
                  &lt;input type=&quot;file&quot; id=&quot;avatar1&quot; name=&quot;avatar1&quot; data-thumb='thumbnail-one' required=&quot;&quot;&gt;
                  &lt;button type=&quot;submit&quot; id=&quot;delete_btn_1&quot;&gt;Delete&lt;/button&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for=&quot;avatar&quot;&gt;Upload Your Image:&lt;/label&gt;
                  &lt;input type=&quot;file&quot; id=&quot;avatar2&quot; name=&quot;avatar2&quot; data-thumb='thumbnail-two' required=&quot;&quot;&gt;
                  &lt;button type=&quot;submit&quot; class=&quot;delete_btn&quot;&gt;Delete&lt;/button&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for=&quot;avatar&quot;&gt;Upload Your Image:&lt;/label&gt;
                  &lt;input type=&quot;file&quot; id=&quot;avatar3&quot; name=&quot;avatar3&quot; data-thumb='thumbnail-three' required=&quot;&quot;&gt;
                  &lt;button type=&quot;submit&quot; class=&quot;delete_btn&quot;&gt;Delete&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;submit-container&quot;&gt;
                  &lt;button type=&quot;submit&quot; id=&quot;submit_btn&quot;&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;col&quot;&gt;
              &lt;div class=&quot;box thumbnail-one&quot;&gt;
                  &lt;img src=&quot;https://http.cat/100&quot; alt=&quot;Nature&quot; style=&quot;width:100%&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;box thumbnail-two&quot;&gt;
                  &lt;img src=&quot;https://http.cat/405&quot; alt=&quot;Snow&quot; style=&quot;width:100%&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;box thumbnail-three&quot;&gt;
                  &lt;img src=&quot;https://http.cat/504&quot; alt=&quot;Mountains&quot; style=&quot;width:100%&quot;&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col&quot;&gt;
              &lt;div class=&quot;full-image&quot;&gt;
                  &lt;!-- &lt;span class=&quot;closebtn&quot;&gt;&amp;times;&lt;/span&gt; --&gt;
                  &lt;img src=&quot;https://http.cat/100&quot; id=&quot;expandedImg&quot; /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <pre><code>jQuery 
  
      &lt;script type=&quot;text/javascript&quot;&gt;
          const menuBtn = document.querySelector('.menu-btn');
          const uploadForm = document.querySelector('.upload_form')
          let menuOpen = false;
          menuBtn.addEventListener('click', () =&gt; {
              if(!menuOpen) {
                  menuBtn.classList.add('open');
                  menuOpen = true;
                  uploadForm.classList.add('open')
              } else {
                  menuBtn.classList.remove('open');
                  menuOpen = false;
                  uploadForm.classList.remove('open');
              }
          });
  
          $(document).ready(function() {
              $('.box').click(function() {
                  $('.full-image').html($(this).html());
              });
  
              $('#delete_btn_1').click(function() {
                  $(files).val('');
              });
  
              $(&quot;#submit_btn&quot;).on(&quot;click&quot;, function () {
                  var files = $(&quot;input[type=file]&quot;);
                  files.each(function (e) {
                      if (this.files &amp;&amp; this.files[0]) {
                          let thumb = $(this).data('thumb');
                          var reader = new FileReader();
                          console.log(thumb);
                          reader.onload = function (e) {
                              console.log(e);
                              // let imgOne = $(&quot;.thumbnail-one img&quot;).attr(&quot;src&quot;, e.target.result);
                              $(&quot;.&quot; + thumb + &quot; img&quot;).attr(&quot;src&quot;, e.target.result);
                              // I need the line below to access the first uploaded image instead of the last image
                              $('.full-image img').attr(&quot;src&quot;, e.target.result);      
                          }
                          reader.readAsDataURL(this.files[0]);
                          menuBtn.classList.remove('open');
                          menuOpen = false;
                          uploadForm.classList.remove('open');
                      }
                  });
                  $(files).val('');
              });
          });
      &lt;/script&gt;
  </code></pre>
  <pre><code>CSS 
  
  body {
      font-family: 'Poppins', Verdana, Arial, sans-serif;
      background-image: linear-gradient(to right, #6441a5, #2a0845);
      /* background: purple; */
  }
  
  .fieldset {
      background-color: lavender;
      border: 10px solid darkblue;
      border-radius: 20px;
      margin: 20px auto;
      width: 720px;
  }
  
  .legend {
      background-color: purple;
      border-radius: 10px;
      color: white;
      padding: 12px;
      margin: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  
  .fieldset div {
      margin: 10px;
  }
  
  label {
      display: inline-block;
      text-align: right;
      vertical-align: top;
      width: 200px;
  }
  
  .submit-container {
      /* width: 100%; */
      text-align: right;
  }
  
  .container {
      width: 60%;
      overflow: hidden;
      margin: 100px auto;
  }
  
  .box {
      width: 100px;
      height: auto;
      padding: 10px;
  }
  
  .box {
      cursor: pointer;
  }
  
  .full-image {
      width: 580px;
      height: 580px;
      padding: 10px;
  }
  
  .col {
      float: right;
  }
  
  .full-image img {
      width: 100%;
      /* height: 100%; */
  }
  
  .closebtn {
      position: absolute;
      top: 10px;
      right: 15px;
      color: white;
      font-size: 35px;
      cursor: pointer;
  }
  
  .menu-btn {
      display: inline-block;
      position: relative;
      cursor: pointer;
      transition: all .5s ease-in-out;
  }
  
  .menu-btn__burger {
      width: 30px;
      height: 3px;
      background-color: #fff;
      border-radius: 3px;
      box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
      transition: all .5s ease-in-out;
  }
  
  .menu-btn__burger::before, 
  .menu-btn__burger::after {
      content: '';
      position: absolute;
      width: 30px;
      height: 3px;
      background-color: #fff;
      border-radius: 3px;
      box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
      transition: all .5s ease-in-out;
  }
  
  .menu-btn__burger::before {
      transform: translateY(-8px);
  }
  
  .menu-btn__burger::after {
      transform: translateY(8px);
  }
  
  /* Animation */
  /* We are targeting the middle line here */
  .menu-btn.open .menu-btn__burger { 
      /*Moves off to the left*/
      transform: translateX(-50px); 
      background-color: transparent;
      box-shadow: none;
  }
  .menu-btn.open .menu-btn__burger::before {
      transform: rotate(45deg) translate(35px, -35px);
  } 
  .menu-btn.open .menu-btn__burger::after {
      transform: rotate(-45deg) translate(35px, 35px);
  } 
  
  .upload_form {
      display: none;
      transition: display .7s;
  }
  .upload_form.open {
      display: block;
      transition: display .7s;
  }
  
  
  </code></pre>