Source code
Revision control
Copy as Markdown
Other Tools
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<style>
img { padding: 10px; border: 1px solid red; }
a { padding-left: 10px; }
</style>
<span id="items">
<!-- simple filename -->
data-noattach="true" data-filename="basic.png">
<!-- simple filename with content disposition -->
<img id="i1" src="http://localhost:8000/save_filename.sjs?type=png&filename=simple.png" data-filename="simple.png">
<!-- invalid characters in the filename -->
<img id="i2" src="http://localhost:8000/save_filename.sjs?type=png&filename=invalidfilename/a:b*c%63d.png" data-filename="invalidfilename_a b ccd.png">
<!-- invalid extension for a png image -->
<img id="i3" src="http://localhost:8000/save_filename.sjs?type=png&filename=invalidextension.pang" data-filename="invalidextension.png">
<!-- jpeg extension for a png image -->
<img id="i4" src="http://localhost:8000/save_filename.sjs?type=png&filename=reallyapng.jpeg" data-filename="reallyapng.png">
<!-- txt extension for a png image -->
<img id="i5" src="http://localhost:8000/save_filename.sjs?type=png&filename=nottext.txt" data-filename="nottext.png">
<!-- no extension for a png image -->
<img id="i6" src="http://localhost:8000/save_filename.sjs?type=png&filename=noext" data-filename="noext.png">
<!-- empty extension for a png image -->
<img id="i7" src="http://localhost:8000/save_filename.sjs?type=png&filename=noextdot." data-filename="noextdot.png">
<!-- long filename -->
data-filename="averylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongf.png">
<!-- long filename with invalid extension -->
data-filename="bverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongf.png">
<!-- long filename with invalid extension -->
data-filename="cverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongfilenameverylongf.png">
<!-- jpeg with jpg extension -->
<img id="i11" src="http://localhost:8000/save_filename.sjs?type=jpeg&filename=thejpg.jpg" data-filename="thejpg.jpg">
<!-- jpeg with jpeg extension -->
<img id="i12" src="http://localhost:8000/save_filename.sjs?type=jpeg&filename=thejpg.jpeg" data-filename="thejpg.jpeg">
<!-- jpeg with invalid extension -->
<img id="i13" src="http://localhost:8000/save_filename.sjs?type=jpeg&filename=morejpg.exe" data-filename="morejpg.jpg" data-filename-platformlinux="morejpg.jpeg">
<!-- jpeg with multiple extensions -->
<img id="i14" src="http://localhost:8000/save_filename.sjs?type=jpeg&filename=anotherjpg.jpg.exe" data-filename="anotherjpg.jpg.jpg" data-filename-platformlinux="anotherjpg.jpg.jpeg">
<!-- jpeg with no filename portion -->
data-filename="jpg.jpg" data-filename-platformlinux="jpg.jpeg">
<!-- png with no filename portion and invalid extension -->
<img id="i16" src="http://localhost:8000/save_filename.sjs?type=png&filename=.exe" data-filename="exe.png">
<!-- png with escaped characters -->
<img id="i17" src="http://localhost:8000/save_filename.sjs?type=png&filename=first%20file.png" data-filename="first file.png">
<!-- png with more escaped characters -->
<img id="i18" src="http://localhost:8000/save_filename.sjs?type=png&filename=second%32file%2Eexe" data-filename="second2file.png">
<!-- unknown type with png extension -->
data-nodrag="true" data-unknown="typeonly" data-filename="nonsense1.png">
<!-- unknown type with exe extension -->
data-nodrag="true" data-unknown="typeonly" data-filename="nonsense2.exe">
<!-- unknown type with no extension -->
data-nodrag="true" data-unknown="typeonly" data-filename="nonsense3">
<!-- simple script -->
<script id="i22" src="http://localhost:8000/save_filename.sjs?type=js&filename=script1.js" data-filename="script1.js"></script>
<!-- script with invalid extension. -->
data-filename="script2.exe" data-savepagename="script2.exe.js"></script>
<!-- script with escaped characters -->
data-filename="script 3.exe" data-savepagename="script 3.exe.js"></script>
<!-- script with long filename -->
data-filename="script123456789script123456789script123456789script123456789script123456789script123456789script123456789script123456789script123456789script123456789script123456789script123456789script123456789script123456789script123456789script123456789script12345.js"></script>
<!-- binary with exe extension -->
data-unknown="true" data-filename="download1.exe"></object>
<!-- binary with invalid extension -->
data-unknown="true" data-filename="download2.png"></object>
<!-- binary with no extension -->
data-unknown="true" data-filename="downloadnoext"></object>
<!-- binary with no other invalid characters -->
<object id="i29" data="http://localhost:8000/save_filename.sjs?type=binary&filename=binary^%31%20exe.exe"
data-unknown="true" data-filename="binary^1 exe.exe"></object>
<!-- unknown image type with no extension, but ending in png -->
data-unknown="typeonly" data-nodrag="true" data-filename="specialpng">
<!-- unknown image type with no extension, but ending in many dots -->
data-unknown="typeonly" data-nodrag="true" data-filename="extrapng">
<!-- image type with no content-disposition filename specified -->
<img id="i32" src="http://localhost:8000/save_filename.sjs?type=png" data-filename="save_filename.png">
<!-- binary with no content-disposition filename specified -->
data-unknown="true" data-filename="save_filename.sjs"></object>
<!-- image where url has png extension -->
<img id="i34" src="http://localhost:8000/getdata.png?type=png&filename=override.png" data-filename="override.png">
<!-- image where url has png extension but content disposition has incorrect extension -->
<img id="i35" src="http://localhost:8000/getdata.png?type=png&filename=flower.jpeg" data-filename="flower.png">
<!-- image where url has png extension but content disposition does not -->
<img id="i36" src="http://localhost:8000/getdata.png?type=png&filename=ruby" data-filename="ruby.png">
<!-- image where url has png extension but content disposition has invalid characters -->
<img id="i37" src="http://localhost:8000/getdata.png?type=png&filename=sapphire/data" data-filename="sapphire_data.png">
<!-- image where neither content disposition or url have an extension -->
<img id="i38" src="http://localhost:8000/base?type=png&filename=emerald" data-filename="emerald.png">
<!-- image where filename is not specified -->
<!-- simple script where url filename has no extension -->
<script id="i40" src="http://localhost:8000/base?type=js&filename=script4.js" data-filename="script4.js"></script>
<!-- script where url filename has no extension and invalid extension in content disposition filename -->
data-filename="script5.exe" data-savepagename="script5.exe.js"></script>
<!-- script where url filename has no extension and escaped characters in content disposition filename-->
data-filename="script 6.exe" data-savepagename="script 6.exe.js"></script>
<!-- text where filename is present -->
data-nodrag="true" data-filename="readme.txt">
<!-- text where filename is present with a different extension -->
data-nodrag="true" data-filename="main.cpp">
<!-- text where extension is not present -->
data-nodrag="true" data-filename="readme">
<!-- text where extension is not present and url does not have extension -->
data-nodrag="true" data-filename="info">
<!-- text where filename is not present -->
data-nodrag="true" data-filename="basetext">
<!-- text where url has extension -->
data-nodrag="true" data-filename="text2.txt">
<!-- text where url has extension -->
data-nodrag="true" data-filename="text3.gonk">
<!-- text with long filename -->
<img id="i50" src="http://localhost:8000/text3.gonk?type=text&filename=text0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789text0123456789zztext0123456789zztext0123456789zztext01234567.exe.txt" data-nodrag="true" data-filename="text0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext0123456789zztext012345.txt">
<!-- webp image -->
data-filename="webpimage.webp">
<!-- webp image with jpg extension -->
data-filename="realwebpimage.webp">
<!-- no content type specified -->
data-nodrag="true" data-filename="notype.png">
<!-- no content type specified. -->
data-nodrag="true" data-filename="notypebin.exe">
<!-- extension contains invalid characters -->
data-filename="extinvalid.png">
<!-- filename with redirect and content disposition -->
<!-- filename with redirect and different type -->
data-filename="green.jpg" data-filename-platformlinux="green.jpeg">
<!-- filename with redirect and binary type -->
data-unknown="true" data-filename="blue.png"></object>
<!-- filename in url with incorrect extension -->
data-noattach="true" data-filename="aquamarine.png">
<!-- filename in url with exe extension, but returns a png image -->
data-noattach="true" data-filename="lazuli.png">
<!-- filename with leading, trailing and duplicate spaces -->
data-filename="with spaces.png">
<!-- filename with leading and trailing periods -->
data-filename="with..dots..png">
<!-- filename with non-ascii character -->
<img id="i63" src="http://localhost:8000/base?type=png&filename=s%C3%B6meescapes.%C3%B7ng" data-filename="sömeescapes.png">
<!-- filename with content disposition name assigned. The name is only used
when selecting to manually save, otherwise it is ignored. -->
data-filename="save_thename.png">
<!-- reserved filename on Windows -->
data-nodrag="true" data-filename="com1" data-filename-platformwin="Untitled">
<!-- reserved filename with extension on Windows -->
data-nodrag="true" data-filename="com2.any" data-filename-platformwin="Untitled">
<!-- simple zip file -->
<object id="i67" data="http://localhost:8000/save_filename.sjs?type=zip&filename=simple.zip" data-filename="simple.zip"
data-unknown="true"></object>
<!-- simple zip file with differing extension -->
<object id="i68" data="http://localhost:8000/save_filename.sjs?type=zip&filename=simple.jar" data-filename="simple.jar"
data-unknown="true"></object>
<!-- simple zip file with no extension -->
<object id="i69" data="http://localhost:8000/save_filename.sjs?type=zip&filename=simplepack" data-filename="simplepack.zip"
data-unknown="true"></object>
<!-- simple json file -->
<object id="i70" data="http://localhost:8000/save_filename.sjs?type=json&filename=simple.json" data-filename="simple.json"
data-unknown="true"></object>
<!-- simple json file with differing extension -->
<object id="i71" data="http://localhost:8000/save_filename.sjs?type=json&filename=simple.dat" data-filename="simple.dat"
data-unknown="true"></object>
<!-- compressed file with .gz extension -->
<img id="i72" src="http://localhost:8000/save_filename.sjs?type=png&filename=compressed.png.gz" data-filename="compressed.png.png">
<!-- compressed file with .tar.gz extension -->
<object id="i73" data="http://localhost:8000/save_filename.sjs?type=tar&filename=compressed2.tar.gz" data-filename="compressed2.tar.gz"
data-unknown="true"></object>
<!-- compressed file with bittar.gz extension. There is no tar mime info on Windows so the filename is not changed. -->
<object id="i74" data="http://localhost:8000/save_filename.sjs?type=tar&filename=compressed3.bittar.gz"
data-filename="compressed3.bittar.gz"
data-unknown="true"></object>
<!-- compressed file with .tar.bz2 extension -->
<object id="i75" data="http://localhost:8000/save_filename.sjs?type=tar&filename=buzz.tar.bz2" data-filename="buzz.tar.bz2"
data-unknown="true"></object>
<!-- executable with no filename specified and an extension specified within the url -->
data-nodrag="true" data-unknown="typeonly" data-filename="executable.exe">
<!-- embedded child html -->
data-filename="child.par" data-unknown="true"></object>
<!-- file starting with a dot with and unknown extension -->
<img id="i78" src="http://localhost:8000/save_filename.sjs?type=png&filename=.extension" data-filename="extension.png">
<!-- html file starting with a dot -->
data-filename="alternate.html" data-filename-platformwin="alternate.htm" data-unknown="true"></object>
<!-- unrecognized file type starting with a dot -->
<object id="i80" data="http://localhost:8000/save_filename.sjs?type=otherimage&filename=.alternate" data-filename="alternate"
data-unknown="true"></object>
<!-- filename with lnk extension -->
data-nodrag="true" data-unknown="typeonly"
data-filename="shortcut.lnk.download">
<!-- long filename with lnk extension -->
data-nodrag="true" data-unknown="typeonly"
data-filename="longshortcutnamelongshortcutnamelongshortcutnamelongshortcutnamelongshortcutnamelongshortcutnamelongshortcutnamelongshortcutnamelongshortcutnamelongshortcutnamelongshortcutnamelongshortcutnamelongshortcutnamelongshortcutnamelongshortcutnamelongshort1234567890.lnk.download">
</span>
<!-- This set is used to test filenames that are changed within the file picker. -->
<span id="modifieditems">
<!-- filename which is changed within the file picker -->
data-pickedfilename='cyan.png' data-filename='cyan.png'>
<!-- filename which is changed to an invalid filename within the file picker -->
data-pickedfilename='"peach".png' data-filename='peach .png'>
<!-- an invalid filename which is changed to another invalid filename within the file picker -->
data-pickedfilename='"violet".png' data-filename="violet .png">
</span>
<!-- This set is used to test the filename specified by the download attribute is validated correctly. -->
<span id="downloads">
<a id="download0" href="http://localhost:8000/base" download="pearl.png" data-filename="pearl.png">Link</a>
<a id="download1" href="http://localhost:8000/save_filename.sjs?type=png" download="opal.jpeg" data-filename="opal.png">Link</a>
download="amethyst.png" data-filename="amethyst.jpg"
data-filename-platformlinux="amethyst.jpeg">Link</a>
download="onyx.png" data-filename="onyx.png">Link</a>
<!-- The content-disposition overrides the download attribute. -->
<a id="download4" href="http://localhost:8000/save_filename.sjs?type=png&filename=fakename.jpeg" download="topaz.jpeg" data-filename="fakename.png">Link</a>
download="amber?.png" data-filename="amber .png">Link</a>
download="jade.:*jpeg" data-filename="jade.jpg"
data-filename-platformlinux="jade.jpeg">Link</a>>
download="thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename.png"
data-filename="thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisaverylongfilename-thisisavery.png">Link</a>
download="	
 ᠎᠎ spa ced.png 	
 ᠎᠎ "
data-filename="spa ced.png">Link</a>
</span>
<span id="links">
<a id="link0" href="http://localhost:8000/save_filename.sjs?type=png&filename=one.png" data-filename="one.png">One</a>
<a id="link1" href="http://localhost:8000/save_filename.sjs?type=png&filename=two.jpeg" data-filename="two.png">Two</a>
<a id="link2" href="http://localhost:8000/save_filename.sjs?type=png&filename=three.con" data-filename="three.png">Three</a>
<a id="link3" href="http://localhost:8000/save_filename.sjs?type=png&dispname=four" data-filename="four.png">Four</a>
<a id="link4" href="http://localhost:8000/save_filename.sjs?type=png&filename=five.local" data-filename="five.png">Five</a>
</span>
<!-- The content-disposition attachment generates links from the images/objects/scripts above
and inserts them here. -->
<p id="attachment-links">
</p>
</body></html>