JSON issue in Codeigniter File Upload

Question

I am having the below code in view for the file upload form:

<form method="post" action="<?=site_url('api/do_upload')?>" enctype="multipart/form-data" id="upload_photo" />
                    <input type="file" name="userfile" size="20" class="btn btn-primary" /><br />
                    <input type="submit" value="upload" class="btn btn-warning btn-xs" />
                </form>

The event captures in JS:

$("#upload_photo").submit(function(evt) {
             evt.preventDefault();

            var url = $(this).attr('action');
            var postData = $(this).serialize();

            $.post(url, postData, function(o){
               if(o.result == 1) {
                   Display.success(o.output);
               } 
               else
               {
                   Display.error(o.error);
               }
            },'json');

         });

Model, where I am processing the file upload:

public function do_upload()
    {
        $this->_require_login();
        $this->output->set_content_type('application_json');

        $config['upload_path'] = 'C:\xampp2\htdocs\kedb\public\img\profile';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = '10000';
        $config['max_width']  = '1024';
        $config['max_height']  = '768';
        $config['file_name'] = $this->session->userdata('user_id');
        $config['overwrite'] = TRUE;

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

        if ( ! $this->upload->do_upload('userfile'))
        {
            $this->output->set_output(json_encode([
                    'result' => '0',
                    'output' => $this->upload->display_errors()
            ]));
        }
        else
        {
            $this->output->set_output(json_encode([
                    'result' => '1',
                    'output' => 'File Uploaded Successfully'
            ]));
            return false;
            //$data = array('upload_data' => $this->upload->data());
            //$this->load->view('upload_success', $data);
        }
    }

When I click the "upload" button, it getting the below error:

{"result":"0","output":"<p>You did not select a file to upload.<\/p>"}

If I remove id="upload_photo" in <form> tag, it is working. It gives error only when I add id attribute in <form>.

I might have missed something or did anything wrong. Could someone please me out?

Владислав Хоменко · Accepted Answer · 2020-06-30 09:03:19Z

1

I resolved the same issue by adding "text/plain" to the json type in the config/mimes.php file. So now this line looks like this (it's 117-th line in the file in the CI version I use):

'json' => array('application/json', 'text/json', 'text/plain'),

answered Jun 30, 2020 at 9:03

Владислав Хоменко

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

gen_Eric · Accepted Answer · 2015-12-11 15:21:22Z

0

.serialize() returns a string of all the form values. You cannot upload files by using .serialize().

If you want to upload via AJAX, then you'll need to create a FormData object. You'll also need to use $.ajax, so you can tweak a few of the settings.

var url = $(this).attr('action');
var postData = new FormData(this);

$.ajax({
    url: url,
    data: postData,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(o){
        if(o.result == 1) {
            Display.success(o.output);
        } 
        else{
            Display.error(o.error);
        }
    }
});

answered Dec 11, 2015 at 15:21

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Comments

bashleigh · Accepted Answer · 2015-12-11 15:30:45Z

0

I haven't been using codeigniter long but I would think this might be because of the way your are implementing the form. Use form_open();

https://ellislab.com/codeigniter/user-guide/helpers/form_helper.html

To add the attributes, do this

<?echo form_open('api/do_upload',array('id'=>'upload_photo'));?>

The Second error I can see is in your AJAX.

$(this).serialize();

You want to pass an object into postdata like so

data:{file:$(this).children('input[type="file"]').val()},

Also! When sending files with AJAX you need to use formData();

formData=new formData();
$file=$(this).children('input[type="file"]');
formData.append('file',$file.files[0],$file.files[0].name);

In case I've got anything wrong:

http://blog.teamtreehouse.com/uploading-files-ajax

edited Dec 11, 2015 at 15:30

answered Dec 11, 2015 at 15:24

bashleigh

9,4245 gold badges33 silver badges50 bronze badges

Collectives™ on Stack Overflow

JSON issue in Codeigniter File Upload

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related