Retrieve image data from file input without a server

Question

For context, I'm trying to create a "click image" file uploader. Initially there is a default image, which I then click. I trigger a file upload, and the user picks an image file they want. Then I will set the image to replace the default (and do other things with it later). Right now, the front end looks something like this:

<div class="right-preview">
    <input type="image" src="img/logo.png" height="240px" width="240px" ng-click="uploadImage('right-image')" id="upload-right-image"/>
    <input type="file" id="upload-right" style="visibility: hidden">
</div>

When the image is clicked, it triggers an upload action.

$scope.uploadImage = function(side) {
    $image = $('#upload-' + side);
    $fileInput = $('#upload-right');

    $fileInput.change(function(changeEvent) {
    var files = changeEvent.target.files;

    for(var i = 0; i < files.length; i++) {
        file = files[i];
            console.log(file);
        }
    });

    $fileInput.trigger('click');
}

When the change event is fired after the user finishes picking their file, I have the changeEvent and I know they've selected their file. Each of the files has some properties (like name and size) but I'm not seeing anything for accessing the raw data so I can set the src on my other element.

Am I just completely missing how to get the image data, or is there a better way to do this? I have no server (right now) to post this to. Perhaps there is a better way to approach this?

What you are trying to do is impossible without a server-side language handling the upload. You will need a server either way to serve the static files. — pp_
– pp_, Commented Feb 8, 2016 at 16:55
It is possible to just change the image src but that is not an upload. — pp_
– pp_, Commented Feb 8, 2016 at 17:01

ThisClark · Accepted Answer · 2022-01-25 22:21:29Z

5

This link may be helpful to you - https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

I took one method from that page and added some additional functionality to hide the file upload button and have the image placeholder trigger its click event.

$('#placeholder').click(function() {
  $('#img-upload').trigger('click');
});

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<img width="250" height="250" id="placeholder" src="http://place-hold.it/250x250&text='click to upload'">
<input class="hidden" type="file" onchange="previewFile()" id="img-upload">

edited Jan 25, 2022 at 22:21

answered Feb 8, 2016 at 18:33

ThisClark

14.9k11 gold badges73 silver badges103 bronze badges

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

1 Comment

mpemburn Over a year ago

Brilliant! Exactly what I needed!

Collectives™ on Stack Overflow

Retrieve image data from file input without a server

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related