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.