CakePHP - Form not submitting file field

Question

I'm trying to upload an image file to my application, the user can choose to change his profile picture by uploading an image, but when the form is submitted it's not submitting the file along with the form.

I'm using Meio Upload for my file uploading, i'll paste my view controller action and model:

View:

<div class="prepend-1 span-8">
<?php
    echo $this->Form->create('Fonyker', array('action' => 'edit', 'class' => 'span-8', 'type' => 'file'));
?>
    <div class="span-3">
      <label for="FonykerImage" class="span-3 last">Profile Image</label>
      <div class="span-4 preview" style="border-color:black; border:dotted 2px; height:80px; width:80px">
        <img src="<?php echo $this->data['Fonyker']['image_url'];?>" style="width:80px;height:80px;"/>
      </div>
    </div>
    </br>
<?php
    echo $this->Form->input('image_url', array(
      'div' => array(
        'class' => 'span-5 last'
      ),
      'label' => array(
        'text' => 'Upload an image'
      ),
      'type' => 'file'
    ));

    echo $this->Form->input('username', array(
      'div' => array(
        'class' => 'span-8'
      ),
      'class' => 'input-text long',
      'label' => array(
        'text' => 'Username'
      ),
      'onsubmit' => 'return false;'
    ));

    echo $this->Form->input('email', array(
      'div' => array(
        'class' => 'span-8'
      ),
      'class' => 'input-text long',
      'label' => array(
        'text' => 'Email'
      ),
      'onsubmit' => 'return false;'
    ));

    echo $this->Form->input('name', array(
      'div' => array(
        'class' => 'span-8'
      ),
      'class' => 'input-text long',
      'label' => array(
        'text' => 'Name'
      ),
      'onsubmit' => 'return false;'
    ));

?>
        <div class="span-8 required">
            <label for="FonykerBirthdate">Birthdate</label>
            <input id="FonykerBirthdate" type="text" onsubmit="return false;" name="data[Fonyker][birthdate]" class="datepicker input-text long" enabled="false" value="<?php echo $this->data['Fonyker']['birthdate']; ?>">
        </div>
<?php

    $options = array('M' => 'M', 'F' => 'F');
    $attributes = array(
      'empty' => 'Gender',
      'class' => 'input-combo',
      'label' =>  array(
        'text' => 'Birthdate'
      )
    );

    echo $this->Form->select('gender', $options, NULL, $attributes);

    echo $this->Form->submit('Save', array(
      'class' => 'button medium blue',
      'id' => 'save-account-button'
    ));

?>
    <input id="FonykerId" type="hidden" name="data[Fonyker][id]" value="<?php echo $this->data['Fonyker']['id']?>">
<?php
    echo $this->Form->end();
?>
<div id="account-message" class="span-8" style="display: none;"></div>
</div>

Action:

function edit() {
      $this->layout = 'ajax';
      $this->autoRender = false;
      $this->Fonyker->recursive = -1;
      $response = null;

      if (!empty($this->data)) {
        $this->Fonyker->read(null, $this->data['Fonyker']['id']);
        pr($this->data);

        if ($this->Fonyker->save($this->data)) {
          $response = json_encode(array('ok' => true, 'msg' => 'Account information updated'));
        } else {
          $response = json_encode(array('ok' => false, 'msg' => 'Failed to update account'));
        }
      }

Model actsAs code:

var $actsAs = array(
    'MeioUpload' => array( 
      'image_url' => array(
        'dir' => 'img/profile_pictures',
        'create_directory' => true,
        'allowed_mime' => array('image/gif', 'image/jpeg', 'image/pjpeg', 'image/png'),
        'allowed_ext' => array('.jpg', '.jpeg', '.png', '.gif','.JPG'),
      )
    )
  ); 

The upload works fine in another part of my application but not in this case, any ideas?

      echo $response;
    }

Answer 1

The problem was that I was submitting the form via AJAX, when I serialized the form the file wasn't included with it, I'm new to web dev so I don't quite know the workings of everything yet, but it seems you can't submit the file through AJAX.

So I modified my code to work without the AJAX request and just submit the form normally with a POST and it worked fine.

Answer 2

Here are a couple of things I would check:

In your controller function, before you save, you might check the contents of $this->data['image_url'] and see if the error field is non-zero. The error codes are enumerated in the PHP manual and might give you a clue to the problem.

You might also test it without the MIME type restrictions in place. MeioUpload is probably(?) relying on the MIME type reported by the browser, which in turn is almost certainly based only on the filename extension—usually okay, but you never know. I've also known browsers (Safari, I think?) to report everything as application/octet-stream. (You can also use PHP's FileInfo, which determines MIME type based on file content.)

Somewhere to start, anyway.