This will be another short lesson where we just fine-tune some of the user experience around adding images.

And what we're doing here today is we're adding this little delete icon that's going to let a user delete an image that they've added to their diary entry.

Again, challenge to you — set this up yourself. We're not using any new concepts in doing this. Otherwise, let's go through it together now.

So, on our diary create and edit view, we've got this group “Add Image,” which is going to display the diary entry's uploaded image. It's also got this loading indicator and the buttons.

I'm just going to hide these on the interface because what we're dealing with here is where there's nothing else in this group except for the image as a background and this icon that we're trying to add.

So, what I'm going to do is I'm just going to add a button, which I'm going to use as an icon. I'm going to use this as an icon, and I'm going to actually choose as a starting point our “Field Light Secondary” style that we set up earlier.

And then remember that when we have clickable icons or clickable buttons, there should be at least 44 pixels in their width and height. So, we're set already for our minimum height, but let's add a fixed width of 44 pixels as well.

It's got a bit of padding here, which we don't really need. It's not changing anything in the appearance, but just kind of a little bit confusing here on the canvas.

So, this is going to be our button “Delete Image.” And I'm going to set the icon for this button to be in the Phosphor library — the trash icon.

And then the other thing is I'm just going to make it a perfectly round button by just adding an excessive amount of roundness. Technically, you only have to add for this roundness value double the height or the width if it's a square element. So, I would only really need to add 88 pixels. But if you go over that amount, it makes no difference. So, I'm just lazy — I'm going to add in 100.

And then I'm also going to push the button over on the right-hand side and then just add a little bit of margin as well over there on the right-hand side.

And we don't want this button to always be visible, right? We only want it to be visible when there's actually an image that's already been uploaded. So we can add a visibility rule which says that, yeah, by default this button can be invisible, but we'll add a condition here under which it should be visible — and that would be when there is an image to delete.

Right, in other words, is that diary entry’s image field not empty? In which case, we're going to make it visible.

Now, if we go and test this out, we'll see that the icon is just in the middle here. Yeah, it's on the right-hand side, but it's in the middle of the image vertically. We want it in this top-right corner.

So, on our group “Add Image,” could we put everything towards the top? If I hit container alignment “Top,” okay, that seems to work. And it looks okay in preview mode too.

But when I go to add a new diary entry, this is where we see the problem — because our buttons are also now at the top, and so is our loading indicator. So that's not quite going to work.

So let me undo this. What we could do instead is we could kind of cheat. We could put this button inside of another group which is going to fill vertically the entire space here of this group “Add Image.”

And then it's inside of that other group that we put this button in the top of the group.

So what I'm going to do is I'm going to right-click on this button “Delete Image” and I'm going to group it in a column container. Doesn't really matter if it's a column or a row, truth be told.

And for this group which is holding the “Delete Image” button, I'm actually going to turn off “Fit height to content.” So now this group “Delete Image” is just taking up the full width.

And as long as we don't give it a background style, it's transparent. So even though it's technically sitting on top of the image that is forming the background of “Group Add Image,” from the end user’s perspective they're never going to know.

And then we just need to give this “Delete Image” button a little bit of top margin as well so it's not hugging the top so strongly.

And then let's change the visibility rules not to apply to the button but to this parent group here. So what I'm going to do — I'm just going to right-click, copy this entire condition on the button. I'll remove the condition. I'll say that the icon itself, this button, should always be visible, but we'll just set up the parent container for this button to behave as the button just was.

So, it won't be visible on page load. And if I right-click in this conditional tab and hit “Paste Condition,” then we will add back in the rule under which it should become visible.

And voilà, our button's looking pretty handy. We could add maybe a little bit of transparency to the background — like maybe half — and that makes it not quite so prominent but still easily recognizable.

And now we need to add the logic for what happens when this icon is clicked. And this shouldn’t come as too much of a surprise to you. And do try to add this step yourself if you haven’t already.

We're going to add what action? It's one that we've already encountered — we're deleting an uploaded image, right? And we have a dedicated action for that: under Data → Delete an Uploaded File.

All we have to do is pass in the URL, or basically just the image field, for the file that we want to delete. And where does that live? Well, it of course lives, as do many things in this view, on the diary entry that we're storing in this view property “Diary Entry.” So, it'll be the image field there.

Now, if you go and test this out and hit this delete icon, you'll notice that nothing seems to happen. And also, when you view the corresponding diary entry in the database, there still seems to be an image appearing.

If you click here to see it though, you'll actually get this weird message saying, “Hey, you can’t view it.” And if you try to find it within the file manager, it won't be there either.

So this is another one of the current little quirks of the mobile beta — the image will remain visible here even after it’s been deleted.

So what's actually happening here is the file itself has been removed from our file storage, but your actual device is still holding onto a local copy of it — a copy just on your device.

So we have to implement a little workaround for this. That workaround is to explicitly remove the value of that image field on the diary entry. So, we have to set this image field to be empty.

And so, if I try to hit this delete icon now, you'll notice something even more strange, which is that some of the elements, like these buttons, are behaving as though there's no image — but the image is still nonetheless visible.

And so, there's one extra little workaround that we have for this, which is just to display the image in a different group altogether.

So, what I'm going to do is I'm going to duplicate this group “Add Image” just to maintain its styling. And I'm actually going to right-click here, “Manage Children,” delete all children — because the only thing that I actually want to keep here is the styling. So duplicating the original is kind of the quickest way to do that.

But this is going to be actually our “Group Image,” and our original is, of course, “Group Add Image.”

And so this “Group Image” is what I want to appear when there’s been an image uploaded, and “Group Add Image,” inversely, I want to appear before the user's added an image.

So we need to add some conditional visibility rules to both “Group Image” and “Group Add Image.”

So what I'm going to do — I'll set both of them to be invisible by default and then just add those conditions.

So the condition, of course, we’re looking at that diary entry’s image field. So the diary entry living inside of that view property, as before, has an image field. If it is not empty, from the perspective of “Group Image,” we can always call this even “Group Display Image” — so it's really clear at a glance what's going on.

So when that image field is not empty, we'll show this top group. And then if I just copy this condition onto the bottom group and hit “Paste,” then we can modify this condition to be the inverse.

So when the image is empty, then we want this bottom group to be visible.

And then the last thing is that this group which is holding the “Delete Image” icon — we actually want to move that up into our “Display Image” group because, of course, that's the only context in which it makes sense to have a delete button.

And so let me test this out now by adding some test image. And that is appearing as expected.

Now, if I hit the delete icon here, it should be removed. And I'm seeing again those buttons to ask me to add a new image.

So, these are just some extra workarounds we have to do right now given the state of the mobile beta. Hopefully, you won't have to do these workarounds for too long.

Okay, so now that we've got the ability to add these beautiful images into our app, we should give ourselves permission to show them in the app, right?

This is really what's going to make our app look visually interesting. So, we're going to deal with how we're going to display all these images in the next lesson.