How to load text from file with just one single button?

I'm trying to code a message encrypt/decrypt page using character subtitution. I managed to save key to a file and I want to load it back. I managed to load key successful with this:

    <script>
    function loadkey () {
    var keyToLoad = document.getElementById("keyToLoad").files[0];
    var keyReader = new FileReader();
    keyReader.onload = function(keyLoadEvent)
    {
        var keyFromFileLoaded = keyLoadEvent.target.result;
        document.getElementById("key").value = keyFromFileLoaded;
    };
    keyReader.readAsText(keyToLoad, "utf-8");
}
</script>

<h3>Put your key here</h3>
<textarea id="key" cols="30" rows="1"></textarea>
<br>
<button onclick="genKey()">Generate  key</button>
<button onclick="savekey()">Save key</button>
<input type="file" id="keyToLoad">
<button onclick="loadkey()">Load key</button>

But it loodk really stupid with select file button and load key button separately. So I hide input button and trigger it from clicking Load key button:

<script>
    function handleChooseKey()
{
    document.getElementById("keyToLoad").click();
}

function loadkey () {
    var keyToLoad = document.getElementById("keyToLoad").files[0];
    var keyReader = new FileReader();
    keyReader.onload = function(keyLoadEvent)
    {
        var keyFromFileLoaded = keyLoadEvent.target.result;
        document.getElementById("key").value = keyFromFileLoaded;
    };
    keyReader.readAsText(keyToLoad, "utf-8");
}
</script>

<h3>Put your key here</h3>
<textarea id="key" cols="30" rows="1"></textarea>
<br>
<button onclick="genKey()">Generate  key</button>
<button onclick="savekey()">Save key</button>
<input type="file" id="keyToLoad" style="display:none;">
<button onclick="handleChooseKey();loadkey();">Load key</button>

My problem is it cant make the loadkey() function work right after the key file is loaded, so the key wont be loaded until the next click. Please help me. Thank you :)

Answers


Try this:

<script>
    function handleChooseKey()
{
    document.getElementById("keyToLoad").click();
    document.getElementById("keyToLoad").onchange = function(e) { loadkey() };
}

function loadkey () {
    var keyToLoad = document.getElementById("keyToLoad").files[0];
    var keyReader = new FileReader();
    keyReader.onload = function(keyLoadEvent)
    {
        var keyFromFileLoaded = keyLoadEvent.target.result;
        document.getElementById("key").value = keyFromFileLoaded;
    };
    keyReader.readAsText(keyToLoad, "utf-8");
}
</script>

<h3>Put your key here</h3>
<textarea id="key" cols="30" rows="2"></textarea>
<br>
<button onclick="genKey()">Generate  key</button>
<button onclick="savekey()">Save key</button>
<input type="file" id="keyToLoad" style="display:none;">
<button onclick="handleChooseKey();">Load key</button>

Need Your Help

Incorrect array returned from EF with LazyLoadingEnabled = true via AJAX

javascript asp.net entity-framework

Briefly, if I set LazyLoadingEnabled=true when setting data context in my server code, I am getting strange JSON objects, objects with their only property being $ref instead of real JSON objects wh...

Compatibility of a TStringList backup from old to newest versions

delphi compatibility delphi-2007 unicode-string tstringlist

I have a backup system which uses a TStringList, but I code with an old Delphi (Ansi strings).

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.