- Read Tutorial
- Watch Guide Video
Now that we have some more clarity on what our PostImagePicker is doing, in this guide, we're going to start building out our form functionality. Now, right now, we have the data needed to send up to the server. So I'm going to show the simulator here. So we have our name, we have our content, and now we have access to our image file but we can't simply pass up all of that data directly to the API. The API would not know what to do with it.
So in JavaScript, what we need to do is to create a form wrapper and that is how we're going to be able to wrap up the data in a way that the server can understand the images. So a standard type of JSON object will work if we're sending just textualbased data but if we're sending images, we need to use a form object, and that's what we're going to do in this guide.
So right here, you can see I've my PostFormScreen open and it has name, content, and postImage. So we are all good to go with how that is working. Now let's create a function here called buildForm. So I'm going to say const buildForm and this is just going to be a standard fat arrow function.
Now I'm going to say let, so I'm going to use a let variable, and I'm going to say formData, so that's going to be the name of a variable and then I'll say new FormData. Now, the FormData object, if you've taken any of my other React courses where we worked with images, this is native to JavaScript, so this is going to be the same process that you'd follow if you were sending up images in a standard React web application. This FormData object allows us, it's really a function, allows us to take the data to add to it to set up keyvalue pairs, and then to send that to the server, and if there are images involved, then it will wrap those up nicely for us.
So we have our formData object here and now we need to append, that's the function that we use for FormData, we need to append the name and the content. So let's start with those two first because those are going to be the easiest. So I'm going to say formData dot, and then you can see all the various functions that we have here. The one that we want is append. What append does is it adds elements directly into our formData object.
[Capture #1 [2:40]]
Now, append is a function, and inside of it, it takes in one or more arguments. So the very first argument it takes in is going to be the name of our keyvalue pair. For our API, that's going to be post and then with brackets, we're going to say name. Now you can see that we have an error here because we need to have at least two, if not, three arguments. So the very next argument is going to be the value. So here, that is simply going to be our name value, our name piece of state. So now we're going to do the same thing for our content so I'm going to say post content, and then content. So this is setting it up so that whenever we're going to hit Submit, instead of just sending the data directly, it's going to create this formData object, it's going to append our post name, and our post content. So, so far so good. Now, the tricky part is when it comes to working with images. So with images, we have to do a little bit more work. So I'm going to scroll up to give us a little bit of room here so you can see it, and I'm going to show you first the structure that we're going to need, and then I'm going to walk through how we can actually get to some of this data.
So we're going to follow the same process where I say formDataappend, and then I'm going to put in the name, which in this case is going to be post, brackets and then inside of here, post_image. So that is going to be what we have to call our image and each one of these elements is exactly how you have to type it out. This is how the API, this is what the API is allowing, and what it's looking for when it's going to parse this and store it in the database. So that's the first argument.
Now, the next one is a little bit trickier. We're not simply going to send in a single value. So we're not going to do something like this where we send in comma postImage. That is not going to work. Even though we have access to that post_image URI, what we need to do is we need to be more explicit and to break it out so that the API understands exactly how the image is structured because it needs to know is this a PNG file, is it JPEG, what is it? It will then be able to interpret it, and then store it in the database.
So I'm going to get rid of this and what we need to pass in as a second argument is an object. So this object needs to have the structure of uri, so for right now, I'm just going to say here, just to make it easy, I've just got a string that say TODOjpg. Something like that just so we know what that's going to look like. The next thing that it has to have, and we're going to have to use a tsignore here as well just so that you know that, the second thing it has to have is a name so this name is going to be something where we pass in something like photojpg. That's the second item. And then lastly, it needs to have a type. So this is going to be of type image/jpg. Okay, so this is the structure that we need, but we need this to be dynamic because if a user has a PNG file, then these need to be changed so the name is going to be photopng and the type is going to be photopng and if it's a JPEG, it needs to say jpg.
So how exactly are we going to do that? Well, we are going to go back to a few of our JavaScript fundamentals. So that is going to be fun. So let's take a look really quick at what our image looks like. I'm going to click on pick an image and I'll pick one of these images out. Hit Choose, and that's going to print this out, one, on the device, but it also prints it out here in the console. So I'm going to grab the URI which has this long file string here, and I'm going to copy this, and then let's open up Visual Studio Code, and I'm going to give us a little bit more room because we're not going to look at the simulator for this. I created a separate image file here, and I'm using the Kafka gem so that you can just see all of it right here and you can see all the output right here.
[Capture #2 [7:17]]
So I'm going to create our postImage here. So I'm going to say const postImage, and we know what that's going to look like. It's going to look like this super long string So now that we have our string value here, how can we get, remember, our goal here is we are trying to get this jpg value. If it's a PNG, we need to get it to say png. So how can we get access to that? Well, let's see. The very first thing that I'm going to do is I'm going to break this postImage string into an array. So the way that I can do that is lemme create another variable here called uriParts uriParts and I'm going to set this equal to the postImagesplit and then I'm going to pass in a string with a dot so what that's going to do is that is going to give me the string, and it's going to convert it and break it up, every time it sees a point or a decimal point, it's going to break that up into a different element.
So if I take a look at what this looks like now, you can see the output here. It's still really long, but it's an array and the very last element there is jpg, that's our value we're looking for. Okay, so that's the first thing we need. Now let's get that file type. So now I can say fileType, and I can set this equal to uriParts, and then how can we can access to the last element in an array when we don't know how many elements are going to be in there. because we don't want to guess and say okay, yeah, is there going to be one decimal point? We're not going to know. Each system may be different so we have to make this dynamic. We simply want the last element in the array no matter how many elements there are.
Well, the way we can do that in JavaScript is say uriParts and then use brackets, say uriPartslength, that'll give us the entire amount so I can say length, and then from there, say minus one. So that's just kinda going back to some JavaScript fundamentals. Any time you need the last element in the array, we know the length of the array and then to find the last element, we know that that last index is going to be whatever the length total is minus one because if we had an array like this, say we had an array like one, two, three, four, and let's store it in something so I'll say const array and if I say array right here, length, this is going to tell me that we have four but if I want the last element there, each one of these indexes, because we start at zero, this is going to be index zero, index one, index two and index three.
So the way I would get this four element here is I would have to say array and then pass in the brackets and then say arraylength minus one, and then that's going to give me that very last element there, and if this array changes, and now add five, six, whatever it is, however many elements and even if it's not a number, if it's hey, if it's something like that, it's going to give me that last item no matter how many elements are in the array So hopefully that kinda makes sense on what we're doing here. So I'm going to delete that and let's take a look at this and you can see, yes, it's giving us that correct value, it's a jpg.
[Capture #3 [11:14]]
Now if I were to come here and change this and change it to be png, then you can see that it's telling us it's png. So this is working perfectly. Another situation I've run into is where they go with the other form of jpg where it's jpeg all spelled out. This gives us that as well. So this is the code that we need in order to break up each one of the string elements and for us to get, remember, our entire goal was to get that file type so that we could have all of this right and we could have it so it's structured in a way that the form needs. So now that we have this code, we can just copy this. And I'm going to open up the PostFormScreen here and now we can just paste this in, and this is what we're going to be using. So first, we are using postImage. That's the same piece of state that we have here. Now, that's going to be the full uri. So here I'm just going to call and replace where it said TODOjpg, I'm just going to say this is postImage.
Now, this is giving us a error here, it says argument of type uri any; name string etc is not assignable to a parameter of type string Blob. This is one where it is an example of when you'd want to just use a tsignore so that fixes that error. Now, the next thing is we need to know the photo endpoint. So we need to know these file types and then we need to slide these in dynamically. Well, the way we can do that is right after the dot here, I'm going to hit Delete and then use string interpolation, and this only works, once again as long as you're using backticks. If you're using double quotes or single quotes, then you won't be able to use the dollar and then the curly brackets, you'd need to use concatenation I simply like using the backticks here and so now I can say fileType, and then the same thing right here.
[Capture #4 [13:29]]
So right after this slash, I'll say fileType and then we can hit Save and we don't have any errors and it looks like everything is working. So what this means is that no matter whatever type of image a user tries to upload, a PNG, a JPEG, whatever version of it, we're going to be able to inform the server with all of the data it needs, not just the path to the image, we're also going to be passing in the name that we want stored. In this case, just using the same name for all of them is perfectly fine. The database manages the reference point so the name here doesn't matter at all and then the type, the only key element here is that we need to make sure we're passing the correct file type and for the type, we also need to say that it's an image of type, and then whatever that is. So this is everything we need. This is actually the entire formbuilding component. So hopefully that made sense and as we continue on, definitely go through this. This is going to be a similar structure you're going to be using in many of your applications, assuming that you're using images or any type of files or media like that. So definitely become familiar with this structure. I use this in pretty much every application that I have and because it's a function, what we're going to be able to do and this is what we're going to do in the next guide.
We're going to create our API connector and instead of having to build out the entire structure for the data that gets sent up, we're simply going to have to call our buildForm function and the very last thing we're going to do here is at the very end of this function, we're just going to say return the, oh, not form, return formData just like that.
So when this function gets called, it's going to append the name, the content, then it's going to dissect that entire image for us so that it pulls out the file types and it defines it in a way that the API can understand. It's going to wrap that all up in a formData object and that is what's going to be passed to the API.
So that's another nice thing about this structure and following this kind of convention is our API function is actually going to look pretty straightforward. It's simply going to have a connection to the endpoint, then we're going to call this function for the data, that's what's going to wrap it all up in a way the API can understand and then we're going to listen for the response to see if it succeeded or if it failed.