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  style="padding : 10px; padding-left:15px; padding-right:15px" type="text" width="100px" placeholder="Enter your download key">
                            <br><br>
                            <div >
                                <button id="down" >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>

CodePudding user response：

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.

download

Causes 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.

MDN