Graphical asset-select for Safecracker

Question

I want to give my client the ability to visually select a file from one of my file-folders in safecracker. I was thinking of using an embed with {exp:assets:files} loop in there, something along these lines:

{exp:assets:files folder_id='1' kind='image'}
    <li><a href="#" data-url="{url}"><img src="{url}" alt="{filename}"></a></li>
{/exp:assets:files}

Now what would I feed back to the safecracker-form in order for my assets-field in this entry to be updated with the file I just clicked? Should I feed the file's url to a hidden <input> element?

Thanks,

• Steven

Answer 1

currently there's no way to do what you want that I can think of, but I like the idea. Seeing as we have Assets 2.1 in development, I'll have a chat with Brandon and we'll see what we can come up with to make you happy.

Cheers, Andris

Answer 2

I think it's probably going to be a bit more complex than that. Assets may be doing that work with JavaScript rather than just routing a selected file to a field.

I would recommend opening up Firebug in Firefox or Developer Tools in Chrome or Safari, and instantiating a full-blown Assets field in your Safecracker template. You can then see:

• The HTML it generates for the dynamic form field
• The JavaScript references and any inline script it bundles into the form
• What happens when you actually select a file and where that's stored until the form is submitted

You'll then have a sense of what you need to reproduce on your end to accomplish your goal.

I've never done this with Assets. We've done it with Matrix, where it's just a matter of adding sets of form fields with a new fieldname convention. I suspect Assets is going to go a little deeper, though.