Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to rename or keep the file name only while downloading the file entering a required key?

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading