/////////////////////////////////////////////////////////////////////

$("#downloadButton").mouseup(function (e) {

outputFileName = "output.txt";
fileToSave = "Line1 of my text\nLine2 of my text\nLine3 of my text";

download(outputFileName, fileToSave);
});

///////////////////////////////////////////////////////////////////

function download(filename, text) {

var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);

if (document.createEvent) {
var event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
pom.dispatchEvent(event);
}
else {
pom.click();
}

}

///////////

});
</script>

Maximum right-hand position

id="dummyExtremeRight"

Now create a text widget (DIV) and put it on top of the download icon.

Here, it is shown in colour, but you can make it transparent straight away if you wish.

You can now make that widget transparent as well.

In anticipation of the later "friendly" version, let's now include another widget.

In webProg3, create a text widget, and place it on the extreme right-hand side of the screen:

If you don't understand the ins and outs of that function, don't worry about it. I don't understand it either! Just copy it verbatim into your app!

That's all you need for the HTML at the moment.

Now for the Javascript:

If you wish, you can test this first half of your app. You should be able to download a file called "output.txt" to your computer. If you open it in a text editor, you should see this:

Line1 of my text

Line2 of my text

Line3 of my text

Now we are ready to produce the second half of the app, and activate the UPLOAD button.

___________________________________________________________________________________________________________________________

id="uploadContainerDiv"

That marks the end of our work with webProg3.

You need to continue with a text editor, since what we are about to introduce is outside its norms.

WebProg3 apps are heavy, and they are capable of slowing down, or even breaking, ordinary text editors. You can use an editor such as Sublime Text, or you can use my very own text editor, "howText", which is simpler.

If you would like to dive in immediately to try the new "howText" editor, see the link on the left.

Here's the

"uploadContainerDIV" that you have just created:

You need to insert a "barebones" input widget in the middle of it.

Give it an ID of "inputWidget" and a class of "fileupload":

<div id="uploadContainerDiv" class="wp-text wp-text" title="" contenteditable="false"........................

</div>

Now save your script in "FRIENDLY" format with no margins.

Let's now see the Javascript (JQuery):

/////////////////////////////////////////////////////////////////////

$("#uploadContainerDiv").css("cursor","pointer");
/*
left: 9.166666666666668vw;
top: 5.833333333333334vw;
width: 4.583333333333334vw;
height: 4.166666666666667vw;
*/

Set the upload container's mouse pointer as shown.

After friendifying the script, the uploadContainerDIV's coordinates and dimensions are in vw units. They weren't shown above, so I've noted them as a comment in the Javascript, as you can now see.

Next, tailor the inputWidget using CSS:

/////////////////////////////////////////////////////////////////////

$("#uploadContainerDiv").css("cursor","pointer");
/*
left: 9.166666666666668vw;
top: 5.833333333333334vw;
width: 4.583333333333334vw;
height: 4.166666666666667vw;
*/

$("#inputWidget").css("cursor","pointer");
$("#inputWidget").css("visibility","visible");
$("#inputWidget").css("background","red");
$("#inputWidget").css("opacity",0); //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
$("#inputWidget").css("position","absolute");
$("#inputWidget").css("left","0vw"); //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
$("#inputWidget").css("top","0vw"); //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
$("#inputWidget").css("width","4.583333333333334vw");
$("#inputWidget").css("height","4.166666666666667vw");

/////////////////////////////////////////////////////////////////

And there you are!

The demo of uploading and downloading text files is now ready.

It remains only to test its functioning.

Make sure the mouse pointer hand appears over the entire area of the Upload widget, but not beyond it.

Also, make sure the widget responds to mouse clicks over the entire area.

Resize your browser to smaller/larger extremes, and check that the functioning remains perfect.

This is fundamental to the operation of many apps you might consider writing. But the methods of achieving these functions are incredibly clumsy. Why on earth the producers don't provide us with a couple of "black boxes" labelled e.g. "uploadText" and "downloadText", I really cannot understand. But I am a relative beginner myself, so I suppose that such things must be above my head, I don't know!

The following procedure is not the shortest way of providing the upload and download buttons, but it works well for me.

Downloading is a bit more straightforward than uploading, so we'll deal with that first.

We begin with a "vanilla" version (using pixels), which is then developed into a "friendly" version (using vw units).

In webProg3, start with a "titleBar" picture that has your buttons on it:

In webProg3 once more, create a new text widget and place it over the Upload button. Then make it TRANSPARENT:

Note the following:

The inputWidget's left and top are set to ZERO, since this is its position within the container.

The width and height are exacly the same as those of the container.

The opacity is set to 0, which makes it invisible.

However, if you want to check the size and position of the inputWidget visually, in order to make any fine adjustments that might

be required unexpectedly, set the opacity temporarily to 1.

The widget will then be shown in RED.

Finally, we need the Upload handler, which references the input widget's class="fileupload":

$('.fileupload').change(function(event) {

var external_file = $('input.fileupload').val().split('.').pop().toLowerCase();

if (event.target.files != undefined) {
var reader = new FileReader();

reader.onload = function(event) {
uploadedFile = (event.target.result); //////////////
alert(uploadedFile);
}
reader.readAsText(event.target.files.item(0));

fileName = event.target.files[0].name;
//alert("fileName = " + fileName);
}
return false;
});