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.

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