See my below code. It's working fine but while downloading a file by entering the required key, the file name changed and it's downloading with the whole domain name + directory + file name. But I want just the file name.
Code :
//This is the HTML part.
<center>
<input class="keyBox" style="padding : 10px; padding-left:15px; padding-right:15px" type="text" width="100px" placeholder="Enter your download key">
<br><br>
<div class="text-center">
<button id="down" class="btn btn-style btn-primary">Download</button>
</div>
</center>
// This is the Script I am using.
<script>
const files = [{
key: 12345,
path: 'Marouf.png'
}, {
key: 12477,
path: 'Ismat.png'
}]
const globalPath = 'https://abcd.com/directory/certificates/'
const inp = document.querySelector('.keyBox')
const btn = document.querySelector('#down')
btn.addEventListener('click', downloadURI)
function downloadURI() {
if (inp.value) {
let uri = files.filter(f => f.key === Number(inp.value))
if (uri.length) {
let link = document.createElement("a");
const fullPath = globalPath + uri[0].path
link.download = fullPath;
link.href = fullPath;
link.click();
} else {
alert("Incorrect download key! Try again...")
}
}
}
</script>
There are multiple ways to solve your problem. The most simple solution is to set the download attribute without value
link.download = '';
This will use the final segment of the URL as filename.
downloadCauses the browser to treat the linked URL as a download. Can be used with or without a value:
Without a value, the browser will suggest a filename/extension, generated from various sources:
- The Content-Disposition HTTP header
- The final segment in the URL path
- The media type (from the Content-Type header, the start of a data: URL, or Blob.type for a blob: URL)
Defining a value suggests it as the filename. / and \ characters are converted to underscores (_). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.