Resetování <input type=file>

Z bezpečnostních důvodů platí pro uploadovací formulářové políčko trochu jiná pravidla.

Například není možné přistupovat JavaScriptem k jeho hodnotě ve stejné míře jako u jiných políček.

• Přenastavení hodnoty uploadInput.value = "něco" selže.

• Přečtení hodnoty alert(uploadInput.value) vrátí jen smyšlenou cestu: C:\fakepath\nazev-souboru.txt. Ve starších prohlížečích Firefox je název souboru.)

Je to docela pochopitelné, protože jinak by si majitel stránky mohl nahrávat libovolné soubory z disku návštěvníka tipováním jejich cest.

Jak vymazat pole pro upload

1. Jedna možnost je použít běžné resetovací tlačítko (např. <input type=reset>) — to ale vymaže celý formulář.

2. Druhá možnost je nahrávací <input> vymazat, tj. nastavit jeho value na "":

   formular.nazevPole.value = "";

   Smazání je jediná možnost, jak měnit hodnotu tohoto pole. Nastavení něčeho jiného, než je prázdný řetězec skončí chybout:

   Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Starší prohlížeče

Výše uvedené řešení nefunguje v IE 10 a starších. V ostatních prohlížečích nešel tento postup použít ještě v roce 2014.

Pro tyto případy existuje ještě jedna možnost — přepsat JavaScriptem obsah políčka tím samým obsahem.

<span id="obal">
  <input name="upload" type="file">
</span>
<button onclick="
  document.getElementById('obal').innerHTML = document.getElementById('obal').innerHTML
">
  Odstranit
</button>

Živá ukázka

U javascriptového resetovacího tlačítka je nutno dát pozor na to, aby nechtěně neodesílalo formulář. Tomu zabrání buď return false, nebo tlačítko, co formulář neodešle, což je <input> nebo <button> s type=button.