In this lecture, we are going to read the files uploaded by the user accomplishing this behavior is
going to require careful thought.
The ultimate goal is to send the file to our robust program.
From there, the robust program will be responsible for processing the image.
After the image has been processed, the image will be given back to JavaScript.
Lastly, the image will be presented to the user.
The question becomes How do we send an image back and forth between languages?
That's what we're going to learn in this course.
First things first, we should start intercepting the file upload with events for this entire lecture.
We're going to be working inside the main D.J.s file.
Define a function called in its.
We're going to contain everything from this function.
Next, let's call it.
The first step is to select the input element in the document, as I mentioned in a previous lecture.
I've given IDs to the most important elements.
This includes the input element create a variable called input.
Its value will be the document don't get element by ID function.
The ID of the element is called upload.
Next, we can listen to events on this element by calling the add event listener function.
The name of the event we'll listen to is called Change.
The change event is fired whenever the user has uploaded a file on the input element.
Next, passing an arrow function.
We can begin reading the file.
We're going to be using a class called file reader.
If you've never heard of this class, that's fine.
It's an official class defined by the browser.
It allows us to store files in JavaScript before we can send the file to our robust app.
We need to store the file in our JavaScript app at the top of the function, define a variable called
file reader.
Its value will be a new instance of the file reader class.
The next step is to start reading the file data at the moment.
We're listening to an event to accept the file, but we aren't storing it locally.
We have the option of storing it immediately.
But there's a reason we're going to avoid doing so.
In the resource section of this lecture, I provide a link to a list of methods defined by this class.
Browsers give us various options for reading a file.
The method we're interested in is called read data as you URL.
At this point, I should clarify why we're going to be using this function over storing the raw file.
Technically speaking, we don't need the file reader class files are accessible through the input element
in this code snippet.
We have access to your list of files through the files.
Property input elements can store multiple files.
But for this example, we're going to focus on a single file.
The list of files are zero indexed based.
The first file can be retrieved with an index of zero.
The value stored in this list is called a file object.
A file object represents the file uploaded by the user, so you may be thinking, why are we going through
the trouble of using the file reader class?
Image files are stored with binary data.
This type of data can't be read by humans, but by machines.
It's not a huge issue, but it does present some problems.
Transferring files between programs can be a tough task.
But do you know what's not hard to do?
Sending strings?
Sending a string between JavaScript and rust is easy.
The same is true, vice versa.
Rather than transferring binary data, we should transfer a string data.
The file reader class can help us with this type of action.
It can convert a binary file into a string with base64 encoding.
These 64 encoding was introduced to address the problem we're facing.
We can skip the hassle of transferring raw files.
Transferring text or strings is way easier.
The idea of converting an image into text sounds bizarre, right?
Luckily, we don't need to concern ourselves with the details of how it works.
As long as we can transfer files between languages, we're good to go inside the function for the event.
Call the file reader, read as data URL function.
This function has one argument, which is the raw file will pass in the following input files zero.
The read as data Earl function will convert our file into text.
Let's grab the file.
Browsers will store the text representation of a file on the resort property.
However, we're not going to access it immediately.
The larger the file, the longer it may take to process.
We should wait for the file to be read below the file reader variable.
We're going to update the on load and property to an arrow function.
This function will get called whenever the file is loaded.
At this point, it's safe to access the file inside the function create a variable called Base 64.
Its value will be the file reader doubt result property.
Next, let's log this variable.
I think it will make things easier to understand by logging the value.
We should also log the raw file object above the log log.
The input files zero elements.
We'll be able to compare the values, switch over to the browser with the developer tools opened.
I'm going to quickly upload a file.
After uploading a file, the information was logged in the console, the first log will be the file
object.
It acts as a wrapper around the binary file data.
After this object, a massive wall of text was logged.
Believe it or not, these values represent the same file.
Take my word for it.
Transferring text is easier than transferring file objects before we move on.
There's one modification I would like to make.
Looking closely at the beginning of the string, browsers will add metadata to the encoded value.
This portion of the text is not part of the base 64 encoding format.
It's additional information for the browser.
Rust is not going to need this information.
Let's remove it.
Switch back to the JavaScript file.
We're going to chain a function called replace on the result property.
At the end of the day, we're dealing with a string.
We have access to every JavaScript string method.
The replace function will perform a regular expression on a string.
I'm going to paste in a regular expression.
Pause the video to copy what I have, the regular expression I pace it in, we'll search for the metadata
prefixed to the string.
If it finds a match, let's replace it with an empty string.
Time to give our app one more test.
Try uploading a file.
We've successfully removed the metadata.
We can proceed to transfer the file from our JavaScript application to our robust application.
Let's begin this process in the next lecture.