Skip to Main Content

Java Development Tools

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Multi-file upload phantom failed row

WP v.2Jan 7 2021 — edited Jan 7 2021

Hi all,
I am implementing a multi-file upload feature, however, every time the multi-file component shows, it has this phantom row that doesn't have a filename or file size but does have the "failed" progress indicator. Clicking the "x" doesn't remove it, calling resetValue() on the RichInputFile doesn't remove it nor does clearing the list of UploadedFile objects that it's bound to.
There is another application that uses multi-file uploads that does not have this problem. As far as I can tell, the code between the two are the same. However, I did notice that this phantom row is part of the DOM in the application that doesn't have the issue but its display is set to none.
image.png
Here is the code for the dialog:

<af:popup autoCancel="enabled" id="irAttPU" contentDelivery="lazyUncached"
		popupFetchListener="#{pageFlowScope.IrBean.resetInputFile('irInFile')}">
     <af:dialog id="d10" closeIconVisible="false" title="Add Attachments"
		dialogListener="#{pageFlowScope.IrBean.multiFileUploadDialogListener}">
          <f:attribute name="inputFileId" value="irInFile"/>
	  <af:panelGroupLayout id="pgl285" layout="vertical">
	       <af:inputFile id="irInFile" simple="true" autoHeightRows="10" maximumFiles="20" autoSubmit="false"
			value="#{pageFlowScope.IrBean.uploadedFiles}"/>
               <af:outputText value="100 MB file size limit, 20 files max per upload" id="ot90"/>
	  </af:panelGroupLayout>
     </af:dialog>
</af:popup>

Here is the CSS:

af|inputFile::multiple-upload-progress-done {
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 3px;
  background-color: var(--light-green);
  color: var(--green);
}

af|inputFile::multiple-upload-progress-failed {
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 3px;
  background-color: var(--light-red);
  color: var(--red);
}

af|inputFile::multiple-content
af|inputFile::multiple-upload-content,
af|inputFile::multiple-upload-content-container 
{
  width: 500px;
}

af|inputFile::multiple-upload-filename {
  width: 250px;
}

af|inputFile::multiple-upload-action {
  padding-left: 20px;
}

af|inputFile::multiple-upload-filesize {
  width: 65px;
}

Here is the managed bean code:

private transient List<UploadedFile> uploadedFiles;

public void setUploadedFiles(List<UploadedFile> uploadedFiles) {
   this.uploadedFiles = uploadedFiles;
}

public List<UploadedFile> getUploadedFiles() {
   return uploadedFiles;
}

public void multiFileUploadDialogListener(DialogEvent evt) {    
     
   String inputFileId = (String) evt.getComponent().getAttributes().get("inputFileId");
     
   if(evt.getOutcome() == DialogEvent.Outcome.ok && uploadedFiles != null && !uploadedFiles.isEmpty()) {
        /* Code that persists the files by passing them to a web service - omitted for brevity */
   }
         
   resetInputFile(inputFileId);
}
   
public void resetInputFile(String inputFileId) {
   RichInputFile inputFile = (RichInputFile) JSFUtils.findComponentInRoot(inputFileId);
   inputFile.resetValue();  
     
   uploadedFiles = null;
}

Any ideas? I'm on JDeveloper 12.2.1.4.

Thanks,
Bill

This post has been answered by Timo Hahn on Jan 8 2021
Jump to Answer
Comments
Post Details