Section 6 (Lesson 9/9): This lesson deals primarily with file deletion, which is a two-step process. We’ll create the UI and workflows to support this process and test our workflows rigorously.

We’ll be covering:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

Okay, folks, we're almost done with the section! Final lesson. It's an important lesson because we're going to just run through a few things, make sure that our user experience is as intended. And I usually always find little issues that I need to solve, we've got a few to solve now. But we also have to think about deleting an Application. Because remember, in step one in the previous lesson, an Application is created and then a file is attached to that Application. So there might be the case that a user starts an Application, creates something in the database, and then changes their mind, and we've got the cancel button to deal with that. So let's also make sure that we close off that final issue before we round out the section. Let's dive in!

Okay, so I'm still logged in as Peter, and I have opened up the job page, and I've opened up Popup Application, and please do the same. And we know that if we click on "Next", we are setting the state to 2, but we are also creating an Application.

And herein lies the potential issue in that we might have people clicking next to upload their CV and then change their mind. And we don't want all of these partial applications in the database. Hey, maybe you would like them for analytic purposes to better your UX. But in this instance, I'd like to just demonstrate how to delete an Application and delete a file! Okay, because there's something interesting I'm about to demonstrate when it comes to how Bubble handles files and images.

So before we actually create the workflow for cancelling, let's first talk about files. I'd like you to preview the page. And let's go back to Browse jobs, make sure that you can see Peter's image, which proves that you are logged in. I'm going to choose the first one: Product Developer. Okay, now we've got page data. Now, click on the Apply button. Let's go ahead and write a cover note. And I'm going to click "Next". Okay, now let's actually jump into the database and see where we're at!

Heading over to the Data tab, App data, and Applications and you can see that here is a new Application, but it does not have a CV. Okay, click on cancel. Now I want you to go across to File manager, please. File manager. Look at all of these CVs that have been uploaded. Here's the file name. And we have got "Attached to" and this is the unique ID of an Application.

Today for me is April 15th, so I would like you to go back to the frontend and let's attach a CV, but we are not going to click on "Submit application". Just go ahead and find Peter's CV again. Okay, so we've used the element to upload the CV. Let's go back to the database. Now, I'm just going to refresh this page and you can see it's April 15th, and that we've just populated the file manager with Peter Hudson's new CV, and it says "Attached to" so I'm going to copy this unique ID, head back to App data, going to click on Applications, and I'm going to paste this unique ID into the search. And there we go.

So basically, we know that if I go to the file manager as a developer, I can see all uploaded files, and they don't need to be saved to a field. So this is how Bubble handles image and file uploads. When a picture uploader, when this value is populated, meaning a person has uploaded an image, or a file uploader, when this value has been populated, meaning someone has uploaded a file, like I've just demonstrated, well, it is then saved to the server.

But when it comes to our field in the Application, we have a field called "CV" of type file, Bubble only saves the link. Okay, so the file is hosted elsewhere. It's hosted, but it's not in that particular field, that is only the link. Meaning that when we do delete an Application, we're not actually deleting the CV, we're only deleting the link to the CV. So if we delete an application without deleting the hosted file, that hosted file, "CV", becomes orphaned, but we can still find it in our file manager, but as a busy developer with a scaling app, it's not something we want to manage ourselves. Okay, so we need to build a workflow that first deletes this hosted CV, then we'll delete the entire Application.

Let's go back to the frontend and yeah, let's just submit this Application. Okay, we've still got the problem of we didn't see a confirmation message. Let's go back to the database. And now in the database under Applications, the link to that CV is now saved to this field and I can see this CV. There it is there.

Now, before we go any further, I'd like you to do the following. Now, we've talked about file privacy. We have attached the file and we can see it in the file manager, we've attached it to an Application. So what would happen if a user that isn't authorized to view this file, what would happen if they tried to view the link? First of all, let's go grab the link. So go to App data, and I'm going to click on "See" again. Okay, so you can see that we have something called AccessKey up here in the URL. It expires, it's got a signature, all this cryptographic information. The actual link would be up until the parameters start, so this is the link here. So https all the way to the name of this PDF file. I'm going to copy this link and I'm just going to close this tab.

Now I'd like you to go to the scratchpad page, please, because we need to log out of Peter. We've saved this URL link, and we're going to log out of Peter's account as if we're just a regular user in possession of this link, as if it's been shared through an email or some other means. Let's see if we can access it.

So I'm going to just add scratchpad to the URL. I'm going to log out. And in the same tab, I'm going to paste the URL. And we can see, Access has been denied.

Okay, so this proves that you need to be logged in as Peter into Workplace. You need to be logged in as Peter or Hana for that URL to work, the URL to be able to view the CV and therefore download the CV. If you don't meet those conditions, you get this access is denied.

Okay, I'm going to log back in as Peter. I'll do it through the database "Run as". Just need to make sure that you remove anything from the search, otherwise, results wouldn't show. I'm going to run as Peter. I'm going to go to Browse jobs, and then back to the Product Developer, the Bubble job, and just get this ready for the next stage.

All right, let's now talk about cancelling an Application, which on our end actually means deleting a file and deleting an Application. So I'm going to go to the Design tab, bring up the Popup Application, and while we're here, let's just quickly add the confirmation workflow step. If we Edit workflow on the "Next" button, and under step 2, I'd just like you to add a new step 5, which simply says "Show Message". So after a successful Application has been made, we close the Popup and show the success message. Fine.

Now, for the interesting one, let's look at this Cancel button. We're going to add a workflow. Okay, so what we're going to do is go down to Data (Things) and "Delete an uploaded file". Now, remember, we determined that a file is uploaded once the file uploader element is populated, which means we can actually just point to the file uploader to then delete an uploaded file. So I'm going to say, "FileUploader Attach your CV's value" in the File URL. Okay, so that takes care of that.

Now, in terms of deleting the Application itself, we can choose Data (Things) and simply "Delete thing..." Where is the thing? Well, after step 1, or at step 1, we create an Application and then set a state. Okay, so we can simply point to the state! So that is a "Popup's Application's Application" as the thing to delete. (Application being the state.) After that, what we can do is Hide Popup Application.

And then what I'm also going to do is just refresh the page. It's just a habit of mine. Sometimes we need to reset data, reset element inputs as well and I prefer just to refresh the page because it does all of it. It just resets the page back to its default, and it's pretty quick as well.

Okay, so now we need to run through this process to prove that an uploaded file will be deleted and an Application will be deleted and we're not getting an orphaned uploaded file. We'll be referencing the File manager for that purpose.

Back to the frontend. Okay, so I'm at /job, /product-developer. Now, let's go ahead and apply! "This is my cover note," then click on "Next". Okay, so that's now created the Application in the database. Let's confirm. Head over to Data, Applications, and yes, here it is. Here, I've just created it and there's no CV uploaded.

So now if we cancel this on the frontend, we're not going to upload a CV just yet. Let's cancel it. Page is refreshed. Back to the database. Back down to two Applications. Let's go a bit further now. Go back to apply, "This is my cover note," click "Next". Now, I'm going to upload a CV, but I'm not going to upload Peter Hudson's. I'm going to upload someone else's just so it's clear to see in the File manager. I'm going to open up the File manager and you can see we've only got Peter Hudson CVs here. I'm going to Attach a CV, and I'm using Raymond Williams's CV this time. I'm going to refresh the page here. Here it is here in the File manager.

Okay, so we're at the stage where it's attached to the Applications. From a privacy standpoint, not in the actual Application itself, because that's in the next step where we save the link, you see the CV field is still empty because we haven't saved the link, but, in File manager, we've made this association through the privacy to attach it to that actual Application.

Back to the frontend. Now I'm going to cancel. So I'm hoping that in File manager and in the database, both the CV is deleted from the File manager and this Application is deleted from the database. Let's go ahead and cancel. Page refreshes, back to the default. Moment of truth! I'm going to refresh the page, and as you can see, Raymond Williams's CV has been deleted, and in the database, we're now down to two Applications.

Okay, so that takes care of that. So hopefully that was a good explanation of how Bubble handles files and images. A lot of the time, you'll be attaching files and images just to the Current User. For instance, if they're uploading some sensitive data about themselves for identification purposes or banking-related stuff, that'll always be attached to the Current User unless more than one entity or more than one party needs access. And that's part of reason why we have an Application data type, so we can separate out our data type and then have two entities access that information.

All right, I just wanted to apply for two new jobs, and then we will finish off this lesson. So I'm going to apply for this Product Developer job one one more time. "This is my cover note," so I'm going to upload my CV here. And I'm going to apply for one more. Go ahead, any job will do. I just want to populate the database with a bit more stuff. I'm going to choose Brainwave, Community Manager. And let's go back to the candidate dashboard. Click on Applications. Yeah, and here are our Applications!

Okay, that's it for this section! Hope you enjoyed it. Definitely pushed the functionality part a little bit more. I hope you can see how things are starting to gel and come together.

In the next section, we're going to be dealing back with Hana and her company dashboard because now she has Applications coming through. We're going to sign up two new users, Eric and Raymond. They're going to be making Applications. We're going to look at privacy rules again. That's going to be super, super fun.

I just have one ask, and I'm going to ask for this once, okay? And that is, if you haven't subscribed to our Bubble YouTube channel, please go ahead and do so. It really, really does help bring the channel to more people that are eager to learn, just like yourself. It doesn't cost you anything, and it's not like me to ask for these things, so I won't mention it again. But I hope you're enjoying it so far, and I'll see you in the next section.