0

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

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

On uploading the file, 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 any other way to open the uploaded file in new window?

Sourav Dutta
  • 82
  • 6
Sachin M S
  • 21
  • 4
  • 1
    [here](https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) – Empty Brain May 27 '22 at 09:04
  • @AndrewAllen [Preview an image before it is uploaded](https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) worked!. Thank you everyone. – Sachin M S May 27 '22 at 12:35

2 Answers2

-1

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

Yaseen
  • 153
  • 8
-1

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" class="form-control" accept="image/*" onchange="updatePreview(this, 'image-preview')">
<br/>
<img id="image-preview" src="https://via.placeholder.com/200" style="width:200px" class="rounded rounded-circle" alt="placeholder">
Ahmad
  • 723
  • 1
  • 6
  • 14