Safecracker File Field in Matrix

Question

I have created a Safecracker form that uses CKEditor to allow users to update the content of a page. Within this page, I have a slider which displays one Matrix row at a time - an image in one column and a text field in a second.

As I'm trying to keep the form as visually consistent with the actual page as possible, I'd like to be able to separate the Matrix into two individual fields for editing. I've been able to accomplish this with two text fields, but can't seem to figure out how to make it work with the Safecracker file field.

<ul class="slides">
  {orgs}
    <li>
      <div class="span6" style="background-image:url({image}); height:335px;">
    <div class="chng">
          {field:orgs[row_id_{row_id}][col_id_61]}
    </div>
  </div>

  <div class="span6">
    <div class="padding-left" contenteditable="true" id="orgs[row_id_{row_id}][col_id_62]">
      {description}
    </div>
  </div>
    </li>
  {/orgs}
</ul>

Here is the code I currently have. The {orgs} tag loops through the matrix. I would expect that the {field:orgs....} would make the Safecracker file upload field appear, but alas it does not.

I'm hoping this is a relatively easy fix and I'm just not looking for an answer in the right places. :)

Answer 1

Try this guide:

http://bluefishdesignstudio.com/blog/article/breaking-up-a-matrix-field-for-use-in-a-safecracker-form

Basically you'll need to do two things:

1. Manually create your inputs and name them appropriately (something like your_file_field_name[row_new_0][col_id_61] and description[row_new_0][col_id_62])

2. Write your own JavaScript logic to add and remove matrix rows and increment the numbers on your input names.