5 Replies Latest reply on Aug 24, 2007 2:17 AM by Eric H

    JavaScript events on s:fileUpload?

    Eric H Novice

      I would like to have some JavaScript happen on s:fileUpload. Namely, when the user selects his file, I want a form submit to happen so the file is uploaded. If I can get this to happen Ajax-style, I could even have a preview of the file show up when the upload is done.

      I've been trying to put an <a:support event="..."> in my <s:fileUpload> element but nothing seems to be happening. I tried for event="onblur" and event="onchange". Any ideas? Is this workable?

      Thanks

        • 1. Re: JavaScript events on s:fileUpload?
          Eric H Novice

          I looked at the page source in the browser and it looks like the <a:support> tag isn't attaching any JavaScript to the file upload input. Hmmm. I guess I could attach some JS by putting it in by hand?

          • 2. Re: JavaScript events on s:fileUpload?
            Pete Muir Master

            Seam version?

            • 3. Re: JavaScript events on s:fileUpload?
              Eric H Novice

              This is Seam 1.2.1 / JBoss 4.2.1.

              I just now set up some JavaScript which registers itself for onchange events in the file upload input, and that gets called. I got the Seam remoting (calling a session bean from JS) working. If I could figure out how to get that JS to trigger a form-submit-rerender I would be in good shape. But I'm not figuring that out. I'm a newbie of JS, and intermediate in Seam right now.

              Any tips would be appreciated.

              • 4. Re: JavaScript events on s:fileUpload?
                Eric H Novice

                Looking some more at the source code, I wonder if perhaps I should have my JS code call A4J.AJAX.Submit() directly. I need to figure out what the params of that are and how to use it but it might be an option.

                I set up a test page with a <h:inputText> with a nested <a:support>, and that worked. It had a form with the right enctype. I changed <h:inputText> to <s:fileUpload>, and changed nothing else on the page, and it didn't work. Obviously the <a:support> tag isn't putting any kind of onchange attribute on the enclosing <s:fileUpload> tag. I assume this is a bug? There aren't any other Seam UI controls that are inputs, so maybe this hasn't been tested in Seam. But I think it's a bug.

                • 5. Re: JavaScript events on s:fileUpload?
                  Eric H Novice

                  Looks like I might be able to achieve this with the a:jsFunction component. That lets me call into the whole JSF framework from a plain JS function. I can get a JS function to trigger when the file upload field is changed. And that could then trigger something with a:jsFunction.

                  I did try to use a <a:commandButton> to do a partial-rerender when submitting a file upload, and that did not work. Somehow the backing bean method was getting called without any form data being submitted. I don't get it.