Regular Files API | Lesson 2 of 8

Working with files in ProtoSchool

As a matter of security, web browsers don't let us directly change files that live in your computer's file system. Therefore, you'll need to upload one or more files to the browser that you can use throughout this tutorial.

Within each challenge, you'll see that you can upload files from your computer either by dragging and dropping or selecting them from your file explorer. If you look closely at the run function in the code editor, you'll notice that it now takes an argument files. When you upload files from your computer, we'll make sure they're passed into the function as the files array. As long as you don't refresh your browser, these files will remain accessible for the next lesson in the tutorial, but you'll also have the option to upload different files to work with for each lesson.

Each element in this files array will be a File object, as defined by the browser's File API (not to be confused with the IPFS Files API). Aside from the contents of the uploaded file, a File object also contains the following attributes:

  • name (name of the uploaded file)
  • lastModified (date the uploaded file was last modified)
  • size (size of the uploaded file)
  • type (type of the uploaded file)

To practice, let's upload one or more files from your computer and take a look at what's been received by the browser as the files array.

Try it!

First, upload one or more files by dragging and dropping below or clicking to make a selection from your file explorer. Next, in the code editor, remove the comment markers (//) that precede return files within the run function.

Step 1: Upload files
Step 2: Update code
View SolutionReplace with SolutionClear Default Code
Upload file(s) and update the code to complete the challenge.
You must upload a file before submitting.