How to upload image in Magento 2

In this blog, we will explain how to upload image in Magento 2 using a custom module.

Uploading images is a very common requirement in Magento 2 development. Magento 2 provides a powerful and secure way to handle image uploads.

Whether you want customers to upload profile images, sellers to upload product images, or admins to upload custom media.

Why Image Upload is Important in Magento 2?

Magento 2 image upload functionality is used in many real-world scenarios such as:

• Customer profile image upload
• Seller shop logo upload (Marketplace)
• Custom product attachments
• CMS and custom module image uploads
• Frontend user-generated content

To upload an image in Magento, you need to write the following code inside your controller:

use Magento\Framework\App\Filesystem\DirectoryList;
	use Magento\Backend\App\Action;

	protected $_fileUploaderFactory;

	public function __construct(
		\Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory,
		Action\Context $context
		 
	) {
 
		$this->_fileUploaderFactory = $fileUploaderFactory;
		parent::__construct($context);
	}
 
	public function execute(){

		$uploader = $this->_fileUploaderFactory->create(['fileId' => 'image']);
		 
		$uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']);
		 
		$uploader->setAllowRenameFiles(false);
		 
		$uploader->setFilesDispersion(false);

		$path = $this->_filesystem->getDirectoryRead(DirectoryList::MEDIA)
		 
		->getAbsolutePath('images/');
		 
		$uploader->save($path);
 
	}

Here,

_fileUploaderFactory: Is an object of \Magento\MediaStorage\Model\File\UploaderFactory , which handles all the uploading process.

[‘fileId’ => ‘image’]: Where ‘image’ is name of your input type = file element.

setAllowedExtensions(): List of file extensions you allow to upload.

setFilesDispersion():  If you set it to “false”, then your file uploaded to the same path, and if you set it to “true”, then it first creates two folders with the first two letters of the image’s name, and then uploads your image inside that folder.

save(): Is used to upload and save a file at the path that you passed inside it.
If you want to save the image with a custom name, then you need to pass your file name as a second parameter.

Uploading images is a fundamental requirement in Magento 2 development. Magento provides a robust and secure way to upload images in Magento 2 using UploaderFactory and filesystem abstraction.

For technical assistance, please get in touch with us via email at support@webkul.com.

Discover powerful solutions to enhance your Magento 2 store by exploring our Magento 2 plugins page.

Bring your vision to life with custom-built solutions—hire skilled Magento 2 developers today.
Happy Coding!!