Submitting a Form with file inputs via AJAX

Question

I am finding a way to submit the form which contains a file input along with some other text inputs.

view This is a simple view with a text box, file box and hidden boxes

<form method="post" name="adminForm" id="profile-form" enctype="multipart/form-data" >
  <input type='text' value='hello1'>
  <input type='file' name='profileimage'>
  <input type='button' id='btnimageadd' value='Upload'/>
  ...
  ....
  <input type='hidden' name='task' value='' />
  <input type='hidden' name='option' value='com_mycomponent' />
  <?php echo JHtml::_('form.token'); ?>
</form>

controller Controller method to catch the ajax request and pass to model for processing

public function profilePictureUpload(){
  JRequest::checkToken() or die( 'Invalid Token' );
  $model = $this->getModel();
  $response = $model->uploadPicture();
  JFactory::getDocument()->setMimeEncoding( 'application/json' );
  echo $response ;
  JFactory::getApplication()->close();

  return;
}

model Actual model to do the processing. For debugging purposes I just put a print_r for the formdata to check whether all data on the form reaching the server.

public function uploadPicture() {
   $input = JFactory::getApplication ()->input;
   $formdata = $input->get ( 'jform', '', 'array' );
   print_r($formdata);
   return;
}

Ajax This will get trigger when the button is clicked. This is to submit the form to the server to do the image upload.

jQuery('#btnimageadd').on('click', (function(e){
  jQuery('#task').val('profile.profilepictureupload');
  var dataString = jQuery("#profile-form").serialize();

  jQuery.ajax({
    url: "index.php",
    type: "POST",
    data:  dataString,
    cache: false,
    processData:false,
    success: function(result){
      console.log(result);
    },
    error: function(result){
      console.log(result);
    }
  });
});

Problem

When I submit the form via AJAX in the above method only the text and hidden elements are only submitted to the form but not the selected image file.

While googling I found an another thread which explains a way to submit the form with all input types. However I am not able to make it work inside Joomla.

https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax

Can some help me on this.

Answer 1

I managed to make it work. Sharing the same which can help others.

No change on the form and controller. Slight changes on the model and ajax

model

public function uploadPicture() {
  $input = JFactory::getApplication ()->input;
  $formdata = $input->get ( 'jform', '', 'array' );
  $filedata = $input->files->get ( 'jform' );
  print_r($filedata);
  print_r($formdata);
  return;
}

Ajax

jQuery('#btnimageadd').on('click', (function(e){
    jQuery('#task').val('profile.profilepictureupload');
    Joomla.submitform('', document.getElementById('profile-form'));
});

jQuery('form#profile-form').submit(function(){

  jQuery('#ajax_loader_image_4').show();

  var formData = new FormData(jQuery(this)[0]);
  jQuery.ajax({
    url: "index.php",
    type: "POST",
    data:  formData,
    async: false,
    cache: false,
    contentType:false,
    processData:false,
    success: function(result){
        console.log(result);
    },
    error: function(result){
        console.log(result);
    }
  });

  return false;
});

Basically the button click will submit the form and AJAX will be triggered on page submit. The return false will not do the page refresh.