Open user's input file in new window-CodePudding

I have created input element to accept 'file' type like below.

<input type='file' onChange=onFileUpload()>

On file upload, I have a field which shows the file name. Now when user clicks on the file name it must open the file in new window for preview. Is there a way to generate URL for this or anyway to open the uploaded file in new window?

CodePudding user response：

I believe you will have to immediately upload the file to server as soon as selects the file, then you can open uploaded file link in new tab/windows

CodePudding user response：

with this code you have the file that was uploaded so with using angular, react js or vue js you can pass the data to another page and show it there

function updatePreview(input, target) {
  let file = input.files[0];
  let reader = new FileReader();

  reader.readAsDataURL(file);
  reader.onload = function() {
    let img = document.getElementById(target);
    img.src = reader.result;
  }
}

<input type="file" name="image"  accept="image/*" onchange="updatePreview(this, 'image-preview')">
<br/>
<img id="image-preview" src="https://via.placeholder.com/200" style="width:200px"  alt="placeholder">