File input using wicket and javascript

[Milton Quranda <mi...@gmail.com>]

Hi All,

I really need some help on this from javascript as well as wicket side.. I
am not quite experienced with javascript... and just a month in wicket...

I am creating a page which has an Image link or even an Image button what
ever works. When i click on the image the file browse window will open as if
clicked on the browse button of file input field. Once the user has selected
an image and click on "Open" button on the browser window, the file will get
uploaded and replace the image that was clicked.

Now what i cannot figure out is how to open the browse window when clicked
on the image and how to catch the "Open" click event and upload the file. I
have the file input field hidden.

Appreciate your reply.

Thanks,
Milton

ImageUploadForm

<td width="112">
                <form wicket:id="ImageUploadForm">
                    <input type="file" wicket:id="fileUpload"/>
                    <a href="#" wicket:id="imageLink"><img
src="images/picture-blank.gif" alt="" width="112" height="131"></a>
                </form>
            </td>

ImageUploadPanel.java
public class ImageUploadPanel extends Panel {

    public ImageUploadPanel(String s) {
        super(s);
        renderPage();
    }

    public ImageUploadPanel(String s, IModel<?> iModel) {
        super(s, iModel);
        renderPage();
    }

    public void renderPage() {
        Form form = new Form("ImageUploadForm");
        FileUploadField fileUploadField = new FileUploadField("fileUpload");
        fileUploadField.setVisible(false);

        Link fileImageButton = new Link("imageLink"){

            public void onClick() {

            }
        };

        form.add(fileImageButton);
        form.add(fileUploadField);
        add(form);
    }
}

Re: File input using wicket and javascript

[Igor Vaynberg <ig...@gmail.com>]

i dont think you can with pure html. maybe you can find a flash
component that will do what you want.

-igor

On Sun, Aug 9, 2009 at 4:11 PM, Milton Quranda<mi...@gmail.com> wrote:
> Hi All,
>
> I really need some help on this from javascript as well as wicket side.. I
> am not quite experienced with javascript... and just a month in wicket...
>
> I am creating a page which has an Image link or even an Image button what
> ever works. When i click on the image the file browse window will open as if
> clicked on the browse button of file input field. Once the user has selected
> an image and click on "Open" button on the browser window, the file will get
> uploaded and replace the image that was clicked.
>
> Now what i cannot figure out is how to open the browse window when clicked
> on the image and how to catch the "Open" click event and upload the file. I
> have the file input field hidden.
>
> Appreciate your reply.
>
> Thanks,
> Milton
>
> ImageUploadForm
>
> <td width="112">
>                <form wicket:id="ImageUploadForm">
>                    <input type="file" wicket:id="fileUpload"/>
>                    <a href="#" wicket:id="imageLink"><img
> src="images/picture-blank.gif" alt="" width="112" height="131"></a>
>                </form>
>            </td>
>
> ImageUploadPanel.java
> public class ImageUploadPanel extends Panel {
>
>    public ImageUploadPanel(String s) {
>        super(s);
>        renderPage();
>    }
>
>    public ImageUploadPanel(String s, IModel<?> iModel) {
>        super(s, iModel);
>        renderPage();
>    }
>
>    public void renderPage() {
>        Form form = new Form("ImageUploadForm");
>        FileUploadField fileUploadField = new FileUploadField("fileUpload");
>        fileUploadField.setVisible(false);
>
>        Link fileImageButton = new Link("imageLink"){
>
>            public void onClick() {
>
>            }
>        };
>
>        form.add(fileImageButton);
>        form.add(fileUploadField);
>        add(form);
>    }
> }
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org