Member Avatar for disposable_zero

As I always mention I'm pretty new to web design and I'm kinda learning as problems present themselves. The one I've run into today is creating a, for lack of a better word, "offical" download button. I found when using an upload script:

<form action="upload.php" method="post" enctype="multipart/form-data">
            <input type="file"  name="ufile" />
            <input type="submit" value="Upload" />
          </form>

That it generated a "Browse" and an "Upload" button. I didn't have to design anything, and they had a cross platform look to them. What I'm wanting to know is if I have a file that I want the user to download is their a way to create a similar "Download" button to keep the look uniform on the page?

  • 2 Contributors
  • 2 Replies
  • 111 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Joebhoy Designs

Dani AI

Generated

The simplest split: a plain link will work for static files, but a link does not always force a download or control the filename. was right that linking is the easiest approach, and ’s desire for a native-looking control can be met either by using an actual HTML button (so the browser paints it with the system look) or by using the HTML5 download attribute or a server-side attachment header to force saving.

For same-origin static files, the HTML5 download attribute is the quickest client-side solution. It suggests a filename and tells modern browsers to download instead of opening inline:

<a href="/files/report.zip" download>Download</a>
<a href="/files/report.pdf" download="report-2011.pdf">Download PDF</a>

See the details and cross-origin notes at MDN: anchor element - download attribute.

When a file must always be presented as a download (or when access must be controlled), serve it through a server script that sends a Content-Disposition: attachment header. This gives full control over the delivered filename and works for cross-origin and inline-friendly types (PDF, images, etc.). Example PHP server-side handler (validate inputs and whitelist in real code):

// download.php?file=report.zip
$file = basename($_GET['file']); // whitelist preferred
$path = __DIR__ . '/files/' . $file;
if (!is_file($path)) { header("HTTP/1.0 404 Not Found"); exit; }
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="'.$file.'"');
header('Content-Length: ' . filesize($path));
readfile($path);
exit;

Reference: MDN: Content-Disposition header.

UI note: to match the native look, use a real <button> (or <input type="button">) with minimal CSS so the browser renders the system style. Avoid heavy styling that removes the native appearance (see appearance on MDN). Also always validate filenames server-side, and stream large files rather than loading them fully into memory.

Recommended Answers

All 2 Replies

Member Avatar for disposable_zero

Is this in the wrong area, should it be in PHP?

Member Avatar for Joebhoy Designs

You could either design a button that looks the same and add it to the site then link it to the file so it downloads once clicked on or you could just have a hyperlink like so "Download" then in your html client(dreamweaver etc) link it to the file in question and it will automatically download if the user clicks on it.

Hope this helps
Regards
Joe

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.