Symfony - Not able to setup VichUploaderBundle with FOSRestBundle

Question

My entities are all setup using yml and I am trying to wrap my head around on how to setup VichUploaderBundle.

What I am trying to do

What I am trying to do is develop an API and I need the user to submit an image with name and I want to save the information submitted in database and upload the file on server

Whats working and whats not

I am using Postman to submit the information, as you can see in the following screenshot, a name and an image field being submitted, on submit the name gets saved but the image does not get uploaded and the image name field is also empty.

My Attempt

I am going to share all the code here, it might look long and boring but I need help :)

Inside my config.yml I have added the VichUploaderBundle configurations

vich_uploader:
    db_driver: orm
    mappings:
        gift_image:
            uri_prefix:         /uploads/gifts
            upload_destination: %kernel.root_dir%/../web/uploads/gifts

This is my orm.yml of GiftList Entity

AppBundle\Entity\GiftList:
    type: entity
    table: null
    repositoryClass: AppBundle\Repository\GiftListRepository
    id:
        id:
            type: integer
            id: true
            generator:
                strategy: AUTO
    fields:
        name:
            type: string
            length: 255
        image_name:
            type: text
            nullable: true
    lifecycleCallbacks: {  }

This is my mapping file of VichUploaderBundle

AppBundle\Entity\GiftList:
    file:
        mapping:           gift_image
        filename_property: image_name

This is my Entity

namespace AppBundle\Entity;
use Symfony\Component\HttpFoundation\File\File;

/**
 * GiftList
 */
class GiftList
{

    /**
     * @var integer
     */
    private $id;

    /**
     * @var string
     */
    private $name;

    /**
     * @var string
     */

    private $image_name;

    /**
     * @var File $image
     */
    protected $image;

    /**
     * Get id
     *
     * @return integer
     */
    public function getId()
    {
        return $this->id;
    }

    /**
     * Set name
     *
     * @param string $name
     *
     * @return GiftList
     */
    public function setName($name)
    {
        $this->name = $name;

        return $this;
    }

    /**
     * Get name
     *
     * @return string
     */
    public function getName()
    {
        return $this->name;
    }

    /**
     * Set imageName
     *
     * @param string $imageName
     *
     * @return GiftList
     */
    public function setImageName($imageName)
    {
        $this->image_name = $imageName;

        return $this;
    }

    /**
     * Get imageName
     *
     * @return string
     */
    public function getImageName()
    {
        return $this->image_name;
    }

    /**
     * @return File
     */
    public function getImage()
    {
        return $this->image;
    }

    /**
     * @param File $image
     */
    public function setImage(File $image)
    {
        $this->image = $image;
    }
}

This is my Form

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('name')
        ->add('image', VichFileType::class)
    ;
}

And now finally the controller

public function postGiftAction(Request $request){
    $this->denyAccessUnlessGranted('ROLE_USER');

    $gift = new GiftList();
    $form = $this->createForm(GiftListType::class , $gift, ['csrf_protection' => false]);
    $form->submit($request->request->all());
    if($form->isValid()) {

        $em = $this->getDoctrine()->getManager();
        $em->persist($gift);
        $em->flush();
        $view = $this->view($gift, 200);
    }else{
        $view = $this->view(['form' => $form], 400);
    }

    return $this->handleView($view);
}

So to recap, I can get the image title to save but the image itself and the final image name is not getting saved. I will really appreciate any help on this.