Symfony image upload 

Uploading images and files via forms with the Symfony framework can be a bit challenging for new developers. While I was trying to look into the web for it I couldn’t find any easy solution. However, I learned an easy way to do it and decided to write an article for new developers to learn.

Here, I will show you the easiest way to upload images and files with HTML forms via the Symfony framework

Let's get started,

First, we will need a form to take the image as input. A basic form to do that is given below.

<form action="{{ path('test_image_upload') }}" method="POST" enctype="multipart/form-data">
   <label>Select image to upload:</label>
   <input type="file" name="file" required> 
   <button type="submit">SAVE</button>
</form>

We are using a POST request to submit the form. Also, we are specifying the path to trigger the action to {{ path('test_image_upload') }}

In the input tag, the name is set as ‘myfile’. This will be used in the controller section later in this article.

Now, we will create a route for this path. I am using the routes.yaml file to do that. Go to your routes.yaml file and add an entry just like shown in the code below.

test_image_upload:
    path: /image-upload
    controller: App\Controller\MyController::imageUpload
    methods: POST

Here, I am selecting the path as "/image-upload" and set its name to "test_image_upload". A quick note, this pathname and path should be unique from your other paths. Also, I am specifying the controller and its method as "MyController" and "imageUpload". The methods parameter is set as POST so that it only accepts POST request.

Moving on to the MyController class.

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;

class MyController extends AbstractController {
    
    public function index() {
        return $this->render('index.html.twig');
    }


    public function imageUpload(Request $request){

        $file = $request->files->get('myfile');
        $dir = $request->server->get('DOCUMENT_ROOT') . '/assets/files';

        $fileName = $file->getClientOriginalName();
        $file->move($dir, $fileName);

        return $this->render('index.html.twig');
    }
}

Here, the method imageUpload takes a Request parameter to handle the post request. The $file variable uses the request to get the file by name ‘myfile’. Remember in the form, we set the name of input as ‘myfile’? This is that name as a key we are calling. In the $dir variable we are setting the directory to save the files. Using the getClientOrginalName() method we are getting the filename with extension and setting it to the $fileName variable. Now, with the move() method we are saving the file in the selected directory and keeping the original file name and extension as it is. With the return, we are rendering the index page.

The file and image upload feature is implemented. On the first try, the server will automatically create assets and files folder in your public directory and your files will be uploaded there. If your server is configured to allow file uploads, you can go check its working.

However, in my first try the server was not configured and I got ‘Error 404, Object not found!’ message.

There is a quick fix to this error. Go to your public directory and check for ‘.htaccess’ file. In some cases, it can be hidden. If the .htacces file is not present, create a ‘.htaccess’ file. It has no name but an only extension of htaccess. Open the file with a text editor and paste the lines below.

DirectoryIndex index.php

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteRule ^ - [L]
    RewriteRule ^ %{ENV:BASE}/index.php [L]
    php_value upload_max_filesize 10M
    php_value post_max_size 10M

With this, we are allowing file or image uploads to the apache server. Also, setting the maximum upload file or image size and post request to 10 MegaBytes. Save the changes and quit the text editor.

That’s it, you are done implementing file and image uploads in the Symfony framework. For reference, my code can be found in this GitHub link

If you face any problems, feel free to ask questions in the comments below.

Cheers!