Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Form Questions /

How to call an Uploadify field in costumized form?


Reply


6 Posts   1473 Views

Avatar
poblom

Community Member, 25 Posts

18 September 2011 at 2:59am

Hi,

How would you call an Uploadify field to be used in a costumized front end form? I'm aware of the function $dataFieldByName() which works well for most of my fields but it can't handle Date fields or an Uploadify field. I have managed to get the date fields working by calling all the necessary js and hard coding the metadata but what about an uploadify field? Calling all the js files makes the field appear but without the metadata no functionality. Is this even possible?

By letting Silverstripe scaffold the form it works well and I can achieve most of what I want by some css manipulating and jQuery but it would be so much cleaner if I could build my own template from ground up.

Avatar
Ryan M.

Community Member, 309 Posts

18 September 2011 at 11:10pm

Can you paste your controller code? I'll tell you where to add the Uploadify field.

Avatar
poblom

Community Member, 25 Posts

19 September 2011 at 5:42am

Edited: 19/09/2011 5:48am

Hi, and thanks for answering.

I have pasted here relevant parts of my controller and also parts of my template to further illustrate what i want to do.

By calling the form the "usual" way like below everything works well. My datefields and uploadify field works as expected. The problem with this approach is that costumising the form layout is, not impossible but, quite dounting.

<div class="typography">
      
   <h1>$Title</h1>
   <div id="FormContainer">
      
      $ApplyForm
   
   </div>
</div>

What I would like is to "handcraft" my form template using $dataFieldByName() to render individual fields. This works fine for regular data fields but how to call a uploadify field. I have had some success calling it the way you can see in the template code by also calling all the js and by hardcoding metadata into the the template UploadifyField.ss. My question really is - Is there a correct way to call that field that makes it work in all its glory in a handcrafted front end form??

Found a quite similar problem here: [url]http://www.silverstripe.org/general-questions/show/14452[/url]

Part of the controller

class ApplicationPage_Controller extends Page_Controller
{

   public function init() {
      parent::init();
   /* Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.js'); */
/*
   Requirements::javascript(SAPPHIRE_DIR . '/javascript/jquery_improvements.js');   
   Requirements::css(THIRDPARTY_DIR . '/jquery-ui-themes/smoothness/jquery.ui.all.css');
   Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/jquery.ui.core.js');
   Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/jquery.ui.datepicker.js');
   Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/i18n/jquery.ui.datepicker-sv.js');   
   Requirements::javascript(THIRDPARTY_DIR . "/jquery-metadata/jquery.metadata.js");
   Requirements::javascript(SAPPHIRE_DIR . "/javascript/DateField.js");
   
   Requirements::javascript("uploadify/javascript/swfobject.js");
   Requirements::javascript("uploadify/javascript/uploadify.js");
   Requirements::javascript(THIRDPARTY_DIR."/jquery-livequery/jquery.livequery.js");
   Requirements::javascript("uploadify/javascript/uploadify_init.js");
   Requirements::themedCSS("uploadify");
*/
   Requirements::javascript("themes/mytheme5/javascript/formlegend.js");
   }
      

   protected function ApplyForm() {
      
      $firstName = new TextField('FirstName', 'Förnamn');
      $firstName->addExtraClass('mytext');
      $lastName = new TextField('LastName', 'Efternamn');
      $lastName->addExtraClass('mytext');
// Lots of other fields here
      $supplements = new MultipleFileUploadField('Supplements', 'Ladda upp bilagor');
      $supplements->setFileTypes(array('doc','docx','xls','xlsx','pdf'));
      /* $supplements->uploadOnSubmit(); */
      
      $fields = new FieldSet(
         $firstName,
         $lastName,      
         // Lots of other fields
         $supplements
         );
         
      $send = new FormAction('doApply', 'Skicka ansökan');
      $actions = new FieldSet($send);
      $validator = new RequiredFields(
         $firstName,
         $lastName
         );
      
      return new Form($this, 'ApplyForm', $fields, $actions, $validator);
   
   }

   
   public function doApply($data, $form) {
      $form->saveInto($application = new Application());
      $application->write();
      return array (
         'Application' => $application
      );

   }
   
}

And some template code

<% control ApplyForm %>

         <form $FormAttributes>
            <% if Message %>
               <p id="{$FormName}_error" class="message $MessageType">
               $Message
               </p>
            <% else %>
               <p id="{$FormName}_error" class="message $MessageType"></p>
            <% end_if %>
            
            <fieldset>
            <legend class="forminfo">&nbsp;&nbsp;Basinformation&nbsp;&nbsp;</legend>
            <div id="FirstName" class="field text group">
               <label class="left" for="Form_ApplyForm_FirstName">
               Sökandens förnamn<span class="required">*</span>
               </label>
            
               <div class="middleColumn textColumn">
               $dataFieldByName(FirstName)
               </div>
            
            </div>
            
            <div id="LastName" class="field text group">
               <label class="left" for="Form_ApplyForm_LastName">
               Sökandens efternamn<span class="required">*</span>
               </label>
            
               <div class="middleColumn textColumn">
               $dataFieldByName(LastName)

               </div>
            
            </div>

         <!-- Loads of other fields here -->

            <div id="Supplements" class="field UploadifyField group">
               <label class="left" for="Form_ApplyForm_Supplements">
               Ladda upp bilagor<span class="required">*</span>
               </label>
            
               <div class="middleColumn smallColumn">                  
<% include UploadifyField %>
               </div>
               
            </div>
      
            </fieldset>
            $dataFieldByName(SecurityID)
            <% if Actions %>
               <div class="Actions">
                  <% control Actions %>$Field<% end_control %>
               </div>
            <% end_if %>
         </form>

<% end_control %>

Avatar
Ryan M.

Community Member, 309 Posts

19 September 2011 at 8:00am

You seem to be customizing it the correct way. I'd probably wait until UncleCheese notices this thread and provides his own insight.

Avatar
chillburn.com.au

Community Member, 12 Posts

5 January 2012 at 5:27am

from my understanding, the $dataFieldByName(field) looks for a function called Field which renders the form element. this doesn't exist on the uploadify class. The uploadify class is using the function FieldHolder

what you can do is add the following function to the uploadify class.

this is in the uploadify/code/UploadifyField.php

abstract class UploadifyField extends FormField
{
...
public function Field() {
return $this->FieldHolder();
}
...
}

However, when i upload a file, i get a HTTP error. I don't know if this is to do with the facebook connect module or if its something else. Uploadify does work in the admin tho, just not the front end. I haven't tried this without facebook connect.

Avatar
chillburn.com.au

Community Member, 12 Posts

5 January 2012 at 6:45am

just found out that u can use $dataFieldByName(field).FieldHolder so there is no need to change the code.