I’ve followed the AjaxUpload documentation and added all the required elements but the form keeps showing just the plain text buttons “upload” & “delete all”. The buttons don’t trigger the upload screen? In de network and console panel they don’t seem to be doing anything?
[[!FormIt?
&preHooks=`Formit2AjaxUpload`
&hooks=`AjaxUpload2Formit,AjaxUploadAttachments,spam,email,redirect`
&ajaxuploadFieldname=`image`
&ajaxuploadTarget=`../uploads/offerte-uploads/`
&ajaxuploadUid=`image`
&emailTpl=`offerteMail`
&emailSubject=`Offerteaanvraag van [[+name]]`
&emailTo=`X`
&emailBCC=`X`
&emailFrom=`X`
&emailReplyTo=`[[+email]]`
&redirectTo=`14`
&validate=`name:required,adres:required,woonplaats:required,telefoon:required,email:required,product:required,typezonwering:required,bediening:required,montage:required,upload:required,workemail:blank,hoogte:required,breedte:required`
]]
<form action="[[~[[*id]]]]" method="post" enctype="multipart/form-data">
<div class="row half collapse-at-2">
<div class="6u">
[[!+fi.error.name]]
<input type="text" name="name" id="name" placeholder="Naam*" value="[[!+fi.name]]"/>
</div>
[[getChildIds? &parent=`2` &depth=`1`]]
<div class="6u">
[[!+fi.error.adres]]
<input type="text" name="adres" id="adres" placeholder="Adres*" value="[[!+fi.adres]]"/>
</div>
</div>
<div class="row half collapse-at-2">
<div class="6u">
[[!+fi.error.woonplaats]]
<input type="text" name="woonplaats" id="woonplaats" placeholder="Woonplaats*" value="[[!+fi.woonplaats]]"/>
</div>
<div class="6u">
[[!+fi.error.telefoon]]
<input type="text" name="telefoon" id="telefoon" placeholder="Telefoon*" value="[[!+fi.telefoon]]"/>
</div>
</div>
<div class="row half collapse-at-2">
<div class="6u">
[[!+fi.error.email]]
<input type="email" name="email" id="email" placeholder="E-mail*" value="[[!+fi.email]]"/>
</div>
<div class="6u">
[[!+fi.error.product]]
<select class="selectbox" name="product" value="[[!+fi.product]]">
<option value="">Soort product*</option>
[[pdoResources? &parents=`2` &depth=`0` &limit=`0` &tpl=`productNameRow` &sortby=`menuindex` &sortdir=`ASC`]]
</select>
</div>
</div>
<div class="row half collapse-at-2">
<div class="6u">
[[!+fi.error.typezonwering]]
<select class="selectbox" name="typezonwering" value="[[!+fi.typezonwering]]">
<option value="">Type zonwering*</option>
[[pdoResources? &parents=`2` &depth=`2` &resources=`-4, -15, -16, -17, -47` &limit=`0` &tpl=`productNameRow` &sortby=`menuindex` &sortdir=`ASC`]]
</select>
</div>
<div class="6u">
[[!+fi.error.bediening]]
<select class="selectbox" name="bediening" value="[[!+fi.bediening]]">
<option value="">Soort bediening*</option>
<option value="handmatig" [[!+fi.bediening:FormItIsSelected=`handmatig`]]>Handmatig</option>
<option value="electrisch" [[!+fi.bediening:FormItIsSelected=`electrisch`]]>Electrisch</option>
<option value="afstandsbediening" [[!+fi.bediening:FormItIsSelected=`afstandsbediening`]]>Afstandsbediening</option>
<option value="geenvoorkeur" [[!+fi.bediening:FormItIsSelected=`geenvoorkeur`]]>Geen voorkeur</option>
</select>
</div>
</div>
<div class="row half collapse-at-2">
<div class="6u">
[[!+fi.error.montage]]
<select class="selectbox" name="montage" value="[[!+fi.montage]]">
<option value="">Montage*</option>
<option value="Ja" [[!+fi.montage:FormItIsSelected=`Ja`]]>Ja</option>
<option value="Nee" [[!+fi.montage:FormItIsSelected=`Nee`]]>Nee</option>
</select>
</div>
<div class="6u">
[[!AjaxUpload?
&uid=`image`
&allowedExtensions=`jpg,jpeg,png,gif`
&thumbX=`75`
&thumbY=`75`
]]
</div>
</div>
<div class="row half collapse-at-2">
<div class="6u">
[[!+fi.error.breedte]]
<input type="number" name="breedte" id="breedte" placeholder="Breedte*" value="[[!+fi.breedte]]"/>
</div>
<div class="6u">
[[!+fi.error.hoogte]]
<input type="number" name="hoogte" id="hoogte" placeholder="Hoogte*" value="[[!+fi.hoogte]]"/>
</div>
</div>
<div class="row half">
<div class="12u">
[[!+fi.error.message]]
<textarea name="message" id="message" placeholder="Opmerkingen" rows="5" value="[[!+fi.message]]"></textarea>
</div>
</div>
<input type="hidden" name="workemail" value="" />
<div class="row half">
<div class="12u">
<input type="submit" class="button alt" value="Verstuur bericht" />
</div>
</div>
</form>