1.4: Getting Text from User: Loading a Text File – Programming with Text


In this video, I show you how to get text input from a user by loading a text file using the p5.js function loadStrings(). I discuss how a user can upload their own text file with createFileInput() or a “drag and drop” zone.

Next Video:

Introduction to Programming from A to Z:

Support this channel on Patreon:

Send me your questions and coding challenges!:


GitHub Repo with all the info for Programming from A to Z:

Source Code for the all Video Lessons:

loadStrings() reference:

Drag and Drop with p5.js video:


For More Programming from A to Z videos:

For More Coding Challenges:

Help us caption & translate this video!

📄 Code of Conduct:

Nguồn: https://thegioiinuv.com/

Xem thêm bài viết khác: https://thegioiinuv.com/lap-trinh-php/


  1. a <- 456 + 9782
    b <- a * 5
    c <- a + b
    x <- b – 999
    y <- 23 + c
    z <- x – y
    xx <- x * x
    yy <- y * x
    aa <- 521 * z
    bb <- 56 / 8
    cc <- yy + aa
    qq <- 456 – 2
    dd <- cc + qq
    answer <- dd – xx

    how could you solve this in JS ,print answer out from a txt file

  2. I opened up a text document on notepad and got this </Linearized 1/L 402472/O 131/E 283535/N 2/T 402120/H [ 504 219]>> endobj

    147 0 obj <</DecodeParms<</Columns 5/Predictor . how do I undo this? what happened?

  3. fantastic, but how load a comma seperated file or an XML file into array element, like an array for countries and other for capital cities

  4. Dan, my code works fine and is shown on the console perfectly but the page won't show it(it's blank). Do you know why this is happening? I'm running a node HTTP server as you showed in a previous video. I'd really like to continue watching this playlist but I cannot skip this lesson.

  5. p5.js:20602 Failed to load file:///Users/ZhouYi/Desktop/P5/Day12%20AZ%201.1-/1.4%20Loading%20a%20Text%20File/load/rainbow.txt: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
    I tried using live server and chrome or other browser but not work

  6. Very nice but i have a question is there a way that a can load a .txt file onto my html by just typing the name instead of a button ( example i have a text file named HELP.txt instead of clicking a button i can just type it and will display it's content to my html after )

    Reason for asking is because i want to create a personal website / career portfolio but i want that website to have a look and feel of a linux terminal (something that like that) I'm hoping you can help me with query because by far this is the only tutorial that i found useful.

    thanks again cheers.

  7. Hi your video is damn great and helful, but when I try to modify the text file like you did in 02:15 and hit reload the local server, the string didn't change at all. How can I fix it, thanks

  8. i have a error.
    p5.js:20255 XMLHttpRequest cannot load file:///C:/Users/SNS/Desktop/A2Z/1.4%20Getting%20Text%20from%20User/hh.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
    how can i fix this???

  9. hello Danii, listen how can i do all this in Processing 2.2? sorry i have written allot of p2 to just leave it behind and redo everything in p3 and UP and most lib for p2 dont even exist in most higher versions of processing. so if im going to upgrade anything its going to be after i export my sketch to bring into a real IDE like netbeans or something like VS13 BUT you're still my guy for learning all the time!

  10. Great video. Can you show us how to load text file in JavaScript without using P5 JS framework please? thank you..

  11. I seem to be getting this in my console:
    Uncaught TypeError: fxn.bind is not a function
    at attachListener (p5.js:11756)
    at p5.Element.mousePressed (p5.js:11079)
    at setup (sketch.js:18)
    at p5.<anonymous> (p5.js:9108)
    at p5.<anonymous> (p5.js:9038)
    at new p5 (p5.js:9320)
    at _globalInit (p5.js:5602)

    sketch.js:18 is :

    I've tried with loadfile and many other names for the button and for the " var button = select('#load');" but nothing seems to work.

  12. I didn't understand createFileInput for multiple file access what should i pass in 2nd argument should i pass a callbackfunction for that as well? Shouldn't the documentation also include example code as well googling it I didn't find any results.

  13. For some reason no matter what i do it always says loading then will never work😥please help i really need this for my game

  14. There's probably something wrong with my code, or could it be my Chrome?
    Developer Tools console won't show anything. Just that ">"thing. Is there anything else I need to do?

  15. Hello Daniel! First of all thanks to teach to us for free all this stuff! I have a problem I can't figure it out. How can I use the loadTable or loadString function combined with the createFileInput function (or drag and drop technic) to let a user to upload a CSV file? Thanks for any help!

  16. When replacing the contents of rainbow.txt to just random words, I must first change the filename from rainbow.txt to something else, and then update the filename in the sketch.js file.
    It is not enough to just CTRL+A and del the contents of rainbow.txt and add some words to it, CTRL+S, and refresh the webpage. It shows the same contents in the right hand console Array […..] unless I rename the file all around and refresh.
    Very strange.

  17. Hi Daniel, first of all thanks for these lessons.You are awesome..!!!(background sounds plays for awesomeness…haha…;)
    Could you make lessons on interactive data-visualization in p5.js with animations into them.For instance,one on this page http://flowingdata.com/2016/03/03/marrying-age/


Please enter your comment!
Please enter your name here