Magento 2: upload file in frontend

Add menu in Dashboard customer_account.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="customer_account_navigation">
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-custom">
                <arguments>
                    <argument name="path" xsi:type="string">route_name/controller_name/action_name</argument>
                    <argument name="label" xsi:type="string">My Support Tickets</argument>
                </arguments>
        </block>
        </referenceBlock>
    </body>
</page>

in this route_nam_controller_name_action_name.xml layout file call this phtml file

ADD this HTML to your .phml file which one used for file upload

<form class="upload-form"
    name="UploadFrom"
    action="<ACTION PATH>"
    id="upload-form"
    method="post"
    enctype='multipart/form-data'
    autocomplete="off"
    >   
    <input type="file"
           name="upload_file"
           id="file-upload"/>
      <button type="submit"
              class="action submit primary "
              title="<?= $block->escapeHtml('Submit') ?>" >
              <span>
                <?= $block->escapeHtml('Submit') ?>
              </span>
      </button>
</form>

now user select file and upload here and when user submits button click then ACTION PATH controller call.
put this code into your this controller file.


use Magento\Framework\App\Filesystem\DirectoryList;


class <filename> extends \Magento\Framework\App\Action\Action
{
    protected $uploaderFactory;
    protected $adapterFactory;
    protected $filesystem;

    public function __construct(
        \Magento\MediaStorage\Model\File\UploaderFactory $uploaderFactory,
        \Magento\Framework\Image\AdapterFactory $adapterFactory,
        \Magento\Framework\Filesystem $filesystem,
    ) {
        $this->uploaderFactory = $uploaderFactory;
        $this->adapterFactory = $adapterFactory;
        $this->filesystem = $filesystem;
    }
    public function execute()
    {
        // Logic Goes here  ///
        $fileup = $this->getRequest()->getFiles('upload_file');

        try {
            $uploaderFactory = $this->uploaderFactory->create(['fileId' => 'upload_file']); 
            $uploaderFactory->setAllowedExtensions(['docx', 'doc']); // you can add more extension which need
            $fileAdapter = $this->adapterFactory->create();
            $uploaderFactory->setAllowRenameFiles(true);
            $uploaderFactory->setFilesDispersion(true);
            $mediaDirectory = $this->filesystem->getDirectoryRead(DirectoryList::MEDIA);
            $destinationPath = $mediaDirectory->getAbsolutePath('<UPLOAD FILE FOLDER NAME>');
            $result = $uploaderFactory->save($destinationPath);
            print_r($result)
            if (!$result) {
                throw new LocalizedException(
                    __('File cannot be saved to path: $1', $destinationPath)
                );
            }
            // save file name 
            $File_upoad = $result['file'];
        }  catch (\Exception $e) {
            $this->messageManager->addError(__('File not Uplaoded, Please try Agrain'));
        }
        // Logic Goes here
    }

}

Leave a comment Cancel reply