Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

jQuery Image Upload - CodeIgniter

Tags:

jquery

php

codeigniter

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?

like image 564
Laky Avatar asked Nov 13 '22 10:11

Laky

1 Answers

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);
    }
}
like image 154
Kodie Wixon Avatar answered Nov 16 '22 02:11

Kodie Wixon
Sign in to Comment

Related questions

Is there a better way to hide & store read only data for a JQuery/JavaScript app than putting it in PHP arrays?
Delete a row from Zend_Db_Table using JOIN
Detect android java client connection timeout from PHP
Sending mail from PHP - is the error at my end, or the Mail Server's?
PHP Include: Long Path Issue
PHP5 SQLite3 recompile for UPDATE, DELETE LIMIT
Internet Explorer css styles break after postback from referring php page
Get data from mysql to android with php
create an email drop box with php, javascript etc
Three rather than Four step forgot password functionality
How do you verify if a user is following you using PHP, JS and/or REST API?
SQL statement updates only one user's data
Why is \n not working on one line of my PHP script, but is fine on all the others?
getJSON with jquery
Implement a Foursquare-like Check-In into a wordpress/buddypress install
Want to use Zend_translate outside the Zend framework?
Github API ... Getting source filename on a moved / renamed file
PHP ::: Prepared Statements ::: freeresult() ::: close()
PHP: Case-insensitive "array_diff"
Check if specific array key exists in multidimensional array - PHP

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!