I'm running into an issue when trying to use data bound forms with image uploads. Everything is working fine on the back end (mysite.com/couch), but on the front end clicking on 'Browse Server' yields no KCEditor pop-up and they styling of the input is way out of whack. I've tried with and without Bootstrap 3 classes applied with no change.

profile.php code

Code: Select all

<div class="row">                  
  <div class="col-md-6">
    <div class="form-group">
      <label for="extended_user_avatar">Avatar:</label>
      <cms:input name='extended_user_avatar' id='extended_user_avatar' type='bound' class='form-control' trust_mode='1' />
      <!-- <input type="file" id="extended_user_avatar" class="form-contorl" /> -->
      <span class="help-block">
      <small>
        <strong>Maximum dimensions:</strong> 90&times;90 px<br />
        <strong>Maximum file size:</strong> 6.00 KiB.<br />
        <strong>Select a style for your avatar to the right.</strong>
      <small>
      </span>
    </div>
  </div>
  <div class="col-md-3 text-center">
    <img src="<cms:show extended_user_avatar_thumbnail />" class="img-thumbnail" alt=""><br />
    <input type="radio" name="avatar_display" id="avatar_square" value="square">
  </div>
  <div class="col-md-3 text-center">
    <img src="<cms:show extended_user_avatar_thumbnail />" class="img-thumbnail img-circle" alt=""><br />
    <input type="radio" name="avatar_display" id="avatar_circle" value="circle">
  </div>
</div>

users/index.php code

Code: Select all

    <cms:editable
      name="extended_user_avatar"
      label="Avatar"
      desc="Upload an image to use as your avatar"
      width="90"
      height="90"
      crop="1"
      type="image"
    />

   <cms:editable
      name="extended_user_avatar_thumbnail"
      label="Avatar Thumbnail"
      width="90"
      height="90"
      show_preview="1"
      assoc_field="extended_user_avatar"
      type="thumbnail"
   />

dbform.png (17.63 KiB) Viewed 2247 times

What I'm hoping to achive (with image instead of file) is:

dbform_layout.png (14.74 KiB) Viewed 2244 times

[KK]

@Sn3aKyGuY, editable regions of type 'image' and 'file' are not meant to be used databound on the front-end. Please use type 'securefile' instead.

Thanks, KK. After posting this I found a few other threads that I'd overlooked and got it figured out on my own.

However, I'm not able to figure out how to upload the image via securefile type so that the user can preview it before saving the entire db form. Is it possible to nest a db forms or submit a single field via an ajax call? The problem is the user currently would need to select the image they wish to upload then save the entire form before being able to see a live preview of the image so that they can choose their avatar style.

As an example

Code: Select all

<cms:form 
   masterpage=some_template 
   mode='edit'
   page_id=k_user_id
   enctype="multipart/form-data"
   method='post'
   anchor='0'
>

   <cms:if k_success >
      ...blah blah blah...
   </cms:if>

   <cms:if k_error >
      ...blah blah blah...
   </cms:if>
   
   Some Field 1:
   <cms:input name='some_field1' type='bound' />

   Some Field 2:
   <cms:input name='some_field2' type='bound' />

      <cms:form 
         masterpage=some_template 
         mode='edit'
         page_id=k_user_id
         enctype="multipart/form-data"
         method='post'
         anchor='0'
      >
      
         <cms:if k_success >
            ...blah blah blah...
         </cms:if>

         <cms:if k_error >
            ...blah blah blah...
         </cms:if>

         Some SecureFile Field:
         <cms:input name='some_securefile_field' type='bound' />

         <input type="submit" name="submit" value="Upload" />

      </cms:form>

   <input type="submit" name="submit" value="Save" />

</cms:form>

[KK]

The way securefile works, it will show you the preview of the image *without* having to save the form.
Please test this out first in the admin-panel to see what I mean.

Hope it helps.

The preview that the user is seeing is generated after the file is uploaded with:

Code: Select all

<div class="col-md-3 text-center">
  <!-- <img src="http://placehold.it/90x90" class="img-thumbnail" alt=""><br /> -->
  <cms:pages masterpage='users/index.php' id=k_user_id>
    <cms:show_securefile 'extended_user_avatar'>
      <img src="<cms:cloak_url link=file_id />" class="img-thumbnail" alt=""><br />
    </cms:show_securefile>
  </cms:pages>
  <input type="radio" name="avatar_display" id="avatar_square" value="square">
</div>
<div class="col-md-3 text-center">
  <!-- <img src="http://placehold.it/90x90" class="img-thumbnail img-circle" alt=""><br /> -->
  <cms:pages masterpage='users/index.php' id=k_user_id>
    <cms:show_securefile 'extended_user_avatar'>
      <img src="<cms:cloak_url link=file_id />" class="img-thumbnail img-circle" alt=""><br />
    </cms:show_securefile>
  </cms:pages>
  <input type="radio" name="avatar_display" id="avatar_circle" value="circle">
</div>

avatarupload.png (37.53 KiB) Viewed 2240 times

Took your advice and tried it in the Admin Panel, still not getting a preview:

Code: Select all

<cms:editable
   name="extended_user_avatar"
   label="Avatar"
   desc="Upload an image to use as your avatar"
   allowed_ext="jpg, jpeg, png, gif"
   max_size="2048"
   width="90"
   height="90"
   crop="1"
   show_preview="1"
   type="securefile"
/>

avatarpreview.png (5.39 KiB) Viewed 2239 times

[KK]

Please see the following post. I think you'll find it useful -
https://www.couchcms.com/forum/viewtopi ... 830#p12865

Maybe this front end trick and a little DBF tweaking will solve the problem Only on front end.

Use the Image field as:

Code: Select all

<img id="avatar" src="#" alt="Display Uploaded Image before Form Submission" />
<input name='avatar' type='text' onchange="readURL(this);" />

Use this in Script tags:

Code: Select all

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script>
function readURL(input) {
   if (input.files && input.files[0]) {
      var reader = new FileReader();
            
      reader.onload = function (e) {
         $('#avatar')
            .attr('src', e.target.result)   
         };
      reader.readAsDataURL(input.files[0]);
   }
}
</script>

with the CouchCMS tags i suppose it should have:

Code: Select all

<cms:input name='avatar' type='bound' onchange="readURL(this);" />

with editable region as:

Code: Select all

<cms:editable name='avatar' label='Avatar' type='securefile' />

I have not tested it, but i suppose it should solve your problem at the front end!

Regards,
GenXCoders

EDIT #1: I have used it in a few projects lately and have found that it is working.