Step 1
1) You have to add a form to the frontend phtml file
app/design/frontend/ [package]/[themes]/ template/your_path_template.phtml
<form action="your_controller_action" method="post" enctype="multipart/form-data">
<ul class="form-list">
<li>
<label for="filename"><?php echo $this->__('Browse') ?></label>
<div class="input-box">
<input id="filename" name="filename" type="file"/>
</div>
</li>
</ul>
<button type="submit" class="button" title="<?php echo $this->__('Submit'); ?>"><?php echo $this->__('Submit'); ?></button>
</form>
Step 2
2)Then type in your controller the following:
app/code/local/ [Namespace]/[Modulename]/ controllers/IndexController.php
<?php class Namespace_Modulename_IndexController extends Mage_Core_Controller_Front_Action {
protected $_logFile = 'your_file_upload.log';
public function saveUploadFileAction() {
if ($data = $this->getRequest()->getParams()) {
$type = 'filename';
if (isset($_FILES[$type]['name']) && $_FILES[$type]['name'] != '') {
try {
$uploader = new Varien_File_Uploader($type);
$uploader
->setAllowedExtensions(array('jpg', 'jpeg', 'gif', 'png'));
$uploader->setAllowRenameFiles(true);
$uploader->setFilesDispersion(true);
$path = Mage::getBaseDir('media') . DS . 'your_path';
if (!is_dir($path)) {
mkdir($path, 0777, true);
}
$uploader->save($path, $_FILES[$type]['name']);
$filename = $uploader->getUploadedFileName();
$this->_saveCustomerFileData($filename);
} catch (Exception $e) {
Mage::log($e->getMessage(), null, $this->_logFile);
}
}
}
$this->_redirect('*/*/');
}
protected function _saveCustomerFileData($filename)
{
try {
$customer_id = Mage::getSingleton('customer/session')
->getCustomer()->getId();
//your model for saving filename of upload file
$model = Mage::getModel('attacher/avatar');
$model
->addData(array(
'customer_id' => $customer_id,
'filename' => $filename
))
->save();
} catch (Exception $e) {
Mage::log($e->getMessage(), null, $this->_logFile);
}
}
}
You can also save your file using your observer. Or you can use library uploadify (http://www.uploadify.com/).
You can see an example code on frontend below:
<div class="attacher_button_div">
<label><?php echo $this->__('Upload your avatar: ') ?></label>
<div id="attacher_button">
<input id="file_attacher_avatar" type="file" name="file_attacher_avatar"/>
</div>
</div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function () {
jQuery('#file_attacher_avatar').uploadify({
'uploader': '<?php echo $this->getSkinUrl('your_path/uploadify/uploadify.swf') ?>',
'cancelImg': '<?php echo $this->getSkinUrl('your_path/uploadify/cancel.png') ?>',
'script': '<?php echo $this->getUrl('your_controller') ?>',
'auto': true,
'buttonText': 'Browse',
'simUploadLimit': 1,
'sizeLimit': '100KB',
'multi': true,
'fileDataName': 'avatar',
'fileExt': '*.gif; *.jpg; *.png',
'fileDesc': 'Image Files',
'onComplete': function (event, ID, fileObj, response, data) {
jQuery('.fileName').html('File Uploaded: ' + fileObj.name);
}
});
});
// ]]>
</script>
Hope my article "How to use Varien_File_Uploader to upload files from the Frontend." was helpful. Cheers!
Enter a Comment