How to Show a Image Preview in The Browser Without Uploading The Image File to The Server

How can I show a image preview in the browser without uploading the image file to the server?

It sure is possible with the HTML5 File API.

Preview Image without Upload to my server

In a HTML5 capable browser you can use the FileReader object to read a file from the users hdd as a base64 encoded string.
You can use this base64 representation with css to show the preview.
In older browsers you will need flash or similar plugin-based code to do it.

Here is a HTML5 example that works in all modern browsers:

<html>
<head>
<script>

var elmFileUpload = document.getElementById('file-upload');

function onFileUploadChange(e) {
    var file = e.target.files[0];
    var fr = new FileReader();
    fr.onload = onFileReaderLoad;
    fr.readAsDataURL(file);
}

function onFileReaderLoad(e) {
    var bgStyle = "url('" +e.target.result + "')";

    elmFileUpload.parentElement.style.background = bgStyle;

};

elmFileUpload.addEventListener('change',onFileUploadChange,false);
</script>
</head>
<body>
<input type="file" id="file-upload"/>
</body>
</html>

See a fiddle of it in action here

Preview an image before it is uploaded

imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    blah.src = URL.createObjectURL(file)
  }
}

<form runat="server">
  <input accept="image/*" type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

Display an image on the page without uploading to server

You can convert the image into base64, see http://www.motobit.com/util/base64/css-images-to-base64.asp .

It will generate an <img /> like this: <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAA// lot more characters" />

It is, in my mind, a bad practice, since your browser cache the images in order to avoid to send lots of requests for an image he already has.

In php:

$path = 'myfolder/myimage.png';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

(taken from) How to convert an image to base64 encoding?

How to display selected image without sending data to server?

You can use FileReader web-api object for this, see this snippet:

the HTML

<input id="src" type="file"/> <!-- input you want to read from (src) -->
<img id="target"/> <!-- image you want to display it (target) -->

the javascript

function showImage(src,target) {
  var fr=new FileReader();
  // when image is loaded, set the src of the image where you want to display it
  fr.onload = function(e) { target.src = this.result; };
  src.addEventListener("change",function() {
    // fill fr with image data    
    fr.readAsDataURL(src.files[0]);
  });
}

var src = document.getElementById("src");
var target = document.getElementById("target");
showImage(src,target);

Is that possible to display image thumbnail without uploading it to the server?

If you could enforce an HTML 5 capable browser you could use the file-api

Example: http://html5demos.com/file-api

how to upload an image preview on the browser while serving the page on Flask?

Think of Flask as a program that accepts data and returns data. In this case, when your browser accesses the appropriate URL, Flask sends you back the HTML.

Once your browser has the HTML it then loads the CSS and JavaScript, assuming they are on different files to the HTML. Otherwise they all load together.

When the browser has the HTML, CSS, and JavaScript, it is completely independent from Flask. There is no communication whatsoever between them.

That means that here, using JavaScript, you can change the page contents and Flask will not know about it. It will not care about any page changes.

However when you press "Submit" on your form, you are getting all the form contents and sending them to Flask. Since you have a file input, there is a period of time during which your browser is sending the file to Flask.

During this period, the page remains static so your preview must've shown before you click Submit. Remember that the page already has the photo at this point, so you do not need Flask in order to show a preview.

After the upload has finished, Flask will send you some more data:

A redirect, which sends the browser to another page (effectively moving you away from your form and preview).
Some more HTML, which effectively clears your page and replaces it with a new page.

Hope this helps!

Get image preview before uploading in React

No difference, just read your image when the load event finishes. After the load end event handler just set your state:

getInitialState: function(){
  return{file: []}
}

_onChange: function(){
  // Assuming only image
  var file = this.refs.file.files[0];
  var reader = new FileReader();
  var url = reader.readAsDataURL(file);

   reader.onloadend = function (e) {
      this.setState({
          imgSrc: [reader.result];
      })
    }.bind(this);
  console.log(url) // Would see a path?
  // TODO: concat files
},

render: function(){
 return(
  <div>
    <form>
      <input 
        ref="file" 
        type="file" 
        name="user[image]" 
        multiple="true"
        onChange={this_onChange}/>
     </form>
    {/* Only show first image, for now. */}
    <img src={this.state.imgSrc} />
  </div>
 )
}

Preview images before upload

Here is jQuery version for you. I think it more simplest thing.

$(function() {    // Multiple images preview in browser    var imagesPreview = function(input, placeToInsertImagePreview) {
        if (input.files) {            var filesAmount = input.files.length;
            for (i = 0; i < filesAmount; i++) {                var reader = new FileReader();
                reader.onload = function(event) {                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);                }
                reader.readAsDataURL(input.files[i]);            }        }
    };
    $('#gallery-photo-add').on('change', function() {        imagesPreview(this, 'div.gallery');    });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple id="gallery-photo-add"><div class="gallery"></div>