Opencart - Upload Specific File Type - file-upload

Question

I am using OpenCart 1.5.6 and have two options for the customer to upload files to a product (image and video). When the users clicks upload I would like them to only be able to select specific file types from their computer while they browse for the files. So instead of "All Files" in the browser window, I want it to only allow .png, .jpg, .jpeg, .pdf, etc. for the image upload and for the video file I just want it to look for .mp4, .mov, .flv.
Here is an example: http://jsfiddle.net/VCdvA/
I have tried to use the accept attribute according to this post but it doesn't work.
Here is my code for the product.tpl:
<input type="button" accept="video/*,image/*" value="<?php echo $button_upload; ?>" id="button-option-<?php echo $option['product_option_id']; ?>" class="button" >
<input type="hidden" name="option[<?php echo $option['product_option_id']; ?>]" value="" />
I think that the problem is that it is type="button" and not type="file". Is there another way to limit the upload file type within the OpenCart product page?

Answer 1

The problem is the jQuery plugin used. It is AjaxUpload which seems to be taken over by different developer (completely) and reworked (completely) and the links to the original (old) documentation are dead (completely).
Well, after exploring that jQuery plugin I have found out that it works this way: in the ptoduct.tpl You can see:
<?php foreach ($options as $option) { ?>
<?php if ($option['type'] == 'file') { ?>
<script type="text/javascript"><!--
new AjaxUpload('#button-option-<?php echo $option['product_option_id']; ?>', {
//...
});
//--></script>
<?php } ?>
<?php } ?>
This means that for each option of type file this AjaxUpload is instanciated. Basically it only creates a DIV containing INPUT of type FILE with 0 opacity that is rendered above the Upload File button. This means that when user clicks on Upload File he clicks on the INPUT of type FILE instead (without knowing this). Now, looking at the code I can see that there is no possibility to set this accept="image/*" attribute because there is no support for this (original code):
_createInput: function(){
var self = this;
var input = document.createElement("input");
input.setAttribute('type', 'file');
input.setAttribute('name', this._settings.name);
addStyles(input, {
// ...
});
// ...
},
So now if You'd like to add support for this, You'd need to change this code to this (file: catalog/view/javascript/jquery/ajaxupload.js, around line 350):
var input = document.createElement("input");
input.setAttribute('type', 'file');
input.setAttribute('name', this._settings.name);
if (this._settings.accept) {
input.setAttribute('accept', this._settings.accept);
}
And change the code for plugin initializiation in product.tpl to:
<?php foreach ($options as $option) { ?>
<?php if ($option['type'] == 'file') { ?>
<script type="text/javascript"><!--
new AjaxUpload('#button-option-<?php echo $option['product_option_id']; ?>', {
<?php if ($option['product_option_id'] == <IMAGE_FILE_OPTION_ID>) { ?>
accept: 'image/*',
<?php } else if ($option['product_option_id'] == <VIDEO_FILE_OPTION_ID>) { ?>
accept: 'video/*',
<?php } ?>
//...
});
//--></script>
<?php } ?>
<?php } ?>
This should be enough.