1 00:00:00,420 --> 00:00:06,930 In this lecture, we are going to read the files uploaded by the user accomplishing this behavior is 2 00:00:06,930 --> 00:00:09,000 going to require careful thought. 3 00:00:09,360 --> 00:00:13,080 The ultimate goal is to send the file to our robust program. 4 00:00:13,410 --> 00:00:18,270 From there, the robust program will be responsible for processing the image. 5 00:00:18,630 --> 00:00:23,520 After the image has been processed, the image will be given back to JavaScript. 6 00:00:23,850 --> 00:00:27,150 Lastly, the image will be presented to the user. 7 00:00:27,900 --> 00:00:32,790 The question becomes How do we send an image back and forth between languages? 8 00:00:33,120 --> 00:00:35,340 That's what we're going to learn in this course. 9 00:00:35,640 --> 00:00:42,480 First things first, we should start intercepting the file upload with events for this entire lecture. 10 00:00:42,600 --> 00:00:46,290 We're going to be working inside the main D.J.s file. 11 00:00:48,960 --> 00:00:51,030 Define a function called in its. 12 00:00:53,600 --> 00:00:56,300 We're going to contain everything from this function. 13 00:00:56,570 --> 00:00:58,130 Next, let's call it. 14 00:01:00,560 --> 00:01:06,890 The first step is to select the input element in the document, as I mentioned in a previous lecture. 15 00:01:07,070 --> 00:01:10,010 I've given IDs to the most important elements. 16 00:01:10,310 --> 00:01:14,930 This includes the input element create a variable called input. 17 00:01:15,410 --> 00:01:19,910 Its value will be the document don't get element by ID function. 18 00:01:20,240 --> 00:01:22,910 The ID of the element is called upload. 19 00:01:25,390 --> 00:01:31,060 Next, we can listen to events on this element by calling the add event listener function. 20 00:01:33,570 --> 00:01:36,870 The name of the event we'll listen to is called Change. 21 00:01:39,500 --> 00:01:45,020 The change event is fired whenever the user has uploaded a file on the input element. 22 00:01:45,380 --> 00:01:47,690 Next, passing an arrow function. 23 00:01:50,290 --> 00:01:52,070 We can begin reading the file. 24 00:01:52,330 --> 00:01:55,390 We're going to be using a class called file reader. 25 00:01:55,720 --> 00:01:58,450 If you've never heard of this class, that's fine. 26 00:01:58,780 --> 00:02:01,630 It's an official class defined by the browser. 27 00:02:01,960 --> 00:02:07,630 It allows us to store files in JavaScript before we can send the file to our robust app. 28 00:02:07,810 --> 00:02:14,650 We need to store the file in our JavaScript app at the top of the function, define a variable called 29 00:02:14,650 --> 00:02:15,640 file reader. 30 00:02:16,000 --> 00:02:20,170 Its value will be a new instance of the file reader class. 31 00:02:22,860 --> 00:02:27,010 The next step is to start reading the file data at the moment. 32 00:02:27,090 --> 00:02:31,980 We're listening to an event to accept the file, but we aren't storing it locally. 33 00:02:32,280 --> 00:02:34,860 We have the option of storing it immediately. 34 00:02:35,040 --> 00:02:37,800 But there's a reason we're going to avoid doing so. 35 00:02:38,160 --> 00:02:44,580 In the resource section of this lecture, I provide a link to a list of methods defined by this class. 36 00:02:47,260 --> 00:02:50,560 Browsers give us various options for reading a file. 37 00:02:50,980 --> 00:02:54,970 The method we're interested in is called read data as you URL. 38 00:02:55,270 --> 00:03:01,300 At this point, I should clarify why we're going to be using this function over storing the raw file. 39 00:03:03,900 --> 00:03:10,290 Technically speaking, we don't need the file reader class files are accessible through the input element 40 00:03:10,590 --> 00:03:11,850 in this code snippet. 41 00:03:11,970 --> 00:03:15,030 We have access to your list of files through the files. 42 00:03:15,030 --> 00:03:18,810 Property input elements can store multiple files. 43 00:03:18,990 --> 00:03:22,500 But for this example, we're going to focus on a single file. 44 00:03:22,860 --> 00:03:25,730 The list of files are zero indexed based. 45 00:03:26,190 --> 00:03:29,340 The first file can be retrieved with an index of zero. 46 00:03:29,880 --> 00:03:33,420 The value stored in this list is called a file object. 47 00:03:33,690 --> 00:03:40,380 A file object represents the file uploaded by the user, so you may be thinking, why are we going through 48 00:03:40,380 --> 00:03:42,960 the trouble of using the file reader class? 49 00:03:43,260 --> 00:03:45,870 Image files are stored with binary data. 50 00:03:46,200 --> 00:03:49,860 This type of data can't be read by humans, but by machines. 51 00:03:50,310 --> 00:03:53,550 It's not a huge issue, but it does present some problems. 52 00:03:53,820 --> 00:03:57,450 Transferring files between programs can be a tough task. 53 00:03:57,690 --> 00:03:59,760 But do you know what's not hard to do? 54 00:03:59,880 --> 00:04:01,050 Sending strings? 55 00:04:01,320 --> 00:04:04,560 Sending a string between JavaScript and rust is easy. 56 00:04:04,830 --> 00:04:06,510 The same is true, vice versa. 57 00:04:07,050 --> 00:04:11,250 Rather than transferring binary data, we should transfer a string data. 58 00:04:11,550 --> 00:04:14,910 The file reader class can help us with this type of action. 59 00:04:15,240 --> 00:04:19,820 It can convert a binary file into a string with base64 encoding. 60 00:04:20,250 --> 00:04:24,330 These 64 encoding was introduced to address the problem we're facing. 61 00:04:24,630 --> 00:04:27,600 We can skip the hassle of transferring raw files. 62 00:04:27,870 --> 00:04:30,720 Transferring text or strings is way easier. 63 00:04:32,770 --> 00:04:36,790 The idea of converting an image into text sounds bizarre, right? 64 00:04:37,060 --> 00:04:41,320 Luckily, we don't need to concern ourselves with the details of how it works. 65 00:04:41,650 --> 00:04:48,010 As long as we can transfer files between languages, we're good to go inside the function for the event. 66 00:04:48,160 --> 00:04:52,000 Call the file reader, read as data URL function. 67 00:04:54,520 --> 00:05:01,840 This function has one argument, which is the raw file will pass in the following input files zero. 68 00:05:04,380 --> 00:05:08,700 The read as data Earl function will convert our file into text. 69 00:05:08,910 --> 00:05:10,140 Let's grab the file. 70 00:05:10,440 --> 00:05:15,030 Browsers will store the text representation of a file on the resort property. 71 00:05:15,390 --> 00:05:18,360 However, we're not going to access it immediately. 72 00:05:18,630 --> 00:05:21,990 The larger the file, the longer it may take to process. 73 00:05:22,260 --> 00:05:26,740 We should wait for the file to be read below the file reader variable. 74 00:05:26,760 --> 00:05:30,990 We're going to update the on load and property to an arrow function. 75 00:05:33,580 --> 00:05:36,490 This function will get called whenever the file is loaded. 76 00:05:36,730 --> 00:05:44,170 At this point, it's safe to access the file inside the function create a variable called Base 64. 77 00:05:44,620 --> 00:05:48,060 Its value will be the file reader doubt result property. 78 00:05:50,570 --> 00:05:52,820 Next, let's log this variable. 79 00:05:55,320 --> 00:05:59,100 I think it will make things easier to understand by logging the value. 80 00:05:59,280 --> 00:06:03,900 We should also log the raw file object above the log log. 81 00:06:03,900 --> 00:06:06,720 The input files zero elements. 82 00:06:10,900 --> 00:06:16,810 We'll be able to compare the values, switch over to the browser with the developer tools opened. 83 00:06:17,140 --> 00:06:19,360 I'm going to quickly upload a file. 84 00:06:23,110 --> 00:06:29,320 After uploading a file, the information was logged in the console, the first log will be the file 85 00:06:29,320 --> 00:06:30,010 object. 86 00:06:30,370 --> 00:06:33,640 It acts as a wrapper around the binary file data. 87 00:06:34,000 --> 00:06:37,450 After this object, a massive wall of text was logged. 88 00:06:37,750 --> 00:06:41,230 Believe it or not, these values represent the same file. 89 00:06:41,770 --> 00:06:43,000 Take my word for it. 90 00:06:43,240 --> 00:06:48,520 Transferring text is easier than transferring file objects before we move on. 91 00:06:48,730 --> 00:06:50,950 There's one modification I would like to make. 92 00:06:51,250 --> 00:06:57,340 Looking closely at the beginning of the string, browsers will add metadata to the encoded value. 93 00:06:57,670 --> 00:07:02,470 This portion of the text is not part of the base 64 encoding format. 94 00:07:02,800 --> 00:07:05,230 It's additional information for the browser. 95 00:07:05,860 --> 00:07:08,350 Rust is not going to need this information. 96 00:07:08,500 --> 00:07:09,490 Let's remove it. 97 00:07:09,640 --> 00:07:11,950 Switch back to the JavaScript file. 98 00:07:14,560 --> 00:07:18,820 We're going to chain a function called replace on the result property. 99 00:07:21,410 --> 00:07:23,930 At the end of the day, we're dealing with a string. 100 00:07:24,170 --> 00:07:27,350 We have access to every JavaScript string method. 101 00:07:27,590 --> 00:07:31,490 The replace function will perform a regular expression on a string. 102 00:07:31,790 --> 00:07:34,280 I'm going to paste in a regular expression. 103 00:07:36,720 --> 00:07:43,050 Pause the video to copy what I have, the regular expression I pace it in, we'll search for the metadata 104 00:07:43,050 --> 00:07:44,670 prefixed to the string. 105 00:07:45,000 --> 00:07:48,360 If it finds a match, let's replace it with an empty string. 106 00:07:50,850 --> 00:07:53,070 Time to give our app one more test. 107 00:07:53,310 --> 00:07:54,750 Try uploading a file. 108 00:07:57,240 --> 00:07:59,730 We've successfully removed the metadata. 109 00:07:59,880 --> 00:08:05,790 We can proceed to transfer the file from our JavaScript application to our robust application. 110 00:08:06,060 --> 00:08:08,820 Let's begin this process in the next lecture.