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

Question

I'm trying to dynamically change my page's content from the default .png file to whatever the user has loaded for a preview. I managed to implement something similar to Preview an image before it is uploaded. I took the suggestion and wrapped my div in <form runat="server"></form> My HTML elements look like this:

     <form runat="server">
    <label class="control-label col-md-4 col-lg-3" for="photo" id="FotoLbl">
        Foto anfügen
        <div class="inline-help form-label" data-help="&amp;bdquo;Ein
" data-heading="Foto einfügen" data-help-key="offers.photo"><i onClick="myFunction('fotoModal','commentOK6')" class="fa fa-question-circle-o" id="FotoHilfe"></i></div>
    </label>
    <div class="col-md-8 col-lg-9">
        <div class="row fileinput-control">
            <img id="preview"  src="Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png" width="500px" height="360px" style="padding-left:15px;" onload="addDeleteBttn()"/>
            <br/>
            <input type="file" id="image" style="display: none;" />
            <!--<input type="hidden" style="display: none" value="0" name="remove"remove">-->


            <a href="javascript:changeProfile()">
                <div class="file-btns">
                    <span class="btn btn-default btn-file" id="bildBttn">
                        <i title="Bild auswählen" class="fa fileinput-new fa-file-image-o"></i></span></div>
            </a>        
            <a id="removeBttnFrame" href="javascript:removeImage()">    
            </a>
            <div class="col-sm-6">
                <textarea class="form-control copyright" placeholder="Geben Sie hier die Bildquelle an: Foto­graf, Lizenz, ...
    Ohne Quellen­an­ga­ben kann das Bild nicht angezeigt werden.
    " name="offer[photo_copyright]" id="offer_photo_copyright"></textarea>
                <div class="fileinput-description"></div>
            </div>
        </div>
    </div>
</form>
</div>  

In the below .js code you see how I'm normally uploading an image preview, which works perfectly fine. However when I serve the page on FLASK, the image preview won't load.

function changeProfile() {
  $('#image').click();
}
$('#image').change(function() {
  var imgPath = this.value;
  var ext = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
  if (ext == "gif" || ext == "png" || ext == "jpg" || ext == "jpeg")
    readURL(this);
  else
    alert("Please select image file (jpg, jpeg, png).")
});

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.readAsDataURL(input.files[0]);
    reader.onload = function(e) {
      $('#preview').attr('src', e.target.result);
      //              $("#remove").val(0);
    };
  }
}

function removeImage() {
  $('#preview').attr('src', 'noimage.jpg');
  //      $("#remove").val(1);
  $('#preview').attr('src', 'Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png');

}


function addDeleteBttn() {
  var removeBttn = document.createElement("BUTTON");
  removeBttn.title = "Entfernen";
  removeBttn.innerHTML = '<i class="fa fa-trash-o"></i>'

  removeBttn.className = "removeBttnClass";

  document.getElementById("removeBttnFrame").appendChild(removeBttn);
}

I need to be able to serve the HTML-Page on flask and let the user load an image preview. Since it is just an image preview without actual file upload on flask, I don't understand why flask has a problem showing the image preview that is happening on the browser. Im pretty new to FLASK/HTML/javascript and still dont understand most of their concepts. What's going on here? What am I missing?

Answer 1

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!