+ Start a Discussion
Joe BriaticoJoe Briatico 

Apex:InputFile not returning data to controller on first use. Works after that.

I am having a really weird issue with apex:InputFile.  I hide it until the user clicks on a button.  When I show it the first time and do a save, nothing goes back to the controller.  The value of my Blobs are null.

If I show it again and pick a file it works fine.

I added a text field to my dialog for testing purposes.  The text box always works.  The inputFile never works on the first call, but works fine after that.  Any suggestions on what I need to change

Here is the markup for my dialog with the Apex:InputFiles 

         <apex:outputPanel id="UploadPicture">
            <apex:outputPanel rendered="{!ShowUploadPicture}" layout="block" styleClass="SaveModal">
                     <div class="dmodal"  id="pictureModal" tabindex="-1" role="dialog" >
                        <div class="modal-dialog modal-dialog-centered"  role="document">
                            <div class="modal-content opaque">
                                
                                <div class="modal-header">
                                    <h1 class="modal-title">Upload Files</h1>
                                  </div>
  
                                <div class="modal-body">
                                    <apex:actionRegion >
                                        <apex:inputText value="{!DummyText}" label="Dummy Text"/>
                                        <apex:outputPanel layout="block" styleclass="panel panel-default" style="margin:20px;" >
                                            <apex:outputpanel layout="block" styleclass="panel-body">
                                                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                                                    <H4>Inside Store Photo</H4>
                                                    <div class="row" style="height:120px;">
                                                        <apex:outputPanel styleclass="glyphicon glyphicon-ok-circle upOk" html-aria-hidden="true" rendered="{!NOT(ISNULL(InsideStorePhoto.Id))}"></apex:outputPanel>         
                                                        <apex:image url="{!URLFOR($Resource.rvie_img_place)}" height="100" alt="" rendered="{!ISNULL(InsideStorePhoto.Id)}" />
                                                        <apex:image url="{!URLFOR($Action.Attachment.Download, InsideStorePhoto.Id)}" height="100"
                                                                    html-onerror="this.src='{!$Resource.no_preview}'" alt="Preview not supported" rendered="{!NOT(ISNULL(InsideStorePhoto.Id))}"
                                                                    onclick="window.open('{!URLFOR($Action.Attachment.Download, InsideStorePhoto.Id)}','_blank','toolbar=yes, scrollbars=yes, resizable=yes');" />
                                                    </div>
                                                    <apex:outputPanel layout="block" styleclass="row" >
                                                        <label class="btn btn-default btn-file">
                                                             Select a Picture<apex:inputfile value="{!IBody}" contentType="image" filename="{!InsideStoreBody.Name}" onchange="previewFileAll(this)" style="display:none;"/><!----->
                                                           <br/>{!InsideStoreBody.Name}
                                                        </label>
                                                    </apex:outputPanel>
                                                </div>
                                            </apex:outputpanel>
                                        </apex:outputPanel>
                                        <apex:outputPanel layout="block" styleclass="panel panel-default" style="margin:20px;" >
                                            <apex:outputpanel layout="block" styleclass="panel-body">
                                                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                                                    <H4>Overall Photo</H4>
                                                    <div class="row" style="height:120px;">
                                                        <apex:outputPanel styleclass="glyphicon glyphicon-ok-circle upOk" html-aria-hidden="true" rendered="{!NOT(ISNULL(OverallPhoto.Id))}"></apex:outputPanel>         
                                                        <apex:image url="{!URLFOR($Resource.rvie_img_place)}" height="100" alt="" rendered="{!ISNULL(OverallPhoto.Id)}" />
                                                        <apex:image url="{!URLFOR($Action.Attachment.Download, OverallPhoto.Id)}" height="100"
                                                                    html-onerror="this.src='{!$Resource.no_preview}'" alt="Preview not supported" rendered="{!NOT(ISNULL(OverallPhoto.Id))}"
                                                                    onclick="window.open('{!URLFOR($Action.Attachment.Download, OverallPhoto.Id)}','_blank','toolbar=yes, scrollbars=yes, resizable=yes');" />
                                                    </div>
                                                    <apex:outputPanel layout="block" styleclass="row" >
                                                        <label class="btn btn-default btn-file">
                                                            Select a Picture<apex:inputfile value="{!OBody}" contentType="image" filename="{!OverallBody.Name}" onchange="previewFileAll(this)" style="display:none;" /><!----->
                                                            <br/>{!OverallBody.Name}
                                                       </label>
                                                    </apex:outputPanel>
                                                </div>
                                            </apex:outputpanel>
                                        </apex:outputPanel>
                                        <apex:outputPanel layout="block" styleclass="panel panel-default" style="margin:20px;" >
                                            <apex:outputpanel layout="block" styleclass="panel-body">
                                                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                                                     <H4>Restroom Photo</H4>
                                                   <div class="row" style="height:120px;">
                                                        <apex:outputPanel styleclass="glyphicon glyphicon-ok-circle upOk" html-aria-hidden="true" rendered="{!NOT(ISNULL(RestroomPhoto.Id))}"></apex:outputPanel>         
                                                        <apex:image url="{!URLFOR($Resource.rvie_img_place)}" height="100" alt="" rendered="{!ISNULL(RestroomPhoto.Id)}" />
                                                       <apex:image url="{!URLFOR($Action.Attachment.Download, RestroomPhoto.Id)}" height="100"
                                                                   html-onerror="this.src='{!$Resource.no_preview}'" alt="Preview not supported" rendered="{!NOT(ISNULL(RestroomPhoto.Id))}"
                                                                   onclick="window.open('{!URLFOR($Action.Attachment.Download, RestroomPhoto.Id)}','_blank','toolbar=yes, scrollbars=yes, resizable=yes');" />
                                                    </div>
                                                    <apex:outputPanel layout="block" styleclass="row" >
                                                        <label class="btn btn-default btn-file">
                                                            Select a Picture<apex:inputfile value="{!RBody}" contentType="image" filename="{!RestroomBody.Name}" onchange="previewFileAll(this)" style="display:none;"/><!----->
                                                            <br/>{!RestroomBody.Name}
                                                        </label>
                                                    </apex:outputPanel>
                                                </div>
                                            </apex:outputpanel>
                                        </apex:outputPanel>
                                    <!-->/div>
                                   <div class="modal-footer"-->
                                        <apex:commandbutton value="Save" action="{!SavePicture}" /> <!--reRender="UploadPicture, pbTable"/-->
                                        <apex:commandbutton immediate="true"  html-data-dismiss="modal" value="Cancel" action="{!HidePicture}"/> <!--reRender="UploadPicture, pbTable"/-->
                                    </apex:actionRegion>  
                                 </div>
 
                             </div>
                        </div>
                    </div>
             </apex:outputPanel>
        </apex:outputPanel>

Is there anything I need to do with my Blob Variables before my first call to make this work on the first time.
 

Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello Joe,

Maybe you are facing the same issue discussed in this article: http://cropredysfdc.com/tag/inputfile-body/

I've seen that you are controlling the visibility of the apex:inputFile with a style attribute but as shown in the article the problem seems to happen even if the parent has a rendered attribute. Take a look at their solution.

Hope to have helped!

Regards.

Don't forget to mark your thread as 'SOLVED' with the answer that best helps you.
SKSANJAYSKSANJAY
Hi Joe,

As the input file is not registered with apex controller, there may be a possiblity it is not passing value back to controller for first time. The hack is, instead of using style property to display: none, I would suggest to use below code

visibility: hidden; width: 0px; height: 0px;

The above inline css will do the same but the element will be available on the page and will work as per your requirement in first go only. Then in javascript while user clicks on checkbox to show input file, set below css to display the input file:

visibility: visible; width: auto; height: auto

Hope it will resolve your problem.

Thanks,
Sanjay
Soujanya R 10Soujanya R 10
hi sanjay,
i am also facing same issue, not able to get input:file values in controller 
where can i use the this line of code
visibility: hidden; width: 0px; height: 0px;