How to Implement File Upload Progress Bar with BlueImp JQuery File Upload and Channel Form?

By | May 5, 2014

I have trouble combining Channel Form and BlueImp JQuery File Upload (https://github.com/blueimp/jQuery-File-Upload/).

I always getting "Your channel entry must have a title." although I have set the value of Title in HTML.

Basically I have these:

HTML:

{exp:channel:form channel="artworks" include_assets="no" include_jquery="no" json="yes" return="register/step3/{segment_3}"  class="artwork-form"}
  <input type="file" class="fileupload" data-directory="6" data-content-type="all" value="" name="artwork_image">
  <input type="text" class="form-control artwork_title" placeholder="Title" name="title" value="Title">
{/exp:channel:form}

JS:

$('.fileupload').fileupload({
            dataType: 'json',
            formData: $(this).closest('form.artwork-form').serialize(),
            add: function(e, data){
               var form = $(this).closest('form.artwork-form');

                $.each(data.files, function (index, file) {
                    form.find('.artwork_title').val(file.name);
                });

                data.submit();
            },
            submit: function(e, data) {
                var form = $(this).closest('form.artwork-form');
                data.formData = form.serialize();
                console.log(data.formData);

            },
    });

Here's what I see in firebug: Params:

ACT 7
RET http://localhost/register/step3test/263
URI register/step3test/263
XID 
author_id   3
channel_id  13
entry_id    263
meta    VjpdYFRjVDNWPVEsACcFblFkBD5ZIVd+U3YD.... (cutted)
return  register/step3/263
return_url  register/step3/263

POST:

----------------------------22998389620162591192122547020 Content-Disposition: form-data; name="artwork_image"; filename="debate-ad.jpg" Content-Type: image/jpeg ÿØÿá�Exif��II

Response:

{"success":0,"errors":{"title":"Your channel entry must have a title.","url_title":"Unable to create valid URL Title for your entry"},"field_errors":[],"entry_id":false,"url_title":false,"channel_id":false}

Is there anything I missed?

Thanks a lot for your help!