Hello welcome to another programming A2Z video tutorial. In this
video tutorial I'm going to show you how to load a text from a file into your
web page. And i'm going to use that for a lot of other examples and things that
i'm going to do in later videos. So I'm using the p5JS framework.
Frst of all let me just show you something that I have here I have a text
file as part of my folder along with the index.html and sketch.js file.
I was thinking of sub directories and do various things like that and this text
file simply has a bunch of paragraphs of text from the wikipedia page on rainbow
rainbow wikipedia page so the very first thing I can do that really makes it easy
to load text is that i can write a function called preLoad() and the preLoad()
function is actually an event that happens before setup() is called so one of
the goofy things about javascript is everything happens in this quote-unquote
asynchronous manner meaning you start loading files and you start doing
something else and you start doing something else and you try to do
something that uses the file but maybe it's not loaded yet and in a moment i'm
gonna show you how to sequence this sort of stuff and maybe later I'll even show
you more sophisticated ways to sequence the stuff but right now the easiest ways
p5js says "Hey you don't want to worry about all" that you can simply say
loadStrings("rainbow.txt") into a global variable called txt that I've made up as
long as I put that in preLoad() by the time I get to setup and I could do stuff
to the DOM of the page.
I know that that text will be loaded and so what I'm going to do here is just add
in here consol.log(txt) so we can see what is it that's coming out of the
file which might be something that you don't expect so I'm going to do this and
you can see here it is now
weirdly enough you can see like "why isthere this bracket there before there's
a quote?" there seems to be some sort of... then there's like this "year" there's a
comma another quote. There seems to be some sort of array here so let me do
something to this file and we go to rainbow.txt and I'm gonna say rainbow
unicorn blueberry you know what''s good too is mango
who doesn't love mangos?
Ok so I'm going to change the text file to just have four lines in it and I'm
going to refresh this page and now you can see more clearly what's happening so
one of the things that loadStrings() does for you which is often very convenient
but not always so convenient is that it gives you a body of text as an array
Each element being the array being each line of text in the file so you know if
you have some sort of like... this could be very convenient if you have a text file
of words like you might have a text file of words you're searching for and
something has them all an array where you load that text file that can be very
convenient in our case here maybe what I want to do and I'm gonna undo all this
so I have my rainbow text back.
Maybe what I want to do is just put all this text onto the web page and so i
might want to say in my code createP.. like make a paragraph with that text now
let's see what happens
and weirdly enough i love sometimes you just gotta love javascript libraries
like p5js it like figured out something to do it took the array and it
just like made a paragraph out of all the things in the array and I
think it actually got everything but another thing that I could do is I could
use a function called join() which takes all the elements of the array and joins
them together and I could actually join them with a tag in between them so
you can see now if i say join everything in that array and put a br tag and I
think I probably supposed to type it like this as a self closing tag then
what you'll see here if i refresh it is now I actually and maintaining the line
breaks from that file in terms of rendering the stuff in that text file on
the webpage so this is a very quick and easy way to pull in a text file and
display that on the page so i'm going to use this in later examples you can think
of things you might want to do like : chop up the text file count all the words in
analyze it that sort of thing,
load multiple text files you could call loadString() multiple time but there's
two more things I need to show you in this video number one is you don't
always just want to like load the file
in preload. You might want to only load the file with the user clicks a button
or something like that and number two is you might want the user to be able to
submit an actual text file and i'm gonna show you how to do that as well
ok some of the chat actually by the way asked how does one do csv files so you
could actually load a CSV which is a comma separated values file which is
like a spreadsheet so to speak and then parse it you split and chop it up with
commas I might show you how to do that in another video but there is actually a
p5js function called load table which knows how to load the csv file and
something called the table for object that you can traverse and iterate over
as if it's a spreadsheet like functionality but that's for another
time.
Ok so now let me get rid of preLoad() and what I'm going to do is I'm gonna go to
my HTML file and I'm going to add a button and i'm going to call this button
give it an ID called loadfile and "load a rainbow text" and now we can see if i go
to the webpage we should see i have a button called load rainbow text and if i
go to the sketch what I want to do now is first I want to access that button
via its ID so I select it from the page now I have a variable that knows about
that button and then I could say button . mousePressed() and I can reference a
function I can say load I can write a function called loadfile() so now i can
write that function here so now I've written a function called load file and
what I want to do in that function is call loadStrings() on that file name
here's the issue though now that i'm not using preLoad() I can no longer just set
the result of loadStrings() to a variable what I need to have now is a call back
So i'm going to say load this text file and then I'm going to make a function
called fileloaded() fileloaded! And that function Ooops i'm going to look so i'm just
going to write it up here is going to be the function
that is triggered when the text file is ready so there's a whole sequence
happening here i press the button on the mouse load file happens i call load
strings when the text is ready i call file loaded and what comes in there: data.
I give this function an argument i'm going to call it data i could call it
text you can call it anything.And what I can do now is I can say text oops ooooh
text = data so what I'm doing is I'm saying when the file is loaded the
argument to this function is filled with the stuff that's in that file I can set
it equal to my global variable but I actually don't really even need the
global variable anymore.
It sort of depends what I'm doing here but what I'm going to do is instead
whoops i'm going to get rid of this global variable and what I'm gonna do is
I'm going to take this and i'm just going to put it in here and i'm going to
say data so i'm going to create that paragraph when the text is ready so I'm
setting up now a sketch when i run the sketch nothing happens but as soon as I
say this I load that text and it appears on the page. So this is how you can
sequence the loading of data from a file and obviously again
what could you do this more interesting than just display that exact text back
to you or you might have different buttons for different texts like choose
your own source text for this web application that you're making. That type
of thing.
Ok so we've seen almost everything now I have one more piece of this
What if instead of loading text from a file i want the user to be able to, I
want the user to be able to select a File themselves so here's how I can do that.
I can add to setup(), I can say createFileInput().
I'm just gonna put that there with nothing else just to see that this does
something. And I'm gonna do this and you can see look at this
Just that createFileInput() has created this whole choose
file no file chosen button thing on the page so I'm getting a lot of
functionality from the web browser for free and of course i could style this
differently i could change probably what it says they're sort of choose file i
could do a lot of custom stuff
i'm using the basic raw default behavior so when i press choose file it opens up
a file menu for me and I could you know go here and I could actually go and
browse and behind you know my rainbow . txt file and select it and you can see
there it is now nothing happened
so what I need to do is I need to set up a callback for when the user selects a
file and there's some complications here because what if the user selects an
image file?
What if they select a text file what if they select a you know, some other
kind of files but I can't think of right now so i might have to handle different
kinds of files differently or do some error checking in that type of thing but
basically i know that i need a call back.
So let's go and add a callback create file input and i'm going to say i'm
going to say fileSelected() so i'm going to write a function now called fileSelected()
and I assume that file is going to get some argument. That function is
going to get some argument and I don't know what's going to be there
I could look up the documentation so i'm just going to write console.log(file)
Now i'm going to run this i'm going to go back and select that rainbow file and
you can see aaah look at this
what did I get...I get a p5 file object so there are lots of things here that i get
i have what kind of file is it has a type and subtype what's the name
how big it is so that sort of thing so number one thing that I can do here
I can just say whoops... I could say something like createP() you know
file . name+ file . size plus file . type so right now i'm going to create a..
I could create a paragraph element with stuff stuff about that particular file
so if I refresh the page, I select that file you can see ah I got rainbow . txt
We make this a little bigger so you can see it it's got 12,000 some bytes in it
that's way too big!
It's a text file I could you know select my HTML file it's still a text file i
could look at the subtype I could try to get I I feel like there must be an image
file somewhere on this computer but I don'... I'm not going to bother to look
I'll let you experiment with that yourself. So you can see I can have the
browser I can have my code know about the file that the user selected and even
better i can get access to the contents of that file and the way that I do that
whoops but I just don't click here
no stop there sorry uh I can explain the loss .... I want to show you what other stuff
about the developer tools later when I got lost in there.So what I want to do
now is reproduce the contents of that file and I'm going to say right here
createP(file.data).I believe the actual contents of
the file is in file.data so i'm going to choose file I'm going to pick this
And you can see there it is
here's all the contents there now, it's not coming in as an array so I
don't have the line breaks I could do it replaced put tags in it i'm not going
to worry about all that right now.
Ultimately I'm now have the user able to select a text file that I can process
and return something back to the user.
The other thing that I will mention here is that I might want to protect and say
"Hey!"
only if file.type = txt then create that paragraph otherwise say "I
need a text file" so here with a little bit if statement I can add some error
check in here so if i run this again and they choose file and I go somewhere on
this computer under applications and I ....I don't know I try to get this
chess application and I select that it could say look here's this giant
application, but I need a text file so you can you can do some sort of error
checking in that sort of thing.
With with with in your code as well now there's two more things about this
Probably more than two .... there if you look in the documentation there is a way to
allow ...and i'm going to look this up for you right now ... createFile Input p5 js.
Hopefully this is going to bring me to that page, it did not, so I'm going to
find it myself i'm gonna go to a p5js.org I'm gonna go to libraries I'm
gonna go to p5 DOM and I'm going to look for createFileInput there is a second
argument which if you add allows the user to select multiple files you have
to handle those a little bit differently maybe I'll.. you'll see this in some of my
examples or maybe i'll come back to this in a future video so if you want the
user to be able to select multiple files take a look at this. That's there for you and the
other thing that I'll show you is that you can have a user.. you can instead of
having the user have to select the file you can actually also have a user able
to just take a text file and drag it into the browser drop it in the browser
have your program process that file and jeez why is my phone ringing
incessantly turn that pop-up turning on airplane mode.
OKso if you want to learn how to do that I'm going to publish examples that
go along with the agency course that have that in it but I've already made a
video tutorial about drag and drop a file into the browser so I'm just going
to google drag-and-drop shiffman
youtube and i'm sure this video is going to come up right now so I'm going to
reference you you'll find the link to this video in this video's description
probably some kind of pop-up thing happening right now if you want to take
a look at that you can go ahead and watch the drag and drop a file video
tutorial to see how that works
alright thanks very much for watching this concludes the sequence of videos
about how to get texts from the user!