CODEWITHSUNDEEP
javascripthtmlfile
phepa
phepa

Reputation: 111

Download file just uploaded with html input file

I have classic HTML input type for file

<input type="file" id="xxx" name="xxx" />

And I want the user to have an option to download back the file he just uploaded.

I tried to do it with javascript to download via filepath, but chrome seems to have some security feature that replaces the real path with "fakepath"

C:\fakepath\xxx.pdf

Any idea how to download the uploaded file (just client side, not submitting the form yet) ?

Upvotes: 4

Views: 18895

Answers (4)

Rajwade Additional
Rajwade Additional

Reputation: 1

const input = document.getElementById('upload');
const link = document.getElementById('link');
let objectURL;

input.addEventListener('change', function () {
  if (objectURL) {
    // revoke the old object url to avoid using more memory than needed
    URL.revokeObjectURL(objectURL);  
  }

  const file = this.files[0];
  objectURL = URL.createObjectURL(file);

  link.href = objectURL;
  link.click();
});
<input type="file" id="upload" />
<a id="link" download style="display: none">shouldnt be visible</a>

const input = document.getElementById('upload');
const link = document.getElementById('link');
let objectURL;

input.addEventListener('change', function () {
  if (objectURL) {
    // revoke the old object url to avoid using more memory than needed
    URL.revokeObjectURL(objectURL);  
  }

  const file = this.files[0];
  objectURL = URL.createObjectURL(file);

  link.download = file.name; // this name is used when the user downloads the file
  link.href = objectURL;
});
<input type="file" id="upload" />
<a id="link" download>link to your file (upload a file first)</a>

Upvotes: -2

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20108

We can download file using URL.createObjectURL() function, <a> and <button> element in the following way

const data = {
  lastModified: 1701069121191,
  lastModifiedDate: Mon Nov 27 2023 12:42:01 GMT+0530 (India Standard Time) {},
  name: "Template_v2(1).xlsx",
  size: 91827,
  type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  webkitRelativePath: ""
}

const onDownload = d => {
    const link = document.createElement('a')
    link.download = d.name
    link.href = URL.createObjectURL(d) // method creates a string containing a URL representing the object
    link.click()
}

<button onClick={onDownload(data)} variant="contained" color="primary">Download</button>

Upvotes: 0

Timo
Timo

Reputation: 253

You can use URL.createObjectURL() to create a link that allows the user to download the file.

const input = document.getElementById('upload');
const link = document.getElementById('link');
let objectURL;

input.addEventListener('change', function () {
  if (objectURL) {
    // revoke the old object url to avoid using more memory than needed
    URL.revokeObjectURL(objectURL);  
  }

  const file = this.files[0];
  objectURL = URL.createObjectURL(file);

  link.download = file.name; // this name is used when the user downloads the file
  link.href = objectURL;
});
<input type="file" id="upload" />
<a id="link" download>link to your file (upload a file first)</a>

Note on the snippet: The browser may block doing multiple downloads this way.

Upvotes: 6

Tobias Fuchs
Tobias Fuchs

Reputation: 938

This is the same snippet from above, with 2 improvements:

  • Download link is not visible
  • Download starts automatically (if not blocked by browser)

Filename is still not getting taken

const input = document.getElementById('upload');
const link = document.getElementById('link');
let objectURL;

input.addEventListener('change', function () {
  if (objectURL) {
    // revoke the old object url to avoid using more memory than needed
    URL.revokeObjectURL(objectURL);  
  }

  const file = this.files[0];
  objectURL = URL.createObjectURL(file);

  link.href = objectURL;
  link.click();
});
<input type="file" id="upload" />
<a id="link" download style="display: none">shouldnt be visible</a>

Upvotes: 2

Related Questions