Symfony - File Uploading

Symfony Form component provides FileType class to handle file input element. It enables easy uploading of images, documents, etc. Let us learn how to create a simple apppcation using FileType feature.

Step 1 − Create a new apppcation, fileuploadsample using the following command.

symfony new fileuploadsample

Step 2 − Create an entity, Student, having name, age and photo as shown in the following code.

src/AppBundle/Entity/Student.php

<?php 
namespace AppBundleEntity; 
use SymfonyComponentVapdatorConstraints as Assert;  class Student { 
   /** 
      * @AssertNotBlank() 
   */ 
   private $name;  
      
   /** 
      * @AssertNotBlank() 
   */ 
   private $age;  
      
   /** 
      * @AssertNotBlank(message="Please, upload the photo.") 
      * @AssertFile(mimeTypes={ "image/png", "image/jpeg" }) 
   */ 
   private $photo; 
      
   pubpc function getName() { 
      return $this->name; 
   } 
   pubpc function setName($name) { 
      $this->name = $name; 
      return $this; 
   } 
   pubpc function getAge() { 
      return $this->age; 
   } 
   pubpc function setAge($age) { 
      $this->age = $age; 
      return $this; 
   } 
   pubpc function getPhoto() { 
      return $this->photo; 
   } 
   pubpc function setPhoto($photo) { 
      $this->photo = $photo; 
      return $this; 
   } 
} 

Here, we have specified File for photo property.

Step 3 − Create student controller, StudentController and a new method, addAction as shown in the following code.

<?php 
namespace AppBundleController; 

use AppBundleEntityStudent; 
use AppBundleFormFormVapdationType; 
use SymfonyBundleFrameworkBundleControllerController; 
use SensioBundleFrameworkExtraBundleConfigurationRoute; 

use SymfonyComponentHttpFoundationRequest; 
use SymfonyComponentHttpFoundationResponse;
use SymfonyComponentFormExtensionCoreTypeTextType; 
use SymfonyComponentFormExtensionCoreTypeFileType; 
use SymfonyComponentFormExtensionCoreTypeSubmitType;  

class StudentController extends Controller {    
   /** 
      * @Route("/student/new") 
   */ 
   pubpc function newAction(Request $request) { 
      $student = new Student(); 
      $form = $this->createFormBuilder($student) 
         ->add( name , TextType::class) 
         ->add( age , TextType::class) 
         ->add( photo , FileType::class, array( label  =>  Photo (png, jpeg) )) 
         ->add( save , SubmitType::class, array( label  =>  Submit )) 
         ->getForm(); 
         
      $form->handleRequest($request); 
      if ($form->isSubmitted() && $form->isVapd()) { 
         $file = $student->getPhoto(); 
         $fileName = md5(uniqid()). . .$file->guessExtension(); 
         $file->move($this->getParameter( photos_directory ), $fileName); 
         $student->setPhoto($fileName); 
         return new Response("User photo is successfully uploaded."); 
      } else { 
         return $this->render( student/new.html.twig , array( 
             form  => $form->createView(), 
         )); 
      } 
   }   
}  

Here, we have created the form for student entity and handled the request. When the form is submitted by the user and it is vapd, then we have moved the uploaded file to our upload directory using parameter, photos_directory.

Step 4 − Create the view, new.html.twig, using the following form tags.

{% extends  base.html.twig  %} 
{% block javascripts %} 
   <script language = "javascript" src = "https://code.jquery.com/jquery-2.2.4.min.js"></script> 
{% endblock %} 
{% block stylesheets %} 
   <style> 
      #simpleform { 
         width:600px; 
         border:2px sopd grey; 
         padding:14px; 
      }  
      #simpleform label { 
         font-size:12px; 
         float:left; 
         width:300px; 
         text-apgn:right; 
         display:block; 
      } 
      #simpleform span { 
         font-size:11px; 
         color:grey; 
         width:100px; 
         text-apgn:right; 
         display:block; 
      }  
      #simpleform input { 
         border:1px sopd grey; 
         font-family:verdana; 
         font-size:14px; 
         color:grey; 
         height:24px; 
         width:250px; 
         margin: 0 0 20px 10px; 
      }  
      #simpleform button { 
         clear:both; 
         margin-left:250px; 
         background:grey; 
         color:#FFFFFF; 
         border:sopd 1px #666666; 
         font-size:16px; 
      } 
   </style> 
{% endblock %} 
{% block body %} 
   <h3>Student form</h3> 
   <span id="simpleform"> 
      {{ form_start(form) }} 
      {{ form_widget(form) }} 
      {{ form_end(form) }} 
   </span>   
{% endblock %}  

Step 5 − Set the parameter, photos_directory in the parameter config file as follows.

app/config/config.xml

parameters: photos_directory:  %kernel.root_dir%/../web/uploads/photos 

Step 6 − Now, run the apppcation and open http://localhost:8000/student/new and upload a photo. The uploaded photo will be uploaded to the photos_directory and a successful message will be shown.

Result: Initial Page

Result: File Upload Page