I am using channel:form to allow users to upload an event listing. One of the fields is for an event poster which is a file field. It all works fine except the way it displays on the front end is not at all as expected and very confusing for the end user I would think. This is how it looks when it first loads up.

File Field on load

Seems strange that it starts with the file icon when none has been selected yet and it has the undo remove link when a file hasn't been removed.

Clicking the X on the image icon works as expected as does undo remove. If you actually use the browse button and select an image though there does not seem to be a way to remove it.

I read through whatever questions I could find on file fields on here and can confirm I am loading jquery 1.7.2 and there are no errors displayed on console.

Only other fields on the form are a wygwam field and a low events field.

Here is the template code for reference. Stash is being used to output the javascript at the end of the body after the jquery call.

        {if logged_in}
          {exp:channel:form channel="events-board" return="" include_jquery="no" include_assets="no"}
            <label for="title">Event Name</label>
            <input type="text" name="title" id="title" value="{title}" size="50" maxlength="100" onkeyup="liveUrlTitle();">

            <label for="cf_eventsEventField">Event Date</label> 

            <label for="cf_eventsLocation">Event Location</label>
            <input type="text" name="cf_eventsLocation" id="cf_eventsLocation" value="{cf_eventsLocation}">

            <div class="nofloats">
              <label for="cf_eventsPosterDownload">Event Poster File</label>
              <p>A high quality pdf or jpg is preferred. Our board is 1024 X 1280px at 72dpi any other poster size may be modified to fit. This field is optional but your event is more likely to be included on the events board if it has a quality poster attached to it.</p>

            <label for="cf_eventsWebDescription">Event Description</label> 

            <input type="submit" name="submit" value="Submit">
            {exp:stash:set name="saef_assets"}{channel_form_assets}{/exp:stash:set}
  • @StephenCallender Can you move your solution to an answer?
    – Anna_MediaGirl
    Nov 5, 2013 at 16:58
  • thanks for the input Stephen. I had read both of those posts and they don't apply (unless I am missing something) I am running jquery 1.7.2 so that is not the issue. The bug seems specific to grid but I tried the fix anyway just to see. I removed both the low events and wygwam fields to see if they were the issue. I dont have any custom buttons anyway like it is referring to. I also display no errors in console. I also checked for safecracker left in the modules or extensions and the file system and found none.
    – Phil
    Nov 5, 2013 at 17:39
  • @Anna_MediaGirl I can't because it has too few characters. :) Nov 5, 2013 at 18:45
  • 1
    Looking at your source I notice that the elements that you are objecting to are in divs with class="js_hide". This seems to suggest the element should be hidden by a javascript function. Are you missing one? I am not seeing any errors in the console.
    – AllInOne
    Nov 6, 2013 at 3:28


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.