Joomla 3.0 custom module: file upload on ajax submitted form

Question

Currently I'm developing a custom module, containing a form and submitted 'through' ajax.

the field

<input type="file" id="file" name="file" accept="image/*" disabled="disabled" />

ajax submit (with json)

$.ajax({
        type: "POST",
        url: "modules/mod_custom_form/submit_form.php",
        data: dataString,
        dataType: "JSON",
        timeout: 6000,
        success: function(response) {
            // on success
            if (response.success === 1) {                
                  $('#customForm').html("<div id='message'></div>"); 
              $('#message').html("<h2>Form sent!</h2>")
              .append("<p>More text.</p>")
              .hide()
              .fadeIn(1500, function() {
                $('#message').append("<img id='checkmark' src='modules/mod_custom_form/images/check-icon.png' />");
              }); 
            } 
            // on failure
            else {
                $('#customForm').html("<div id='message'></div>"); 
              $('#message').html("<h2>Failure.</h2>");
            }
        }
      });

submit_form.php file

// no direct access
define('_JEXEC', 1);
define( 'DS', DIRECTORY_SEPARATOR );
define( 'JPATH_BASE', $_SERVER[ 'DOCUMENT_ROOT' ] );

require_once( JPATH_BASE . DS . 'includes' . DS . 'defines.php' );
require_once( JPATH_BASE . DS . 'includes' . DS . 'framework.php' );
require_once( JPATH_BASE . DS . 'libraries' . DS . 'joomla' . DS . 'factory.php' );
$mainframe =& JFactory::getApplication('site');

// sender email
$email = 'maarten@mail.com';
$subject = 'Aanvraag';
// create the header array
$headers   = array();
$headers[] = "MIME-Version: 1.0";
$headers[] = "Content-type: text/html; charset=iso-8859-1";
$headers[] = "From: beheer <maarten@mail.com>";
$headers[] = "Bcc: beheer <maarten@mail.com>";
$headers[] = "Reply-To: Recipient Name <receiver@domain3.com>";
$headers[] = "Subject: {$subject}";
$headers[] = "X-Mailer: PHP/" . phpversion();

// get all posted data and put them in variables
$bedrijfsnaam = $_POST['bedrijfsnaam'];
$_FILES = $_POST['uploaded_file'];

// create the full message
$message = 'email';

// send mail
if (mail($to, $subject, $message, implode("\r\n", $headers))) {
    //save file function
    getInput($_FILES);
    // return message
    echo json_encode(array('success' => 1));
    // insert the email into the database
    $database =& JFactory::getDBO();
    $query = "INSERT INTO #__email_forms (mid, email, message) VALUES ('2', 'myemail@mail.com', '$message')";
    $database->setQuery($query);
    $database->query();
}
else {
    echo json_encode(array('success' => 0));
}

How would I implement the possibility to upload a file and save the form with ajax? I've been looking for hours, but haven't found anything useful so far.

Thanks in advance for your advice.

do you have both the file in the same folder? Post the code of submitform.php — Toretto, Mar 21 '13 at 14:00
I'm not exactly sure what you mean, I want to save the files in the media or images folder. The form file and submit_form.php file are located in the same module folder. — Maarten Hartman, Mar 21 '13 at 14:05
Post the code of submitform.php. and what data you got when you try to print it in submit-form.php. — Toretto, Mar 21 '13 at 14:20
ok, updated :) when I alert the value of the uploaded_file field I get this: uploaded_file=C:\fakepath\banner vierkant NL.jpg — Maarten Hartman, Mar 21 '13 at 14:26
Which of the detailed descriptions obtained when searching google for !ajax file upload" didn't give you the answer? Can you explain why the link from http://stackoverflow.com/questions/6541155/ajax-file-upload didn't give you everything you needed? — Captain Payalytic, Mar 21 '13 at 14:45
yes it does. The reason that link didn't give me everything I needed is that I use Joomla. Implementing jquery and or ajax is easy, making it work with joomla is a different story. — Maarten Hartman, Mar 21 '13 at 15:34
you can't use a module url in your ajax request. this can only be done using components. I would also recommend you get rid of the `&` symbols and also stick to Joomla coding standards instead of using things such as `$_POST['uploaded_file'];` ;) — Lodder, Mar 21 '13 at 17:08
@Lodder are you sure? I got it all working except for the file upload. Thanks for the recommendations though — Maarten Hartman, Mar 22 '13 at 08:28

score 3 · Answer 1 · answered Mar 21 '13 at 19:44

Ajax uploading of files is a tricky thing, especially if you have session data involved to ensure that the user uploading is actually permitted to do so. It get's even more dangerous when it's a public upload, as you need to do a lot more server side validations.

What I typically use for ajax upload is the Ajax File Uploader by valums here: https://github.com/valums/file-uploader

It's pretty straightforward to get running, and it has a jQuery plugin for it as well to make it even simpler (since you're already using jQuery).

Joomla 3.0 custom module: file upload on ajax submitted form

1 Answers1

Linked