uploading an image in codeigniter trouble

Question

I have a code from the tutorial and i dont know what happen's why mine doesn't work. I just follow the tutorial and the code doesn't work. I am using a codeigniter framework, please help me with these, i have no error in console also, i dont know what's happening why . Also it doesn't sends a request from ajax. Please check the code in ajax. Thanks.

ajax code:

$(function () {
  var inputFile = $('input[name=file]');
  var uploadURI = $('#form-upload').attr('action');

  $('#upload-btn').on('click', function(event) {
     var fileToUpload = inputFile[0].files[0];
     if(fileToUpload != 'undefine') {
        var formData = new FormData();
        formData.append("file", fileToUpload);
        $.ajax({
            url: uploadURI,
            type: "POST",
            data: formData,
            processData: false,
            contentData: false,
            success: function(data) {
              alert("Profile picture updated!");
            }
        });
     }
  });
});

from view :

<form action="<?php echo site_url("profile/profile_picture") ?>" id="form-upload">            
              <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
                <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new"><i class="glyphicon glyphicon-paperclip"></i> Select file</span><input type="file" name="file"></span>
                <a href="#" id="upload-btn" class="input-group-addon btn btn-success fileinput-exists"><i class="glyphicon glyphicon-open"></i> Upload</a>
              </div>
            </form>

controller:

public function profile_picture() {
        $config['upload_path'] = "./assets/uploaded_images/";
        $config['allowed_types'] = 'gif|jpg|png';
        $this->load->library('upload', $config);

        if($this->upload->do_upload("file")) {

        }
        else {
            echo "File cannot be uploaded";
        }
    }

i got this error :

File cannot be uploadedarray(1) {
      ["error"]=>
      string(43) "<p>You did not select a file to upload.</p>"
    }

Possible duplicate of [Codeigniter: Image Upload](http://stackoverflow.com/questions/4684612/codeigniter-image-upload) — Masivuye Cokile, Nov 18 '16 at 12:04

Muhammed Imran Hussain · Accepted Answer · 2016-11-18T12:02:26.330

2

OK the problem is it should be 'contentType' not 'contentData'. Here is updated JS code

$(function () {
    var inputFile = $('input[name=file]');
    var uploadURI = $('#form-upload').attr('action');

    $('#upload-btn').on('click', function(event) {
        var fileToUpload = inputFile[0].files[0];
        if(fileToUpload != 'undefine') {
            var formData = new FormData($('#form-upload')[0]);
            $.ajax({
                type: "POST",
                url: uploadURI,
                data: formData,
                processData: false,
                contentType: false,
                success: function(msg) {
                    alert("Profile picture updated!");
                }
            });
        }
    });
});

edited Nov 18 '16 at 12:02

answered Nov 18 '16 at 09:23

Muhammed Imran Hussain

2,057
16
24

i have a problem why does the code doesn't go with ajax. it doesnt send data. it doesnt execute my controller – Jc John Nov 18 '16 at 09:25
I think your formData not constructed correctly. I have edited my comment and given a link. You can follow this and paste updated code if your problem doesn't fix – Muhammed Imran Hussain Nov 18 '16 at 09:31
can you fix my code posted ? still its more likely similar – Jc John Nov 18 '16 at 10:12
1. Check in browser console, is there any error 2. after/before formData.append("file", fileToUpload); add another line formData.append("action", uploadURI); – Muhammed Imran Hussain Nov 18 '16 at 10:18
hello sir. i got success in console but in response i got this : File cannot be uploaded – Jc John Nov 18 '16 at 10:21
add var dump for example profile_picture() { var_dump($_POST) and provide the print. – Muhammed Imran Hussain Nov 18 '16 at 10:24
what would i vardump sir ? – Jc John Nov 18 '16 at 10:29
before upload code write var_dump($_FILE); and var_dump($_POST); it will say whats submitted through form – Muhammed Imran Hussain Nov 18 '16 at 10:31
i dont understand sir. i got these: array(272) { ["-----------------------------45661633911626 Content-Disposition:_form-data;_name"]=> string(1195) ""file"; filename="14620082_120300000508885579_630840128_n.jpg" Content-Type: image/jpeg ��JFIF��Photoshop 3.0�8BIM��g(�bFBMD01000aaa03000060210000fd40000060450000364a0000b4590000918d0000449400003c9b000080a20000f6190100 ��ICC_PROFILE��lcms��mntrRGB XYZ ��)�9acspAPPL��-lcms �� – Jc John Nov 18 '16 at 10:36
Ok got it. Update this line $config['allowed_types'] = 'gif|jpg|png'; to $config['allowed_types'] = 'gif|jpg|jpeg|png'; – Muhammed Imran Hussain Nov 18 '16 at 10:38
it doesnt solve the problem sir still i got that error and in the last message it says file cannot be upload – Jc John Nov 18 '16 at 10:42
:) no worries. add this line $error = array('error' => $this->upload->display_errors()); var_dump($error); just before the line echo "File cannot be uploaded"; – Muhammed Imran Hussain Nov 18 '16 at 10:43
here is the reply sir : File cannot be uploadedarray(1) { ["error"]=> string(43) "
You did not select a file to upload.
" } why ? i already selected – Jc John Nov 18 '16 at 10:45
What is your browser version? Check it supports FormData api – Muhammed Imran Hussain Nov 18 '16 at 10:56
mozilla firefox sir – Jc John Nov 18 '16 at 11:05
mozille firefox version no? – Muhammed Imran Hussain Nov 18 '16 at 11:06
Firefox 49.0.2 sir – Jc John Nov 18 '16 at 11:09
Strange. last try. if it doesn't work I will update you later. remove this two line var formData = new FormData(); formData.append("file", fileToUpload); and use this two line var form = $('form')[0]; var formData = new FormData(form); instead – Muhammed Imran Hussain Nov 18 '16 at 11:18
Here is the error sir: array(2) { ["-----------------------------143481563120748 Content-Disposition:_form-data;_name"]=> string(57) ""q" -----------------------------143481563120748-- " [0]=> string(57) ""q" -----------------------------143481563120748-- " } File cannot be uploadedarray(1) { ["error"]=> string(43) "
You did not select a file to upload.
" } – Jc John Nov 18 '16 at 11:22
sorry John, I tried my best. I will test your code later in my computer. Meantime if you can solve this let me know please. Best of luck. You can inbox me too – Muhammed Imran Hussain Nov 18 '16 at 11:24
thnks sir... Okay sir – Jc John Nov 18 '16 at 11:26
@JcJohn I have edited my solution. Please check and let me know it works or not – Muhammed Imran Hussain Nov 18 '16 at 12:03

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

You can my thread that , i gave the solution for multiple images upload using ajax , its quite easy just remove the array from name of my solution , then you will get your image in controller .

here's the link of solution of mine . getting error while uploading image via Ajax

edited May 23 '17 at 11:45

Community

1
1

answered Nov 18 '16 at 10:27

Amit Chauhan

682
7
22

i want only 1 file to be uploaded sir – Jc John Nov 18 '16 at 10:28
as i said remove the array from input field of file – Amit Chauhan Nov 18 '16 at 11:35
in controller , get the only image . – Amit Chauhan Nov 18 '16 at 11:36

uploading an image in codeigniter trouble

2 Answers2