John Davidson

Message:

I have created a webpage in HTML/PHP/JS/CSS. The Images are fetched from the database as small thumbnails and when clicked it gets zoomed or pop up with a download button inside a modal. The download button is created with JavaScript, but I don't understand why that is not working.

I tried to inspect from browsers inspect tool and I saw that download button "href" is not showing, may be that's why it is not getting redirected to download page.

I tried to Minimize the code as much as possible .

My php code which fetches image from database as cards/thumbnails with modal html.

<div class="card">

    <img data-id="download.php?file=<?php echo $row['img_name'] ?>"

     src="uploaded/<?php echo $row['img_name'] ?>" alt="">

</div>



<div id="modal">

    <div class="top">

        <span class="close-modal">&#10006;</span>

    </div>

    <div class="modal-body">

    </div>

</div>

MY javascript code for modal and download Button.

let images = document.querySelectorAll(".card > img")

    //loop over all the images and bind an eventlistener on click to each images 

    for (i = 0; i < images.length; i++) {

        let img = images[i]

        img.addEventListener('click', showModal, false)     

    }



    let modal = document.querySelector("#modal")



    function showModal() {



        //display mdodal

        modal.style.display = 'flex';



        //select modal body element

        let modalBody = document.querySelector(".modal-body");



        //clear previously displayed image

        modalBody.innerHTML = ""

       

        //create an image element 

        let modalImg = document.createElement('img');

        modalImg.src = this.getAttribute('src');

        

        //create download btn

        let downloadBtn = document.createElement('button');



        // Create the text node

        let link = document.createTextNode("Download");

        downloadBtn.appendChild(link);

        downloadBtn.href = this.getAttribute('data-id');





        // add image element to modal body

        modalBody.appendChild(modalImg);

        // add download btn 

        modalBody.appendChild(downloadBtn);



        body.style.overflow = "hidden";



    }



    let closeBtn = document.querySelector(".close-modal")

    closeBtn.addEventListener('click', closeModal, false)



    //close modal

    function closeModal() {

        modal.style.display = 'none';

        body.style.overflow = "auto";

    }

Last the download.php page

if(isset($_GET['file'])){

    $filename = basename($_GET['file']);

    $filepath = 'uploaded/'. $filename;

    if(!empty($filename) && file_exists($filepath)){

        header('Content-Description: File Transfer');

        header("Content-Type: application/octet-stream");

        header("Content-Disposition: attachment; filename=  $filename");

        header('Expires: 0');

        header('Cache-Control: must-revalidate');

        header('Pragma: public');

        header('Content-Length: ' . filesize($filename));

        readfile($filepath);

        exit;

    }

    else{

        echo "File not exists";

    }

}

MODAL CSS

#modal {

    position: fixed;

    top: 0;

    bottom: 0;

    right: 0;

    left: 0;

    background: rgba(111, 111, 111, 0.6);

    z-index: 100;

    display: none;

    justify-content: center;

    align-items: center;

    flex-direction: column;

  }

  .top{

    width: 90%;

    text-align: end; 

    margin-bottom: 5px;

  }

  .close-modal {

    color: #fff;

    font-size: 20px;

    background-color: brown;

    cursor: pointer;

    padding: 2px 5px;

    border-radius: 5px;

  }

  .modal-body {

    width: 90%;

    text-align: center;

    

  }

  

  .modal-body img {

    width: 100%;

    margin-bottom: 2px;

  }

  .modal-body button{

    padding: 10px 15px;

    background-color: #8c2424;

    color: #fff;

    border-radius: 10px;

    cursor: pointer;

    font-weight: bold;

    border: none;

    box-shadow: 2px 2px 5px 1px #1b1b1b;

    text-transform: uppercase;

  }

---

My Answer:
The issue seems to be with how you are setting the `href` attribute for the download button. In your JavaScript code, you are setting the `href` attribute for the button element, but buttons do not have an `href` attribute. Instead, you should use an anchor `` tag for the download button.

Here is the updated JavaScript code for creating the download button:

javascript
//create download btn
let downloadBtn = document.createElement('a');

// Set the href attribute for the anchor tag
downloadBtn.href = this.getAttribute('data-id');
downloadBtn.setAttribute('download', ''); // This will prompt the user to download the file

// Create the text node
let link = document.createTextNode("Download");
downloadBtn.appendChild(link);

// add download btn
modalBody.appendChild(downloadBtn);


By using an anchor tag `` for the download button, the user will be able to click on it and download the file specified in the `href` attribute.

Additionally, make sure that the `download.php` file path is correct and that the file exists in the `uploaded` directory. You can also check the network tab in the browser's developer tools to see if the request to `download.php` is being made when clicking the download button.