Problems, need help? Have a tip or advice? Post it here.
5 posts Page 1 of 1

I create an app that uses intercooler.js for making page loads and updates dynamically. All data processing on the server uses CouchCMS. It works like a charm, but when I try to add a securefile editable, problems occur. I have no idea how to get my app working with file uploads.

The following code is a excerpt of my approach which uses intercooler.js to load all form data synamically. Probably I have not adapted all elements 100% properly in the shown code since my application is more complex and I'm trying to show only the relevant parts to get an idea how it works (except securefiles):

The page (simple placeholder page) "kontaktdaten.php":
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Kontaktdaten' executable='1' clonable='0' hidden='0' ></cms:template>
<!DOCTYPE html>
   <div class="wrapper">
      <section class="content" id="section-content">
         <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9">
               <div id="content-block"
                  ic-get-from="<cms:link masterpage='app.php' />kontaktdaten/"
                  <div class="box box-solid" id="box-kontaktdaten">
                     <div id="spinner-refresh-content-block" class="overlay" style="min-height: 528px;">
                        <i class="fa fa-spinner fa-pulse"></i>
   <!-- jQuery 2.2.3 -->
   <script src="<cms:show k_site_link />template/plugins/jQuery/jquery-2.2.3.min.js"></script>
   <!-- Bootstrap 3.3.6 -->
   <script src="<cms:show k_site_link />template/bootstrap/js/bootstrap.min.js"></script>
   <!-- intercooler.js -->
   <script src="<cms:show k_site_link />template/plugins/intercooler/intercooler-1.1.2.js"></script>
<?php COUCH::invoke(); ?>

The data template storing the data, "data.php":
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Contact data' executable='0' clonable='0' hidden='0' >

   <cms:editable order='1' type='text' name='name' label='Firmenname' required='0' />
   <cms:editable order='2' type='text' name='website' label='Webseite' required='0' />
   <cms:editable order='3' type='text' name='address' label='Adresse' required='0' />
   <cms:editable order='4' type='text' name='zip' label='PLZ' required='0' />
   <cms:editable order='5' type='text' name='city' label='Ort' required='0' />

   <cms:editable order='0' type='securefile' name='logo' label='Firmenlogo'
      allowed_ext='jpg, jpeg, png, gif'

<?php COUCH::invoke(); ?>

The web app (routable template handling the data stuff together with intercooler.js) "app.php":
Code: Select all
<?require_once( 'couch/cms.php' ); ?>
<cms:template title='Web App' executable='1' clonable='0' hidden='0' routable='1' >

   <!-- Kontaktdaten -->

<cms:match_route debug='0' is_404='1' />
<cms:embed "<cms:show k_matched_route />" />
<?php COUCH::invoke( K_IGNORE_CONTEXT ); ?>

The form snippet with the load/save logic (mainly data_bound_form) "kontaktdaten.html":
Code: Select all
<cms:pages masterpage='data.php'>
   <div class="box box-solid">

      <div class="box-header with-border">
         <h3 class="box-title">Kontaktdaten</h3>
      <!-- /.box-header -->
      <div class="box-body">
         <cms:set submit_success="<cms:get_flash 'submit_success' />" />
         <cms:if submit_success >
               header("X-IC-Script:$.notify({icon: 'fa fa-check fa-lg',title: '<b>Gespeichert:</b>',message: 'Die Kontaktdaten wurden gespeichert.',},{type: 'success'});");
            <cms:if k_success>
               <cms:if "<cms:not k_persist_error />">
                  <cms:set_flash name='submit_success' value='1' />
                  <cms:redirect "<cms:link masterpage='app.php' />kontaktdaten/" />
                     header("X-IC-Script:$.notify({icon: 'fa fa-ban fa-lg',title: '<b>Datenbank-Fehler:</b>',message: '<ul><cms:each k_persist_error><li><cms:show item /></li></cms:each></ul>',},{type: 'danger', delay: '10000'});");

            <cms:if k_error>
                  header("X-IC-Script:$.notify({icon: 'fa fa-ban fa-lg',title: '<b>Fehler beim Speichern:</b>',message: '<ul><cms:each k_error><li><cms:show item /></li></cms:each></ul>',},{type: 'danger', delay: '10000'});");

            <div class="row">
               <div class="col-xs-12 col-md-6">
                  <div class="row">
                     <div class="col-xs-12">
                        <div class="form-group form-group-sm<cms:if k_error_name> has-error</cms:if>">
                           <label class="control-label">Firmenname *</label>
                           <cms:input type="bound" name="name" class="form-control" />
                           <span class="help-block" id="nameMessage"><cms:if k_error_name><cms:show k_error_name /></cms:if></span>
                     <div class="col-xs-12">
                        <div class="form-group form-group-sm<cms:if k_error_website> has-error</cms:if>">
                           <label class="control-label">Webseite * <span style="font-weight: normal;" class="text-muted" >(vollständige URL inkl. http:// oder https://)</span></label>
                           <cms:input type="bound" name="website" class="form-control" />
                           <span class="help-block"><cms:if k_error_website><cms:show k_error_website /></cms:if></span>
                     <div class="col-xs-12 col-md-12">
                        <div class="form-group form-group-sm<cms:if k_error_address> has-error</cms:if>">
                           <label>Adresse *</label>
                           <cms:input type="bound" name="address" class="form-control" />
                           <span class="help-block"><cms:if k_error_address><cms:show k_error_address /></cms:if></span>
                     <div class="col-xs-4">
                        <div class="form-group form-group-sm<cms:if k_error_zip> has-error</cms:if>">
                           <label>PLZ *</label>
                           <cms:input type="bound" name="zip" class="form-control" />
                           <span class="help-block"><cms:if k_error_zip><cms:show k_error_zip /></cms:if></span>
                     <div class="col-xs-8">
                        <div class="form-group form-group-sm<cms:if k_error_city> has-error</cms:if>">
                           <label>Ort *</label>
                           <cms:input type="bound" name="city" class="form-control" />
                           <span class="help-block"><cms:if k_error_city><cms:show k_error_city /></cms:if></span>

            <div class="row">
               <div class="col-xs-12">

            <div class="row">
               <div class="col-xs-4 col-sm-3 col-md-3 col-lg-2 pull-right">
                  <button id="button-save-kontaktdaten"
                     ic-post-to="<cms:link masterpage='app.php' />kontaktdaten/"
                     ic-on-beforeTrigger="return $('#kontaktdatenForm').valid();"
                     type="submit" class="btn btn-primary btn-block">
                     Speichern <i id="edit-spinner" class="fa fa-spinner fa-spin" style="display:none"></i>

      <!-- /.box-body -->
      <div id="spinner-refresh-content-block" class="overlay" style="display:none;">
         <i class="fa fa-spinner fa-spin"></i>

   <!-- /.box -->

I would be happy if someone has a solution to add securefile upload while maintaining the intercooler.js ajax-approach.

When I am finished developing the application I will probably share the intercooler.js approach for others since it allows ajaxifying a CouchCMS frontend in an easy way making fully one page web apps.

I wonder what is the problem with a single securefile-bound input? If your form correctly submits databound form and updates data in backend successfully, then file upload should be also fine, imo.

For multiple uploads I had to do this viewtopic.php?f=2&t=10354&start=30#p27790
I also believe in good working demo playgrounds to make things work. If you can provide one, I'd step in to investigate. So far I just very briefly looked at the code and have no answer.

but when I try to add a securefile editable, problems occur.

We can start with description of the problems. :D
Hi trendoman

Now I have stripped down everything to a minimal set of files. Find the file here: In the real application I work with cloned pages ... but here it is only one flat data template. But the ajaxified approach with intercooler.js works fine in the example.

No we can just jump into the problem ... when trying to add the logo editable (securefile) to the data form snippet.
Hi olliwalli,

I have successfully installed your playdemo. So, I first checked what data is being sent by placing code to app.php and index.php.
Code: Select all
    error_log( print_r($_POST, true) );
    error_log( print_r($_FILES, true) );
    error_log( print_r($_GET, true) ); ?>
<?php require_once( 'admin/cms.php' ); ?>

When I temporarily disabled ajax filter in your route in app.php
Code: Select all
    <!-- Kontaktdaten -->

I could test if the form works at all - it indeed worked with 'bound' input type='securefile'. In server's php error_log I could see that $_FILES variable consists of uploaded file's data.

Submitting the form from index.php doesn't fill in the $_FILES variable of php, so I went to add some debug tools from intercooler.js by placing this to your snippet page.html
Code: Select all


      $(document).on('beforeAjaxSend.ic', function(event, ajaxSetup, elt){

        console.log( 'ajaxSetup:' );
        console.log( ajaxSetup );
        console.log( 'event:' );
        console.log( event );
        console.log( 'elt:' );
        console.log( elt );
        // Add a parameter = + "&timestamp_from_javascript=" + new Date().getTime().toString();

        // Add a custom HTTP header
        ajaxSetup.headers['X-My-Custom-Header'] = "A header value";

        // Add some custom data from the triggered element = + "&from_elt=" +'custom-data');


      $(document).on('beforeSend.ic', function(evt, elt, data, settings, xhr, requestId){

        console.log( 'evt' );
        console.log( evt );
        console.log( 'elt' );
        console.log( elt );
        console.log( 'data' );
        console.log( data );
        console.log( 'settings' );
        console.log( settings );
        console.log( 'xhr' );
        console.log( xhr );
        console.log( 'requestId' );
        console.log( requestId );



All in all, browser's console had submitted form data without any hints to 'multipart' thing, so I make a conclusion that IC.js doesn't send the form correctly.
After checking their github, there was some closed issue back ago when file uploading didn't work, but this had been resolved. I admit, this playdemo is way overcomplicated to test if the fileuploading ever works in IC.js.
Maybe you could create 2 simple php/html pages, without couchcms? Perhaps following their form samples from docs. Then we can see that a simple html form with a simple <input type="file" name="image"> works with intercooler. We don't need a form-receiving script, we just need to see if intercooler recognizes form's enctype correctly and submits FormData() correctly to php, which will be seen via checking $_FILES as in my first test.

I am not checking it myself, because I beleive this has nothing to do with CouchCMS :) It seems if you can make a regular html work with this 3d-party plugin - then it can be couchified without issues.

P.S. Regular ajax-code for submitting a form needs only several simple lines.
After some more hacking into intercooler-1.1.2.js file, I looked into its function
function getParametersForElement(verb, elt, triggerOrigin)
if ('form') && elt.attr('enctype') == 'multipart/form-data') {
data = new FormData(elt[0]);

This function shows that submitting files may work only if the element which has intercooler attributes is a form. So FormData is being set after js plugin recognized a form was submitted. In your sample, you have ic-attributes attached to a div, which had a form inside.
I think after implementing a form directly with ic-attributes, things should start rolling. Can you please test it?
5 posts Page 1 of 1

Who is online

In total there are 2 users online :: 1 registered, 0 hidden and 1 guest
(based on users active over the past 5 minutes)

Users browsing this forum: KK and 1 guest