OpenCart content not loading in page?

Question

I'm beginner in OpenCart and I'm trying to upload the file in server using PHP. I have done the following code. My problem is, files are sucessfully uploading in server but if there is some error I'm trying to loading the LoadA() function, but the result is not showing in site instead it is showing in console.log I don't know what is the error.

controller/boxupload/upload.php

public function add()
{

    if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) 
    {
        if(success) //files are succesfully uploading
        {
            //doing stuff
        }
        if (it is fail)
        {

            $this->LoadA(); // this is not loading in site. Instead it is showing in console.log
        }
    }
}

public function LoadA()
{
    $data['token'] = $this->session->data['token'];
    $this->document->setTitle("!!!!!!!!!!!!Upload failed!!!!!!!!");
    $data['add'] =  $this->url->link('boxupload/upload/add', 'token=' . $this->session->data['token'], 'SSL');
    $data['header'] = $this->load->controller('common/header');
    $data['column_left'] = $this->load->controller('common/column_left');
    $data['footer'] = $this->load->controller('common/footer');
    $this->response->setOutput($this->load->view('boxupload/upload.tpl', $data));
}   

Then the tpl file for this one

controller/boxupload/upload.tpl

$('#button-upload').on('click', function() {
    $('#progress-bar').css('width', '0%');
    $('#form-upload').remove();

    $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

    $('#form-upload input[name=\'file\']').trigger('click');

    if (typeof timer != 'undefined') {
        clearInterval(timer);
    }
    var WID = 30;
    timer = setInterval(function() {
        if ($('#form-upload input[name=\'file\']').val() != '') {
            clearInterval(timer);

            // Reset everything
            $('.alert').remove();
            $('#progress-bar').css('width', '0%');
            $('#progress-bar').removeClass('progress-bar-danger progress-bar-success');
            $('#progress-text').html('');

            $.ajax({
                url: '<?php echo "index.php?route=boxupload/upload/add&token=$token"; ?>',

                type: 'post',
                //dataType: 'json',
                data: new FormData($('#form-upload')[0]),
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    $('#button-upload').button('loading');

                    $('#progress-bar').css('width', '50%');

                },
                complete: function() {
                    $('#button-upload').button('reset');
                    $('#progress-bar').css('width', '100%');

                },
                success: function() 
                {   $('#progress-bar').css('width', '80%');


                },

            });
        }

    }, 500);
});

Please see the highlighted area in image.

Answer 1

Your .tpl file should be in a view.

$this->response->setOutput($this->load->view('boxupload/upload.tpl', $data));

loads the file

view/theme/default/template/boxupload/upload.tpl

Also, look at some other template files. They're generally mostly HTML.

Also, you're going to want to refactor your names so they use normal OpenCart naming conventions.

controller/extension/boxupload/upload.php
view/theme/default/template/extension/boxupload/upload.tpl
etc. 

Answer 2

Try this:

dataType: 'html',

success: function(html) 
{   
    $('#progress-bar').css('width', '80%');
    $('#your-div').html(html);

},