> Symfony 5 > All about Uploading Files in Symfony
Buy Access to Course
28.

Deleting Files

Share this awesome video!

|

Keep on Learning!

Start your All-Access Pass

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

The next thing our file gallery needs is the ability to delete files. I know this tutorial is all about uploading... but in these chapters, we're sorta, accidentally creating a nice API for our Article references. We already have the ability to get all references for a specific article, create a new reference and download a reference's file. Now we need an endpoint to delete a reference.

Add a new function at the bottom called deleteArticleReference(). Put the @Route() above this with /admin/article/references/{id}, name="admin_article_delete_reference" and - this will be important - methods={"DELETE"}. We do not want to make it possible to make a GET request to this endpoint. First, because that's crazy-dangerous. And second, because if we kept building out the API, we would want to have a different endpoint for making a GET request to /admin/article/references/{id} that would return the JSON for that one reference.

125 lines | src/Controller/ArticleReferenceAdminController.php
// ... lines 1 - 18
class ArticleReferenceAdminController extends BaseController
{
// ... lines 21 - 115
/**
* @Route("/admin/article/references/{id}", name="admin_article_delete_reference", methods={"DELETE"})
*/
public function deleteArticleReference(ArticleReference $reference)
{
// ... lines 121 - 122
}
}

Inside, add the ArticleReference $reference argument and then we'll add our normal security check. In fact, copy it from above and put it here.

125 lines | src/Controller/ArticleReferenceAdminController.php
// ... lines 1 - 18
class ArticleReferenceAdminController extends BaseController
{
// ... lines 21 - 115
/**
* @Route("/admin/article/references/{id}", name="admin_article_delete_reference", methods={"DELETE"})
*/
public function deleteArticleReference(ArticleReference $reference)
{
$article = $reference->getArticle();
$this->denyAccessUnlessGranted('MANAGE', $article);
}
}

The deleteFile() Service Method

Ok: how can we delete a file? Through the magic of Flysystem of course! And the best place for that logic to live is probably UploaderHelper. We already have functions for uploading two types of files, getting the public path and reading a stream. Copy the readStream() function declaration, paste, rename it to deleteFile() and remove the return type.

123 lines | src/Service/UploaderHelper.php
// ... lines 1 - 12
class UploaderHelper
{
// ... lines 15 - 83
public function deleteFile(string $path, bool $isPublic)
{
// ... lines 86 - 92
}
// ... lines 94 - 121
}

We'll start the same way: by grabbing whichever filesystem we need.

123 lines | src/Service/UploaderHelper.php
// ... lines 1 - 12
class UploaderHelper
{
// ... lines 15 - 83
public function deleteFile(string $path, bool $isPublic)
{
$filesystem = $isPublic ? $this->filesystem : $this->privateFilesystem;
// ... lines 87 - 92
}
// ... lines 94 - 121
}

Next say $result = $filesystem->delete() and pass that $path.

123 lines | src/Service/UploaderHelper.php
// ... lines 1 - 12
class UploaderHelper
{
// ... lines 15 - 83
public function deleteFile(string $path, bool $isPublic)
{
$filesystem = $isPublic ? $this->filesystem : $this->privateFilesystem;
$result = $filesystem->delete($path);
// ... lines 89 - 92
}
// ... lines 94 - 121
}

Finally, code defensively: if $result === false, throw a new exception with Error deleting "%s" and $path.

123 lines | src/Service/UploaderHelper.php
// ... lines 1 - 12
class UploaderHelper
{
// ... lines 15 - 83
public function deleteFile(string $path, bool $isPublic)
{
$filesystem = $isPublic ? $this->filesystem : $this->privateFilesystem;
$result = $filesystem->delete($path);
if ($result === false) {
throw new \Exception(sprintf('Error deleting "%s"', $path));
}
}
// ... lines 94 - 121
}

The DELETE Endpoint

That's nice! Back in the controller, add an UploaderHelper argument, oh and we're also going to need the EntityManagerInterface service as well. Remove the reference from the database with $entityManager->remove($reference) and $entityManager->flush(). Then $uploaderHelper->deleteFile() passing that $reference->getFilePath() and false so it uses the private filesystem.

133 lines | src/Controller/ArticleReferenceAdminController.php
// ... lines 1 - 19
class ArticleReferenceAdminController extends BaseController
{
// ... lines 22 - 119
public function deleteArticleReference(ArticleReference $reference, UploaderHelper $uploaderHelper, EntityManagerInterface $entityManager)
{
// ... lines 122 - 124
$entityManager->remove($reference);
$entityManager->flush();
$uploaderHelper->deleteFile($reference->getFilePath(), false);
// ... lines 129 - 130
}
}

Quick note: in the real world, if there was a problem deleting the file from Flysystem - which is definitely possible when you're storing in the cloud - then you could end up with a situation where the row is deleted in the database, but the file still exists! If you changed the order, you'd have the opposite problem: the file might get deleted, but then the row stays because of a temporary connection error to the database.

If you're worried about this, use a Doctrine transaction to wrap all of this logic. If the file was successfully deleted, commit the transaction. If not, roll it back so both the file and row stay.

Anyways, what should this endpoint return? Well... how about... nothing! Return a new Response() - the one from HttpFoundation - with null as the content and a 204 status code. 204 means: the operation was successful but I have nothing else to say!

133 lines | src/Controller/ArticleReferenceAdminController.php
// ... lines 1 - 12
use Symfony\Component\HttpFoundation\Response;
// ... lines 14 - 19
class ArticleReferenceAdminController extends BaseController
{
// ... lines 22 - 119
public function deleteArticleReference(ArticleReference $reference, UploaderHelper $uploaderHelper, EntityManagerInterface $entityManager)
{
// ... lines 122 - 129
return new Response(null, 204);
}
}

Hooking up the JavaScript

That's it! That is a nice endpoint! Head back to our JavaScript so we can put this all together. First, down in the render() function, add a little trash icon next to the download link. I'll make this a button... just because semantically, it requires a DELETE request, so it's not something the user can click without JavaScript. Give it a js-reference-delete class so we can find it, some styling classes and, inside, we'll use FontAwesome for the icon.

117 lines | public/js/admin_article_form.js
// ... lines 1 - 34
class ReferenceList
{
// ... lines 37 - 74
render() {
const itemsHtml = this.references.map(reference => {
return `
<li class="list-group-item d-flex justify-content-between align-items-center" data-id="${reference.id}">
// ... lines 79 - 80
<span>
// ... line 82
<button class="js-reference-delete btn btn-link"><span class="fa fa-trash"></span></button>
</span>
</li>
`
});
// ... lines 88 - 89
}
}
// ... lines 92 - 117

Copy that class name and go back up to the constructor. Here say this.$element.on('click') and then pass .js-reference-delete. This is called a delegate event handler. It's handy because it allows us to attach a listener to any .js-reference-delete elements, even if they're added to the HTML after this line is executed. For the callback, I'll pass an ES6 arrow function so that the this variable inside is still my ReferenceList object. Call a new method: this.handleReferenceDelete() and pass it the event object.

117 lines | public/js/admin_article_form.js
// ... lines 1 - 34
class ReferenceList
{
constructor($element) {
// ... lines 38 - 41
this.$element.on('click', '.js-reference-delete', (event) => {
this.handleReferenceDelete(event);
});
// ... lines 45 - 51
}
// ... lines 53 - 90
}
// ... lines 92 - 117

Copy that name, head down, and paste to create that. Inside, we need to do two things: make the AJAX request to delete the item from the server and remove the reference from the references array and call this.render() so it disappears.

Start with const $li =. I'm going to use the button that was just clicked to find the <li> element that's around everything - you'll see why in a second. So, const $li = $(event.currentTarget) to get the button that was clicked, then .closest('.list-group-item').

117 lines | public/js/admin_article_form.js
// ... lines 1 - 34
class ReferenceList
{
// ... lines 37 - 58
handleReferenceDelete(event) {
const $li = $(event.currentTarget).closest('.list-group-item');
// ... lines 61 - 72
}
// ... lines 74 - 90
}
// ... lines 92 - 117

To create the URL for the DELETE request, I need the id of this specific article reference. To get that, add a new data-id attribute on the li set to ${reference.id}. I'm adding this here instead of directly on the button so that we could re-use it for other behaviors.

Now we can say const id = $li.data('id') and $li.addClass('disabled') to make it look like we're doing something during the AJAX call.

117 lines | public/js/admin_article_form.js
// ... lines 1 - 34
class ReferenceList
{
// ... lines 37 - 58
handleReferenceDelete(event) {
const $li = $(event.currentTarget).closest('.list-group-item');
const id = $li.data('id');
$li.addClass('disabled');
// ... lines 63 - 72
}
// ... lines 74 - 90
}
// ... lines 92 - 117

Make that with $.ajax() with url() set to '/admin/article/references/'+id and method "DELETE":

117 lines | public/js/admin_article_form.js
// ... lines 1 - 34
class ReferenceList
{
// ... lines 37 - 58
handleReferenceDelete(event) {
const $li = $(event.currentTarget).closest('.list-group-item');
const id = $li.data('id');
$li.addClass('disabled');
// ... line 63
$.ajax({
url: '/admin/article/references/'+id,
method: 'DELETE'
// ... lines 67 - 71
});
}
// ... lines 74 - 90
}
// ... lines 92 - 117

To handle success, chain a .then() on this with another arrow function.

117 lines | public/js/admin_article_form.js
// ... lines 1 - 34
class ReferenceList
{
// ... lines 37 - 58
handleReferenceDelete(event) {
const $li = $(event.currentTarget).closest('.list-group-item');
const id = $li.data('id');
$li.addClass('disabled');
// ... line 63
$.ajax({
url: '/admin/article/references/'+id,
method: 'DELETE'
}).then(() => {
// ... lines 68 - 71
});
}
// ... lines 74 - 90
}
// ... lines 92 - 117

Now that the article reference has been deleted from the server, let's remove it from this.references. A nice way to do that is by saying: this.references = this.references.filter() and passing this an arrow function with return reference.id !== id.

117 lines | public/js/admin_article_form.js
// ... lines 1 - 34
class ReferenceList
{
// ... lines 37 - 58
handleReferenceDelete(event) {
const $li = $(event.currentTarget).closest('.list-group-item');
const id = $li.data('id');
$li.addClass('disabled');
// ... line 63
$.ajax({
url: '/admin/article/references/'+id,
method: 'DELETE'
}).then(() => {
this.references = this.references.filter(reference => {
return reference.id !== id;
});
// ... line 71
});
}
// ... lines 74 - 90
}
// ... lines 92 - 117

This callback function will be called once for each item in the array. If the function returns true, that item will be put into the new references variable. If it returns false, it won't be. The end effect is that we get an identical array, except without the reference that was just deleted.

After this, call this.render().

117 lines | public/js/admin_article_form.js
// ... lines 1 - 34
class ReferenceList
{
// ... lines 37 - 58
handleReferenceDelete(event) {
const $li = $(event.currentTarget).closest('.list-group-item');
const id = $li.data('id');
$li.addClass('disabled');
$.ajax({
url: '/admin/article/references/'+id,
method: 'DELETE'
}).then(() => {
this.references = this.references.filter(reference => {
return reference.id !== id;
});
this.render();
});
}
// ... lines 74 - 90
}
// ... lines 92 - 117

Let's try it! Refresh and... cool! There's our delete icon - it looks a little weird, but we'll fix that in a minute. Let's see, in var/uploads we have a rocket.jpeg file. Let's delete that one. Ha! It disappeared! The 204 status code looks good and... the file is gone!

It's strange when things work on the first try!

Alignment Tweak

While we're here, let's fix this alignment issue - it's weirding me out. Down in the render() function, add a few Bootstrap classes to the download link and make the delete button smaller.

Try that. Better... but it's still just a touch off. Add vertical-align: middle to the download icon. It's subtle but... yep - the buttons are lined up now.

117 lines | public/js/admin_article_form.js
// ... lines 1 - 34
class ReferenceList
{
// ... lines 37 - 74
render() {
const itemsHtml = this.references.map(reference => {
return `
<li class="list-group-item d-flex justify-content-between align-items-center" data-id="${reference.id}">
// ... lines 79 - 80
<span>
<a href="/admin/article/references/${reference.id}/download" class="btn btn-link btn-sm"><span class="fa fa-download" style="vertical-align: middle"></span></a>
<button class="js-reference-delete btn btn-link btn-sm"><span class="fa fa-trash"></span></button>
</span>
</li>
`
});
// ... lines 88 - 89
}
}
// ... lines 92 - 117

Next: our users are begging for another feature: the ability to rename the file after it's been uploaded.