How do I implement an Ajax implementation on a Channel Form, especially when there is a file needed to be uploaded?

I look at an example, but I don't think I really understand how it works.

  • Could you be more descriptive? What about it don't you understand? I've personally implemented the example on the docs and it worked splendidly. Are you including jquery.form.js? Mar 7, 2014 at 19:02
  • The example here only shows text inputs. What happens if I have a file input? Mar 8, 2014 at 1:10
  • It's exactly the same. No alterations are needed. Below is an answer. Mar 8, 2014 at 1:23

1 Answer 1


I tested this and it works just fine. Be sure to include the title input with valid data. If you're still having trouble, be sure to check the console log data object. If you dig around you'll probably find the pertinent error.

<!DOCTYPE html>
<head> ... </head>
{exp:channel:form channel="your_channel" json="yes"}
    <input id="title" name="title" />

    <input type="submit" name="submit" value="Submit">

<script src="https://code.jquery.com/jquery.js"></script>
<script src="/path/to/jquery.form.js"></script>
{!-- jquery.form.js can be found at http://malsup.github.io/jquery.form.js --}

<script type="text/javascript">
    $(document).ready(function() {
            dataType: 'json',
            success: function(data) {
                if (data.success) {
                    // success!
                } else {

Also, because you didn't specify, be sure you're using an instance of EE that supports Channel Form instead of Safecracker. I just checked the docs to 2.7.3 and it looks like files upload in Channel Form were included in 2.7.*.

The File fieldtype is now compatible with Channel Form.

So if you have an instance that's older, file upload via channel form might not work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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