How to save uploaded images in a custom folder of pub media in magneto 2?

Try below solution:

Add file upload input in your phtml

<li class="field upload front_img required full-width"> <div class="item"> <div class="image_upload front" id="image_upload_front" style="background-size: contain;"> <input type="file" name="front_img" id="front_img" data-size="13" data-validate="{required:true}"> </div> <div id="attachmentFilesFrontImg" class="attachmentfiles"></div> </div> <h3>Front*</h3> </li> 

Send Ajax Request from phtml file:

/**** Upload Image ****/ $("#front_img").change(function(){ var data = $("#onlinequote-form").get(0); jQuery.ajax({ url: "<?php echo $this->getUrl(); ?>controllername/index/addFrontImgCustomize?isAjax=true' ?>", type: "POST", data: new FormData(data), processData: false, contentType: false, showLoader: true, success: function (response) { if(response.error == false) { $('div.actions').show(); $("#attachmentFilesFrontImg").html(response.data.html); $('#front_img').attr("src", response.data.path); } }, }); }); 

Create Ajax controller AddFrontImgCustomize.php at vendor\module\Controller\Index.

<?php namespace vendor\module\Controller\Index; use Magento\Framework\Json\Helper\Data as JsonHelper; class AddFrontImgCustomize extends \Magento\Framework\App\Action\Action { protected $_pageFactory; protected $connection; protected $_mediaDirectory; protected $_fileUploaderFactory; public $_storeManager; public function __construct( \Magento\Framework\App\Action\Context $context, \Magento\Framework\App\ResourceConnection $connection, JsonHelper $jsonHelper, \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory, \Magento\Framework\Filesystem $filesystem, \Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory, \Magento\Store\Model\StoreManagerInterface $storeManager, \Magento\Framework\View\Result\PageFactory $pageFactory) { $this->_pageFactory = $pageFactory; $this->connection = $connection; $this->jsonHelper = $jsonHelper; $this->resultJsonFactory = $resultJsonFactory; $this->_mediaDirectory = $filesystem->getDirectoryWrite(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA); $this->_fileUploaderFactory = $fileUploaderFactory; $this->_storeManager = $storeManager; return parent::__construct($context); } public function execute(){ $_postData = $this->getRequest()->getPost(); $message = ""; $newFileName = ""; $error = false; $data = array(); if (isset($_FILES['front_img']['name']) && $_FILES['front_img']['name'] != '') { try{ $target = $this->_mediaDirectory->getAbsolutePath('vendor/module'); //attachment is the input file name posted from your form $uploader = $this->_fileUploaderFactory->create(['fileId' => 'front_img']); $_fileType = $uploader->getFileExtension(); $uniqid = uniqid(); $newFileName = $uniqid .'.'. $_fileType; /** Allowed extension types */ //$uploader->setAllowedExtensions(['jpg', 'jpeg', 'png']); /** rename file name if already exists */ $uploader->setAllowRenameFiles(true); $result = $uploader->save($target, $newFileName); //Use this if you want to change your file name if ($result['file']) { $_mediaUrl = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA); $_src = $_mediaUrl.'vendor/module/'.$newFileName; $error = false; $message = __("File has been successfully uploaded"); $html = '<div class="image item base-image" data-role="image" id="'. $uniqid .'"> <div class="wallpaper-image-wrapper"> <input type="hidden" value="vendor/module/'.$newFileName.'" name="frnt_img"> </div> </div>'; $data = array('filename' => $newFileName, 'path' => $_mediaUrl.'vendor/module/'.$newFileName, 'fileType' => $_fileType, 'html' => $html); } } catch (\Exception $e) { $error = true; $message = $e->getMessage(); } } $resultJson = $this->resultJsonFactory->create(); return $resultJson->setData([ 'message' => $message, 'data' => $data, 'error' => $error ]); } }