Jump to content
Sign in to follow this  
TonyC

What do I use as input type to create a file save dialog?

Recommended Posts

The syntax <input type="file"> is used to create a file open button and dialog box.  What can I use to create a file save dialog box?  Using HTML5, CSS3, and JavaScript (no libraries). 

Thank you 

 

Share this post


Link to post
Share on other sites

With pure Javascript there's a window method called saveAs() which isn't widely supported by browsers. I can't see any reference to this method on the MDN so I'm not even certain if it's a standard. Somebody built an example with a cross-browser polyfill here: https://codepen.io/davidelrizzo/pen/cxsGbI It's not exactly a library, just a fallback function that's used if the browser doesn't have native support.

If you have a server-side language available you can submit a form to an invisible iframe, have the server generate the data and serve it with a "Content-Disposition: attachment" header. Here's a very simple PHP example:

<form action="save-file.php" method="POST" target="filesaver">
  <div>
    <label>Filename: <input type="text" name="filename"></label>
    <label>File content:
      <textarea name="data"></textarea>
    </label>
    <button type="submit">Save</button>
  </div>
</form>
<iframe name="filesaver" width="1" height="1" frameborder="0"></iframe>
<?php
// This is save-file.php
$data = $_POST['data'];
$filename = $_POST['filename'];
header('Content-Disposition: attachment; filename="' . $filename . '"');
echo $_POST['data'];
?>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...