Beautiful JavaScript: 2015

Problem:

How to load, edit and save a text file in HTML5 using JavaScript?

How to read and write files in JavaScript?

How to upload, edit and download a file in HTML5 using JavaScript?

Solution:

Some features of HTML5 to allow the user to load, edit, and save a text file on their local computer. So, user can use HTML5 and JavaScript to upload, edit and download/save file. To better understand please see the bellow example.

Example:

<html>

<head>

<style>

#panelShowTable

{float:left; width:700px; height:600px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

#panelHiddenTable

{float:left; width:600px; height:600px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

#panelDataShow

{display:inline-block;}

#button4Save

{float:right;}

#button4Load

{float:right;}

</style>

function saveTextAsFile()

{

var textToWrite = document.getElementById("inputTextToSave").value;

var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});

var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

var downloadLink = document.createElement("a");

downloadLink.download = fileNameToSaveAs;

downloadLink.innerHTML = "Download File";

if (window.webkitURL != null)

{

// Chrome allows the link to be clicked

// without actually adding it to the DOM.

downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);

}

else

{

// Firefox requires the link to be added to the DOM

// before it can be clicked.

downloadLink.href = window.URL.createObjectURL(textFileAsBlob);

downloadLink.onclick = destroyClickedElement;

downloadLink.style.display = "none";

document.body.appendChild(downloadLink);

}

downloadLink.click();

}

function destroyClickedElement(event)

{

document.body.removeChild(event.target);

}

function loadFileAsText()

{

var fileToLoad = document.getElementById("fileToLoad").files[0];

var fileReader = new FileReader();

fileReader.onload = function(fileLoadedEvent)

{

var textFromFileLoaded = fileLoadedEvent.target.result;

document.getElementById("inputTextToSave").value = textFromFileLoaded;

};

fileReader.readAsText(fileToLoad, "UTF-8");

}

</script>

</head>

<body>

</div>

</div>

<b>Filename to Save As:</b>

</div>

<div>

<b>Select a File to Load:</b>

<button id="button4Load" onclick="loadFileAsText()">Load Selected File</button>

</div>

</body>

</html>

Suggestion:

If you have better solution for this questions please don't hesitate to give a comment bellow.Thank you.

Problem:

I'd like to make a click event fire on an <input type="file"> tag programmatically. That means one function will call when I finished upload a file.
or
How can I make a click event programmatically after upload a file with file input element?

Solution:

You can simply use "onchange" attribute in input element. You write a function in javascript and call it with "onchange" attribute that will work like onclick.

Example:
<html>
<body>
<div>
<input id="myUpload" type="file" onchange="afterCall();" autofocus> </input>
</div>

<script type='text/javascript'>
function afterCall(){
alert("Thank you for upload a file");
}
</script>

</body>
</html>

Suggestion:

If you have better solution for this question please don't hesitate to give a comment bellow.
Thank you.

Beautiful JavaScript

Sunday, February 1, 2015

How to load, edit and save a text file in HTML5 using JavaScript?

Wednesday, January 28, 2015

In JavaScript can I make a “click” event fire programmatically for a file input element?