0

I have to display some selectable images in an apex:repeat. The user can upload as many images as they need (the images are uploaded to AWS S3).

When a new image is uploaded I need to refresh the apex:outputPanel that contains the apex:repeat in order to see the image just uploaded, but its not working. (it works fine with an apex:actionPoller)

A short version of my visualforce page:

<apex:form >
    <apex:actionFunction name="fileUploaded" reRender=“some-id” />
</apex:form>

<apex:outputPanel styleClass="box" id=“some-id”>
    <apex:repeat value="{!media}" var="m">
        <label class="template" for="{!m.Id}">
            <input id="{!m.Id}" type="radio" name="thumbSelected" value="{!m.Preview_Link__c}" />
             <img src="{!m.Preview_Link__c}" height="60px" alt="{!m.Name}"/>
        </label>
    </apex:repeat>
</apex:outputPanel>

 <form action=“some_url” method="post" enctype="multipart/form-data" >
    //Some stuff here
    <input type="file" size="255" name="file" />
    <input class="btn" type="submit" value=“Upload” onclick="fileUploaded()" />
</form>

I tried the answers on this (1, 2) questions, but still doesn't work.

10
  • Have you tried putting your ouputpanel inside the apex:form tags? May 29 '14 at 21:57
  • Just tried putting it inside an apex:form, didn't work. @Bachovski
    – Jose
    May 29 '14 at 22:04
  • 1
    I think you're calling the fileUploaded() function too soon and it executes/rerenders before you even posted the form data. May 29 '14 at 22:07
  • I also tried, <form onsubmit="fileUploaded()" ...>, or what do you suggest? And I'm not seeing it refresh, its kinda heavy block, I can normally see when it refreshes. @Bachovski
    – Jose
    May 29 '14 at 22:09
  • You will need to know when the file is actually uploaded on the other end and have some callback function which will then call the actionFunction to rerender. Also, you will need to call an apex method action="{!yourApexMethod}" in your actionFunction to fetch those newly uploaded items in the list before you rerender. May 29 '14 at 22:19
1

Put the output panel inside the <apex:form tags:

<apex:form >
    <apex:actionFunction name="fileUploaded" reRender=“some-id” />

    <apex:outputPanel styleClass="box" id=“some-id”>
        <apex:repeat value="{!media}" var="m">
            <label class="template" for="{!m.Id}">
                <input id="{!m.Id}" type="radio" name="thumbSelected" value="{!m.Preview_Link__c}" />
                 <img src="{!m.Preview_Link__c}" height="60px" alt="{!m.Name}"/>
            </label>
        </apex:repeat>
    </apex:outputPanel>
</apex:form>
1
  • Just tried, didn't work.
    – Jose
    May 29 '14 at 22:06
0

Try by different button type:

<apex:form >
        <apex:actionFunction name="fileUploaded" reRender=“some-id” />

    <apex:outputPanel styleClass="box" id=“some-id”>
        <apex:repeat value="{!media}" var="m">
            <label class="template" for="{!m.Id}">
                <input id="{!m.Id}" type="radio" name="thumbSelected" value="{!m.Preview_Link__c}" />
                 <img src="{!m.Preview_Link__c}" height="60px" alt="{!m.Name}"/>
            </label>
        </apex:repeat>
    </apex:outputPanel>

        //Some stuff here
        <input type="file" size="255" name="file" />
        <input class="btn" type="button" value=“Upload” onclick="fileUploaded();" />
</apex:form>

If you are trying to use html form instead of <apex:form> then it will not pass the value of input tag named file instead use apex tags. You file upload approach seems incorrect according to current code part. Full code may be working.

Also apex:actionfunction should have a controller method.

1
  • I can't have apex:form for the upload, because it has an <input type="hidden"> for the view state that gets upload and AWS returns an error. That's why I have to use <form>. I also tried changing to type="button" but still doesn't work.
    – Jose
    May 30 '14 at 14:00
0

Try providing an action method in your action tag of the actionFunction. Use a blank function if required.

Public void dummyFunc()
{}

VF page:

<apex:actionFunction name="fileUploaded" action="{!dummyFunc}" reRender=“some-id” />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.