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.
1 Answer
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>
<html>
<head> ... </head>
<body>
{exp:channel:form channel="your_channel" json="yes"}
<input id="title" name="title" />
{field:your_file_upload_channel_field}
<input type="submit" name="submit" value="Submit">
{/exp:channel:form}
<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() {
$('#publishForm').ajaxForm({
dataType: 'json',
success: function(data) {
if (data.success) {
// success!
} else {
console.log(data);
}
}
});
});
</script>
</body>
</html>
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.
jquery.form.js?