How to upload an image using angular + symfony + vichuploaderBundle

Question

I'm trying to upload an image using angular and vichUploaderBundle for symfony.

The idea is the following,

I have some tabs, if you click on them they'll display different forms, one of them is for file uploading. My question is, How can I upload the image? I mean the correct way. I have a html.twig file, with a form inside (I'm using includes of twig engine). Suppose I have this form.html.twig

 <form onsubmit="{{ path('upload-new-file') }}">
   <input type="file" id="someFile"/>
        <button> Upload Image </button>
 </form>

Once you've selected the image, click on Upload, this will determine which URL matches with upload-new-file(routing.yml) (for example, It'll do some query to upload the file)

My main problem is that I get confused because I've been programming my forms in php (using createForm, form->isvalid, etc) and then rendering them with twig, I'm also using vichUploaderBundle. In the situation that I've described I'm not able to do that, because I don't have the "form" to render it. ({{form(form)}}). I'm not passing the form as parameter in the usual way (like in the symfony docs; $this->render('someTemplate.html.twig',array ('form' => $form)))

Imagine that we have a web page, with tabs, and if you click in one of the tabs, It'll display some form, one of the forms contains an upload input, you select an image and click on upload, what then? Recall that I'm using angularjs, vichuploaderbundle, symfony and Doctrine as ORM.

Thanks in advance!

Germanic

Answer 1

twig file

{{ form_start(form, {'attr': {'novalidate': 'novalidate'} }) }}
            <div class="form-group">
                <label>{{"news.lbl.file"|trans}}</label>
                {{form_widget(form.file)}}
                <lable>{{form_errors(form.file)}}</lable>
            </div>
     <div class="form-group">
                {{form_widget(form.submit)}}
            </div>
            {{ form_end(form)}}

class uploder

<?php

namespace BaseBundle\Entity;

use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Validator\Constraints as Assert;
use Symfony\Component\HttpFoundation\File\UploadedFile;

abstract class Uploader
{

    /**
     * @var integer
     *
     * @ORM\Column(name="id", type="integer")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    private $id;

    /**
     * @var string
     *
     * @ORM\Column(name="path", type="string", length=500,nullable=true)
     */
    protected $path;

    /**
     * Set imageUrl
     *
     * @param string $path
     * @return Category1
     */
    public function setPath($path)
    {
        $this->path = $path;

        return $this;
    }

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

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

    public function getAbsolutePath()
    {
        return null === $this->path ? null : $this->getUploadRootDir() . '/' . $this->path;
    }

    public function getWebPath()
    {
        return null === $this->path ? null : $this->getUploadDir() . '/' . $this->path;
    }

    protected function getUploadRootDir($docroot="web")
    {
// the absolute directory path where uploaded
// documents should be saved
        return __DIR__ . "/../../../../$docroot/" . $this->getUploadDir();
    }

    protected abstract function getUploadDir();

    /**
     * @Assert\File(maxSize="6000000")
     */
    protected $file;

    /**
     * Sets file.
     *
     * @param UploadedFile $file
     */
    public function setFile(UploadedFile $file = null)
    {
        $this->file = $file;
    }

    /**
     * Get file.
     *
     * @return UploadedFile
     */
    public function getFile()
    {
        return $this->file;
    }

    public function upload()
    {
        // the file property can be empty if the field is not required
        if (null === $this->getFile())
        {
            return;
        }
// use the original file name here but you should
// sanitize it at least to avoid any security issues
// move takes the target directory and then the
// target filename to move to
        $name = $this->getUploadDir() . "/" . time() . "-" . $this->getFile()->getClientOriginalName();
        $this->getFile()->move(
                $this->getUploadRootDir(), $name
        );
// set the path property to the filename where you've saved the file
        $this->path = $name;
// clean up the file property as you won't need it anymore
        $this->file = null;
    }

}

entity class

class entity extends Uploder
{

 protected function getUploadDir()
    {
         return 'dirctory name';
    }
}

and add filed path then remov path

Abram