Customer uploads different files to one product with different responses from the site

Question

I am using Opencart 1.5.6 and I have two file upload options for one product. One option is an image and the other is a video. I am setting it up to show a preview of the image once they upload.

In catalog/controller/product/product.php under public function upload() I have changed the code as follows to get a thumbnail image and change the success message:

if (!$json && is_uploaded_file($this->request->files['file']['tmp_name']) && file_exists($this->request->files['file']['tmp_name'])) {
    $file = basename($filename) . '.' . md5(mt_rand());
    
    // Hide the uploaded file name so people can not link to it directly.
    
    $json['file'] = $this->encryption->encrypt($file);
    
    //ADDED THIS//
    $json['thumb'] = $file;
    
    move_uploaded_file($this->request->files['file']['tmp_name'], DIR_DOWNLOAD . $file);
    
    //CHANGED THIS//
    $json['success'] = 'The file "' . basename($filename) . '" has been uploaded.';
}

In catalog/view/theme/<mytheme>/template/product/product.tpl I added a div to place the thumbnail in.

<div class="image-area" style="width:300px;height:215px;overflow:hidden;"></div>

Then at the bottom of the product.tpl I made the following change:

<script type="text/javascript"><!--
new AjaxUpload('#button-option-<?php echo $option['product_option_id']; ?>', {
    action: 'index.php?route=product/product/upload',
    name: 'file',
    autoSubmit: true,
    responseType: 'json',
    onSubmit: function(file, extension) {
        $('#button-option-<?php echo $option['product_option_id']; ?>').after('<img src="catalog/view/theme/default/image/loading.gif" class="loading" style="padding-left: 5px;" />');
        $('#button-option-<?php echo $option['product_option_id']; ?>').attr('disabled', true);
    },
    onComplete: function(file, json) {
        $('#button-option-<?php echo $option['product_option_id']; ?>').attr('disabled', false);
        
        $('.error').remove();
        
        if (json['success']) {
            alert(json['success']);
            
            $('input[name=\'option[<?php echo $option['product_option_id']; ?>]\']').attr('value', json['file']);
        }
        
        if (json['error']) {
            $('#option-<?php echo $option['product_option_id']; ?>').after('<span class="error">' + json['error'] + '</span>');
        }
        
        $('.loading').remove(); 
 <!-- ADDED THIS -->            
 <!-- Show thumb -->
        $(".image-area").html('<img src="download/' + json.thumb + '"/><h6>Image File Preview</h6>');

    }
});
//--></script>

All of the above code works perfectly. When I upload the image it gives a success message that includes the file name and it displays the image in the div that I created for it.

The problem is that when I click the upload button for the video upload and upload an image (I haven't limited this to just upload just video files). It will replace the image preview area from the previous upload with whatever I uploaded to the video area. I know that this is because it accesses the same code.

The HTML for both buttons on the front end is as follows:

<label style="max-width:200px;"> Upload File:</label>
<input id="button-option-227" class="button " type="button" value="Upload File">
<input type="hidden" value="2J5cqKQ0z8g96DwobtxqZfWcS925rtBIl0U3cSmI06f3EEs9E-6m9k_22emKdPkcR9QjwK3zDdW1I7S4vqQZew,," name="option[227]">

<label style="max-width:200px;">Upload Video:</label>
<input id="button-option-228" class="button " type="button" value="Upload File">
<input type="hidden" value="sbG0MtD_ebRQBeO73zWTNWhK8Y1rf-O6L3422G7D6FNjxlo0FM3GhoC5a1HiZk9DYgX5hjUPj5yxogQ67LrK-A,," name="option[228]">

Question: How can I separate this code so that only the image upload option will access it and the video upload option will access a different code and respond differently?

If there are any other solutions I would appreciate any tips.

Answer 1

I change the following code:

<!-- Show thumb -->
        $(".image-area").html('<img src="download/' + json.thumb + '"/><h6>Image File Preview</h6>');

To:

<!-- Show thumb -->
        <?php if  ($option['product_option_id'] == <<IMAGE OPTION ID>>) { ?>
            $(".image-area").html('<img src="download/' + json.thumb + '"/><h6>Image File Preview</h6>');
        <?php } ?>

Thanks for the tip shadyyx!