How to read image from json data transfer

Today i'm working with drag and drop in HTML5. I want to do something like:

• grab image file from your computer,
• drop it in input="file" div in web browser
• then i need to take this picture and display it in #livePreview div

I know i cannot get absolute path for this file from user location - security stuff.

I do something like this:

HTML

  var livePreview = document.getElementById('livePreviewId');
    var imageInput = document.getElementById("inputFileId");
    
    imageInput.addEventListener("dragover", function( e ){
        e.preventDefault();
        e.stopPropagation();
    });
    imageInput.addEventListener("dragenter", function( e ){
       e.preventDefault();
        e.stopPropagation();
    });
    
    imageInput.addEventListener("drop", function( e ){
        if(e.dataTransfer){
            console.log(e.dataTransfer);
            if(e.dataTransfer.files.length) {
                console.log("e files length ", e.dataTransfer.files.length);
                e.preventDefault();
                e.stopPropagation();
                /*UPLOAD FILES HERE*/
                console.log("e files ", e.dataTransfer.getData("image/gif"));
                upload(e.dataTransfer.files);
            }   
        }
    });
    
    function upload(files){
        console.log(files[0]);
    }

 <div id="livePreviewId" style="border:1px solid #d3d3d3;width:150px;height:300px;"></div>
            
            <div class="pull-right">
                <p>Drop it here:</p>
                <input id="inputFileId" type="file" class="column" style="border:1px solid #d3d3d3;width:350px;height:50px;"/>  
            </div>

Okay, i got the file in JSON, what next? How can I display it in browser? How can i send it to server? How to store in local storage?

Maybe one possible way is to send it to server (local storage?) and then put in the browser? But this is not a live preview?

Any ideas how to solve this problem?

BR