jQuery Image Upload - CodeIgniter

Question

I use jQuery Image upload like this http://blueimp.github.com/jQuery-File-Upload/

I get the thumbnail and after clicking the upload button I get the progress bar, but then get 'SyntaxError: JSON.parse: unexpected character'

view page

</body>
</html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Demo</title>

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-image-gallery.min.css">
<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-ie6.min.css"><![endif]-->
<link rel="stylesheet" href="http://blueimp.github.com/jQuery-File-Upload/jquery.fileupload-ui.css">
<style type="text/css">body {padding-top: 80px;}</style>
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.">
</head>
<body>

<div class="container">


    <?php echo form_open_multipart('upload/do_upload', array('id'=>'fileupload')); ?>


        <div class="row">
            <div class="span16 fileupload-buttonbar">
                <div class="progressbar fileupload-progressbar fade"><div style="width:0%;"></div></div>
                <span class="btn success fileinput-button">
                    <span>Add files...</span>
                    <input type="file" name="userfile[]" multiple>
                </span>
                <button type="submit" class="btn primary start">Start upload</button>
                <button type="reset" class="btn info cancel">Cancel upload</button>
                <button type="button" class="btn danger delete">Delete selected</button>
                <input type="checkbox" class="toggle">
            </div>
        </div>
        <br>
        <div class="row">
            <div class="span16">
                <table class="zebra-striped"><tbody class="files"></tbody></table>
            </div>
        </div>
    </form>

</div>
<!-- gallery-loader is the loading animation container -->
<div id="gallery-loader"></div>
<!-- gallery-modal is the modal dialog used for the image gallery -->
<div id="gallery-modal" class="modal hide fade">
    <div class="modal-header">
        <a href="#" class="close">&times;</a>
        <h3 class="title"></h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <a class="btn primary next">Next</a>
        <a class="btn info prev">Previous</a>
        <a class="btn success download" target="_blank">Download</a>
    </div>
</div>
<script>
var fileUploadErrors = {
    maxFileSize: 'File is too big',
    minFileSize: 'File is too small',
    acceptFileTypes: 'Filetype not allowed',
    maxNumberOfFiles: 'Max number of files exceeded',
    uploadedBytes: 'Uploaded bytes exceed file size',
    emptyResult: 'Empty file upload result'
};

</script>
<script id="template-upload" type="text/html">
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name">{%=file.name%}</td>
        <td class="size">{%=o.formatFileSize(file.size)%}</td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td class="progress"><div class="progressbar"><div style="width:0%;"></div></div></td>
            <td class="start">{% if (!o.options.autoUpload) { %}<button class="btn primary">Start</button>{% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}<button class="btn info">Cancel</button>{% } %}</td>
    </tr>
{% } %}
</script>
<script id="template-download" type="text/html">
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name">{%=file.name%}</td>
            <td class="size">{%=o.formatFileSize(file.size)%}</td>
            <td class="error" colspan="2"><span class="label important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}">{%=file.name%}</a>
            </td>
            <td class="size">{%=o.formatFileSize(file.size)%}</td>
            <td colspan="2"></td>
        {% } %}
        <td class="delete">
            <button class="btn danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">Delete</button>
            <input type="checkbox" name="delete" value="1">
        </td>
    </tr>
{% } %}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="http://blueimp.github.com/jQuery-File-Upload/vendor/jquery.ui.widget.js"></script>
<!-- The Templates and Load Image plugins are included for the FileUpload user interface -->
<script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script>
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
<!-- Bootstrap Modal and Image Gallery are not required, but included for the demo -->
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.min.js"></script>

<script src="http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-image-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="http://blueimp.github.com/jQuery-File-Upload/jquery.iframe-transport.js"></script>
<script src="http://blueimp.github.com/jQuery-File-Upload/jquery.fileupload.js"></script>
<script src="http://blueimp.github.com/jQuery-File-Upload/jquery.fileupload-ui.js"></script>
<script src="http://blueimp.github.com/jQuery-File-Upload/application.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
<!--[if gte IE 8]><script src="http://blueimp.github.com/jQuery-File-Upload/cors/jquery.xdr-transport.js"></script><![endif]-->


</body> 
</html>

controller page:

class upload extends CI_Controller {

    function __construct()
    {
        parent::__construct();
        $this->load->helper(array('form', 'url'));



    }

    function index()
    {    
        $this->load->view('index');
    }

    function do_upload()
    {
        $config['upload_path'] = './uploads/'; // server directory
        $config['allowed_types'] = 'gif|jpg|png'; // by extension, will check for whether it is an image
        $config['max_size']    = '1000'; // in kb
        $config['max_width']  = '1024';
        $config['max_height']  = '768';

        $this->load->library('upload', $config);
        $this->load->library('Multi_upload');

        $files = $this->multi_upload->go_upload();

        if ( ! $files )        
        {
            $error = array('error' => $this->upload->display_errors());
            $this->load->view('index', $error);
        }    
        else
        {
            $data = array('upload_data' => $files);
            $this->load->view('upload_success', $data);
        }
    }    
}

Any Help?

Check: github.com/blueimp/jQuery-File-Upload/issues/517 Seems like a common problem. — Marcus Olsson
– Marcus Olsson, Commented Jan 31, 2012 at 23:02
Thanks, but where should I put this code from last post? When I put in __construct() I get error: Message: Undefined property: upload::$_request — Laky
– Laky, Commented Jan 31, 2012 at 23:11
At github, the post mentions putting the code right at the beginning of the action - so I guess in your do_upload function. Not able test myself right now, sorry =/ — Marcus Olsson
– Marcus Olsson, Commented Jan 31, 2012 at 23:19
Is your controller file encoded in UTF-8 without BOM? I've had that extra byte at the beginning mess up many a thing. — Seabass
– Seabass, Commented Feb 1, 2012 at 0:57

Kodie Wixon · Accepted Answer · 2013-02-19 02:43:54Z

I also got this error even when the files were uploading successfully. The issue I came across was what I was returning. More info can be found here https://github.com/blueimp/jQuery-File-Upload/wiki/Setup and the section labelled Using jQuery File Upload (UI version) with a custom server-side upload handler

so it basically says: "Note that the response should always be a JSON object containing a files array even if only one file is uploaded." You should still pass a files array back even if you get a server side error.

Here is an example of my Upload function (the keys part are the "echo json_encode"):

function upload_file($component_files_id = null,$thumb_width = 400)
{
    $config['upload_path'] = ($component_files_id) ? './documents/component_files/'.$component_files_id : './documents/image_uploads';
    if (!file_exists($config['upload_path']))
        @mkdir($config['upload_path'], 0777, true);

    $config['allowed_types'] = 'gif|jpg|png|pdf|doc|docx|docm|odt|xls|xlsx|xlsm|ods|csv';
    $config['max_size'] = '10000'; #in KB
    $config['max_width']  = '5000';
    $config['max_height']  = '5000';

    $this->load->library('upload', $config);
    if (!$this->upload->do_upload())
    {
        $error = $this->upload->display_errors('','');

        if(is_ajax()){
            $file['error'] = $error;
            echo json_encode(array('files'=>array($file)));
        }
        else
            set_message($error,'error',true);
    }
    else
    {
        $file = $this->upload->data();
        $file['is_image'] =  ($file['is_image'] == '1') ? 'TRUE' : 'FALSE';
        $file['updated_by'] = get_user('user_id');
        $file['created_by'] = get_user('user_id');
        if($component_files_id)
            $file['component_files_id'] = $component_files_id;
        //save the file details to the database
        $file_id = $this->page_model->save_file($file); 
        if($file['is_image'] == 'TRUE'){    
            $thumb_width = ($component_files_id) ? 290 : $thumb_width; 
            $this->_create_thumbnail($file_id,$thumb_width);
        }
        //set the data for the json array   
        $info->id = $file_id;
        $info->name = $file['file_name'];
        $info->size = $file['file_size'];
        $info->type = $file['file_type'];
        if($file['is_image'] == 'TRUE'){
            $info->url =    base_url().'files/image/'.$file_id;
            $info->thumbnail_url = base_url().'files/image/'.$file_id.'/thumb';
        }
        else{
            $info->url =    base_url().'files/download/'.$file_id;
            $info->thumbnail_url = base_url().'images/document-icon.png';               
        }               

        $info->delete_url = base_url().'files/delete_document/'.$file_id;
        $info->delete_type = 'DELETE';  
        $files['files'] = array($info);
        header('Content-type: text/html');
        echo json_encode($files);
    }
}

Jordan Arsenault · Accepted Answer · 2012-02-14 07:09:47Z

0

Well to start, none of the script files referenced at the bottom of the your view exist:

This would show up in your web console. Try to keep an eye on it at all times.

Head over to This GitHub Page and follow the directions to get this up-and-running w/ CodeIgniter.

answered Feb 14, 2012 at 7:09

Jordan Arsenault

7,4719 gold badges55 silver badges103 bronze badges

Collectives™ on Stack Overflow

jQuery Image Upload - CodeIgniter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related