ENGLISH:

Hi, in this posts I’ll talk about a interesting feature in Magento 2 development, how can you use a upload field with a preview in your admin forms.

Think in a situation you have a image that the admin user have to upload, like in a blog extension for example, you have the post image, it’s interesting make possible to the admin user upload and see the uploaded image during the form edit, it’s easy to do that with Magento 2, let’s see how it works.

Firstly we have to create a model class to manage these images for us, in my example I’ll create the ImageUpload class inside the Model directory. Check my class code in https://github.com/igorppbr/magento2-image-upload-withpreview/blob/master/ImageUploader.php.

In “$allowedExtensions” we set the allowed file extension in our model, in our case we will allow only image files, so I put only ‘jpg’, ‘jpeg’, ‘gif’, ‘png’ to be allowed.  The DEFAULT_BASETMPATH and DEFAULT_BASEPATH I use to set the temp path and the base path for our images respectively.

The saveFileToTmpDir will upload our temporary image to the tmp path we set, to make possible to the admin user see the image preview. When we save the form with the image we uploaded the moveFileFromTmp method is called to move our image from tmp folder to our base image folder.

Now we have our model and we have to create our admin controller to receive the image and pass to our model save, so you have to create a adminhtml controller, in my example I’ll create the Upload controller. This is my adminhtml controller: https://github.com/igorppbr/magento2-image-upload-withpreview/blob/master/Upload.php.

See that I’m using our model to save the image to the temp folder.

Now per last we have to declare in our di.xml the controller we will use to upload the image and declare a virtualtype using our created model to make possible to save the temp image to our base image directory.

To declare these two things you have to add this piece of code in your etc/di.xml: https://github.com/igorppbr/magento2-image-upload-withpreview/blob/master/di.xml

Notice I’m declaring our adminhtml controller and after our virtual type setting the tmp path, base path and allowed extensions again. Now it’s done, we can create our upload field with preview. To add the image field with preview you can use this code: https://github.com/igorppbr/magento2-image-upload-withpreview/blob/master/image_field.xml.

See I’m using the formElement as fileUploader, fileUploader is the type name we declared to our adminhtml controller responsible to receive the image and call our image model. The previewTmpl you use to set the template used to render the image preview, you can create a custom template or use the template used in Magento_Catalog to render the product images as I used in my example. Per last on uploaderConfig you have to set the path to our adminhtml controller responsible to upload the image, in my case the controller is Upload inside my brand folder and brandlist is my frontend route.

And done, our field is ready to work! I hope this article help you in development of Magento 2 extensions, thanks!

 

PORTUGUÊS

Olá, nesse novo post vou falar sobre um recurso interessante no desenvolvimento de módulos para magento 2, como você pode criar campos de upload com pré-exibição em formulários no admin.

Pense numa situação onde você tem uma imagem que o usuário admin precisa fazer o upload, como por exemplo num módulo de blog em que você tem a imagem dos posts. É interessante que você seja capaz de criar um recurso em que o usuário do admin faça o upload da imagem e veja a pré-visualização durante a edição do formulário, é bem fácil fazer isso no Magento 2, vamos ver como funcionar.

Primeiramente temos que criar uma classe de model que irá gerenciar a imagem para nós, no meu exemplo vou criar a classe ImageUpload dentro do diretório Model do nosso módulo. Veja o código da minha classe em https://github.com/igorppbr/magento2-image-upload-withpreview/blob/master/ImageUploader.php.

Em “$allowedExtensions” nós setamos as estensões permitidas em nosso model, no nosso caso vamos permitir apenas arquivos de imagem, então eu setei as estensões ‘jpg’, ‘jpeg’, ‘gif’, ‘png’ para serem permitidas. As variáveis DEFAULT_BASETMPATH e DEFAULT_BASEPATH são utilizadas para setar a pasta temporária e final para upload de nossas imagens.

O método saveFileToTmpDir irá realizar o upload temporário da nossa imagem para a pasta tmp definida, para que seja possível o usuário admin realizar o upload temporário e visualizar a nossa imagem. Quando salvamos o form o nosso método moveFileFromTmp é quem irá mover a imagem da pasta temporária para a pasta final.

Agora nós temos nosso model e temos que criar nosso controlador admin para receber a imagem para que seja possível nosso model salva-la, então temos que criar um controller adminhtml, no meu exemplo vou criar o controller chamado Upload. Este é o código do meu controller:  https://github.com/igorppbr/magento2-image-upload-withpreview/blob/master/Upload.php.

Veja que estou utilizando nosso model para salvar a imagem na pasta temp.

Agora por último temos que declarar no nosso di.xml o controller que iremos utilizar para realizar o upload da imagem e também declarar um virtualtype usando nosso model criado para que seja possível salvar a imagem temporária para a nossa pasta de image base.

Para declarar esses dois items você tem que adicionar este pedaço de código em seu etc/di.xml:

https://github.com/igorppbr/magento2-image-upload-withpreview/blob/master/di.xml

Observer que estou declarando nosso controlador adminhtml e depois nosso virtualtype setando o caminho da pasta tmp, da pasta base e as extensões permitidas durante o upload. Pronto, agora está completo, podemos criar nosso campo de upload com preview. Para adicionar este campo você pode utilizar esse código:  https://github.com/igorppbr/magento2-image-upload-withpreview/blob/master/image_field.xml.

Veja que eu estou tulizando o formElement como fileUploader, fileUploader é o type name que declaramos em nosso controlador adminhtml como responsável de receber a imagem e acionar nosso model. O previewTmpl você utiliza para configurar o template usado para renderizar a imagem com o preview, você pode criar um template personalizado ou utilizar o mesmo template usando no Magento_Catalog para renderizar a image de produtos, assim como eu utilizei em meu exemplo. Por último no uploaderConfig você deve setar o caminho para o controlador adminhtml responsável por realizar o upload das imagens, no meu caso o controlador é o Upload dentro da minha pasta brand e brandlist é o meu frontend route.

 

E pronto, nosso campo está pronto para funcionar! Espero que esse post seja útil e possa te ajudar no desenvolvimento de seus módulos, qualquer dúvida fico à disposição. Grande abraço!

Magento 2 – Upload field with preview in admin

Igor Ludgero


PHP & Magento Developer from Brazil.


Post navigation


Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest