Prestashop 1.7 Submit a form on custom module's tpl

Question

I've created my own module called cus_avatar which will be used for uploading customers avatar. I've made a tpl file "uploader.tpl" containing the form i needed to submit, hooked in the customer's profile page. How do I post this form?

Here are my codes:

root/modules/cus_avatar/cus_avatar.php:

<?php

if (!defined('_PS_VERSION_')) {
    exit;
}

class Cus_Avatar extends Module
{
    public function __construct()
    {
        // the module's details and construct codes here
    }

    public function install()
    {
        return parent::install()
            && $this->registerHook('header')
            && $this->registerHook('displayEpAvatar')
            && $this->registerHook('displayEpAvatarSidebar')
            && $this->installDb();
    }

    public function uninstall()
    {
        return parent::uninstall() && $this->uninstallDb();
    }

    protected function installDb(){

        $alterDb = "CREATE TABLE mydb."._DB_PREFIX_."avatar (
                        avatar_id INT NOT NULL AUTO_INCREMENT,
                        id_customer INT NULL,
                        avatar_path VARCHAR(255) NULL,
                        PRIMARY KEY (avatar_id)
                    ) ENGINE = MyISAM";

        return Db::getInstance()->execute($alterDb);
    }

    protected function uninstallDb(){
        $revertDb = "DROP TABLE "._DB_PREFIX_."avatar";
        return Db::getInstance()->execute($revertDb);
    }

    public function hookHeader($params)
    {
        $this->context->controller->addCss($this->_path.'assets/css/style.css', 'all');
        $this->context->controller->addJS($this->_path.'assets/js/script.js');
    }

    public function hookDisplayEpAvatar($params)
    {
        if(isset($_POST['submit_avatar']))
        {
            // THIS CODE DOESNT SEEM TO WORK
            var_dump("HELLO WORLD!");
            die();
        }

        return $this->display(__FILE__, 'views/templates/hook/uploader.tpl');
    }

    public function hookDisplayEpAvatarSideBar($params)
    {
    }
}

root/modules/cus_avatar/views/templates/hook/uploader.tpl:

<form name="form_avatar" method="post">
    <div class="row">
        <div class="col-xs-12 plr30">
            <label class="mt20">PROFILE AVATAR</label>
        </div>
        <div class="col-xs-12 col-md-4 col-lg-3 plr30">
            <div class="avatar-container">
                <label class="avatar">
                    <input type="file" accept="image/*">
                </label>
            </div>
            <button type="submit" name="submit-btn">SUBMIT</button>
        </div>
        <div class="col-xs-12 col-md-8 col-lg-9">
            <small class="text-warning">Avatar is updated seperately from the rest of the form.</small>
        </div>
    </div>
</form>

//ignore these texts, these are just for making the description long enough to be submitted. The quick brown fox jumps over the lazy dog near the bank of the river.

Answer 1

So I've found a way, if anyone has a better way to do this let me know also.

I've created a controller in root/modules/cus_avatar/controllers/front/ named "default.php". this controller will handle the post process, therefore I had to link the form action to this controller using getModuleLink.

In my root/modules/cus_avatar/views/templates/hook/uploader.tpl:

//first parameter is the module name, second is the controller name.
<form action="$link->getModuleLink('cus_avatar', 'default')" method="post">

In my root/modules/cus_avatar/controllers/front/default.php:

include_once(dirname(__FILE__).'../../../cus_avatar.php');

class cus_avatarDefaultModuleFrontController extends ModuleFrontController
{
    public function __construct()
    {
        parent::__construct();

        $this->context = Context::getContext();
    }

    public function initContent()
    {
        parent::initContent();

        if(isset($_POST['submit-btn']))
        {
//HANDLE THE POST/UPLOAD PROCESS HERE

        }
// after handling the post process imidiately kill the page to reduce further loaading and then redirect the page back to the page where you originally is, in my case it's index.php?controller=identity.
        die(Tools::redirect('index.php?controller=identity'));
    }
}

then removed this part on my cus_avatar.php:

    public function hookDisplayEpAvatar($params)
    {
// remove the if condition now since it has no use. 
            if(isset($_POST['submit_avatar']))
            {
                // THIS CODE DOESNT SEEM TO WORK
                var_dump("HELLO WORLD!");
                die();
            }

            return $this->display(__FILE__, 'views/templates/hook/uploader.tpl');
    }