Fileupload: No-Flash-Fallback does not work

UI Components for JSF
marco
Posts: 66
Joined: 14 Jun 2010, 17:25

19 Jul 2010, 14:18

Hi,

let me first thank all primefaces developers for this great framework! We are using it now for some weeks and are big fans!

But, naturally ;) , now I have a problem with a primefaces component: fileupload.

After some trial and error, the flash fileupload now works as expected. Unfortuantely (we guess) we have some customers without flash, so we turned flash off in our browsers and wanted to see the no-flash-fallback that is mentioned in the documentation. Sadly we saw that it does not work at all. We tested it locally here with PF 2.0.2 and in component showcase with latest snapshot version. Both with Firefox and Internet Explorer.

Both versions show the same result: What is rendered without flash is ... nothing. You can see the normal upload and clear button (even in showcase) but no input with type "file". It gets rendered in the html, but with "display=none", though. I guess its the same input when using flash object. Because if you change display to "block" manually with your developer browser tool of your choice, select a file and click upload, you get a javascript error, that the flash object cannot be found.

Ironically the fileupload component was our first reason to introduce primefaces. Now we use other components too, but when we can't guarantee a working solution for non-flash-users we can't use PF fileupload. Is there a solution?

Thanks!
Marco

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

19 Jul 2010, 15:01

Hi Marco,

Thanks for your feedback on PrimeFaces!

Actually no-flash fallback is not implemented yet and documentation should not state that is available. You can vote and monitor the progress on this feature at;

http://code.google.com/p/primefaces/iss ... ail?id=622

marco
Posts: 66
Joined: 14 Jun 2010, 17:25

19 Jul 2010, 16:25

Thanks for the information, I voted for the issue.

Currently we are discussing how to handle this. In the end, we may be implementing this feature ourself. But its not decided yet.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

19 Jul 2010, 18:00

If it is urgent you might consider case support option to speed things up.

http://www.primefaces.org/support.html

I also think this feature is necessary to add but we have just other areas to work on that have higher priority like migrating to native JSF 2 apis and new datatable.

marco
Posts: 66
Joined: 14 Jun 2010, 17:25

19 Jul 2010, 22:10

actually, we are considering that too, already saw that on the website mentioned :)

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

19 Jul 2010, 22:52

Allright then, just let us know if decide to go with it. :)

marco
Posts: 66
Joined: 14 Jun 2010, 17:25

29 Jul 2010, 09:52

sorry, but management decided against it. Sorry! :(

However, we solved it "temporarily": After some faking and trial and error with firebug I saw that there already is an (invisible) button of type "file". After I made it visible and inserted manually (with firebug) a simple submit button and clicked it ... the upload worked without flash. So the simple solution was (besides patching the PF jar which we didn't want to do bc its ugly ...) to write our own renderer for the fileupload component.

To document it for others:

You have to add this to your faces-config.xml:

Code: Select all

	<render-kit>
		<renderer>
			<component-family>org.primefaces.component</component-family>
			<renderer-type>org.primefaces.component.FileUploadRenderer</renderer-type>
			<renderer-class>insert.your.class.here</renderer-class>
		</renderer>
	</render-kit>
Now you have to write the renderer. To make it easy you can have a look in the PF renderer: org.primefaces.component.fileupload.FileUploadRenderer

The important parts:

Code: Select all

public class MyFileUploadRenderer extends FileUploadRenderer {
  ....
	public void encodeEnd(FacesContext facesContext, UIComponent component) throws IOException {
		FileUpload fileUpload = (FileUpload) component;
		
		encodeMarkup(facesContext, fileUpload);
	}
  private void encodeMarkup(FacesContext facesContext, FileUpload fileUpload) throws IOException {
		........
		writer.startElement("input", null);
		writer.writeAttribute("type", "file", null);
		writer.writeAttribute("id", INPUT_FILE_ID, null);
		writer.writeAttribute("name", INPUT_FILE_ID, null);
		writer.writeAttribute("style", "display: inline;", null);
		writer.endElement("input");

		writer.startElement("input", null);
		writer.writeAttribute("type", "submit", null);
		writer.writeAttribute("id", INPUT_SUBMIT_ID, null);
		writer.writeAttribute("name", INPUT_SUBMIT_ID, null);
		writer.writeAttribute("value", fileUpload.getLabel(), null);
		writer.writeAttribute("class", "button", null);  //our css style for buttons
		writer.endElement("input");
		........
  }
  .......
}
Thats it. Easy :)

The only downside is, that with my own renderer I dont't have access to the inputFileId as its protected inside the FileUpload class and I can't access it. Currently I use my own ID, which works, but I don't know if it has any side effects.

Thanks again @PF guys for the upload component for JSF2!

Marco

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

29 Jul 2010, 11:54

Thanks for sharing the solution Marco. Looks good!

akomaragiri
Posts: 1
Joined: 16 Aug 2010, 23:44

17 Aug 2010, 00:17

Hi,

Firstly, Thanks for sharing the solution Marco.

I followed the exact same steps you listed in your last post to get the traditional FileUpload input to show up but for some reason can not get the FileUpload Event to fire up on uploading a file. When I click on the button to submit a file, the page just refreshes but doesn't actually do anything in the FileUpload Handler that I have:

public void handleFileUpload(FileUploadEvent event) {
System.out.println(event.getFile().getFileName());
}

The same method though, works with the default primefaces FileUpload component. Did you have to make any changes for the event to fire up with the traditional FileUpload input?

Thanks,
Ashok

marco
Posts: 66
Joined: 14 Jun 2010, 17:25

18 Aug 2010, 21:17

sounds like you forgot to define enctype Attribute for the form:

<h:form enctype="multipart/form-data">

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 35 guests