Opencart - Upload Specific File Type

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?

shadyyx · Answer 1 · 2014-04-08T07:40:31.357

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.

This sounds great and kinda works. First I had to add a } in from of else if to not get an unexpected else error. I am having another problems with the else if statement. Basically when I add it to the file and upload, it doesn't allow me to click on the button. Only the first one I enter works. If I remove the else if statement they both work (although it doesn't limit one of them because the code is not there). Is there a reason that tow commands wouldn't work with the ajax code? — MattM, Apr 07 '14 at 22:19
Here's the URL: http://zing-cards.com/dev/storefront/index.php?route=product/product&path=59&product_id=50 — MattM, Apr 07 '14 at 22:21
The Upload AR Video option works but the standard Upload File one doesn't — MattM, Apr 07 '14 at 22:37
Found the error - somehow You must have written `accept: 'image/*';` instead of `accept: 'image/*',` - mind the **semicolon** in first (Yours) case and **comma** that should be there - **only for image** option. Fix this and it should work. I corrected the missing `}` in my code... — shadyyx, Apr 08 '14 at 07:46

Opencart - Upload Specific File Type

1 Answers1