title: Image Upload Preview File Path
body: <p>I'm following the answer <a href="https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded">HERE</a> to create a file upload with image preview.</p>
  
  <p>I have it working, but can't figure out how to place the file path in a separate div. Here's the js:</p>
  
  <pre><code>function readURL(input) {
      if (input.files &amp;&amp; input.files[0]) {
          var reader = new FileReader();
  
          reader.onload = function (e) {
              $('[data-label="UploadPreview"]').children('img').attr('src', e.target.result);
          }
  
          reader.readAsDataURL(input.files[0]);
      }
  }
  
  $('#UploadInput').change(function(){
      readURL(this);
  });
  </code></pre>
  
  <p>This is the element where I want to place the file path text:</p>
  
  <pre><code>&lt;div data-label="UploadPath"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I have tried setting <code>.text</code> on the <code>reader.onload</code> function as such</p>
  
  <pre><code>$('[data-label="UploadPath"]').text(e.target.result);
  </code></pre>
  
  <p>But the result appears to be the base64 value of the image. Can you help me figure out how to include the path of the image in the <code>data-label="UploadPath"</code> div? Thanks for your ideas! BTW, I'm new to jQuery so an example of how to include in my current code would help a lot. Thanks!</p>