Symfony 4 synchronize image with file input

Question

I make a library app, you can set a book image, and my form look as:

The yellow discord image is the actual image of my Book entity.

If I upload a file I cannot see it (label trick to upload, input hidden so).

It would be perfect if the image could change JUST WHEN i upload an image.

Example, I'm uploading blue discord image (example), so the image change right now on the form, and it will update Only if I submit the form).

How can I do that ?

My controller:

/**
 * @Route("/{id}/edit", name="book_edit", methods={"GET","POST"})
 */
public function edit(Request $request, Book $book, BookRepository $bookRepository, ClientRepository $clientRepository): Response
{
    $form = $this->createForm(BookType::class, $book);

    $image_source = $book->getImage()->getSrc();

    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        $image = new Image();

        if($request->files->get('book')['image']['src'] !== null && $request->files->get('book')['image']['src'] !== 'no_change')
        {
            $file = $request->files->get('book')['image']['src'];
            $name = $file->getClientOriginalName('src');
            $fileName = $this->generateUniqueFileName().'.'.$file->guessExtension();
            $alt = $book->getImage()->getText();

            $image->setSrc($fileName);
            $image->setText($alt);

            $book->setImage($image);


            $fileSystem = new Filesystem();

            try {
                $fileSystem->remove(array('symlink', $this->getParameter('Cover_directory'), $image_source));
            } catch (IOExceptionInterface $exception) {
                echo "An error occurred while creating your directory at ".$exception->getPath();
            }

            try {
                $file->move($this->getParameter('Cover_directory'), $fileName);
            } catch(FileException $e) { 
                // die($e); 
            }
        }
        else {
            $image = $book->getImage();
            $image->setSrc($image_source);
            $image->setText($image->getText());
            $book->setImage($image);
        }

        if($request->request->get('client'))
        {
            $client = $clientRepository->find($request->request->get('client'));
            $book->setClient($client);
        }

        $this->getDoctrine()->getManager()->persist($image);
        $this->getDoctrine()->getManager()->persist($book);
        $this->getDoctrine()->getManager()->flush();

        return $this->redirectToRoute('book_index', ['id' => $book->getId()]);
    }
    $clients = $clientRepository->findAll();
    // dump($clients);die;
    return $this->render('book/edit.html.twig', [
        'book' => $book,
        'form' => $form->createView(),
        'clients' => $clients,
    ]);
}

PHP is the chef, the page source is the dish, and the diner is the browser. The chef can't change the arrangement of the dish once it's been handed to the waiter [HTTP] and sent off to the diner. The diner can move it around with their hands [Javascript], ask the waiter for a bit of extra sauce from the kitchen [AJAX request], or just send the whole thing back to be remade by the chef. [page refresh] — Sammitch, Jan 11 '19 at 23:17
@AdibAroui yeah sure, but I have no idea how to doing ajax + js, I'm a Symfony beginner — PierreD, Jan 12 '19 at 00:08
Sounds like you should start being a Javascript beginner as well. — Sammitch, Jan 12 '19 at 00:51

score 1 · Answer 1 · answered Jan 12 '19 at 05:16

This is not a symfony question. If you want to see the img in browser before the upload, read this answer Preview an image before it is uploaded.

If you want to upload image and see preview before submit the form, you need to create new route, which handles uploading image and returns a path of uploaded image in response.

Symfony 4 synchronize image with file input

1 Answers1