2

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!

0

you cannot send the file directly to the form's action method like what you are doing there. The reason for this is that the jQuery fileuploader will only send the file, and chunked as well, so EE will not get title etc.

Basically you need to create an addon with its own action method where you handle the upload and then return some kind of ID which you can use to identify the file later. This you store in a hidden post variable. Then you need to hook onto e.g. "channel_form_submit_entry_start" and process the file and store it in the format you need (e.g. File or Assets) on submit.

So, it's an elaborate process ;-)

| improve this answer | |
0

Maybe take a look at Binder? It does the front end upload, not sure about progress bar mind you http://squarebit.co.uk/software/expressionengine/binder

| improve this answer | |

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.