3

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.

5

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.