Wicket and file upload with blueimp jquery file upload

Discussion:

heapifyman

2012-10-16 10:49:00 UTC

Hello,

has anyone tried yet to integrate blueimp's jQuery File Upload
http://blueimp.github.com/jQuery-File-Upload/ with Wicket FileUpload?
Especially in combination with additional input fields <input type=text">
I'm kind of stuck because I'm not really sure where to point the jquery
file upload's url param to and how to store the uploaded files in the
wicket page for saving them when the complete form is submitted.

Any help would be appreciated.
Thanks

Martin Grigorov

2012-10-16 10:54:10 UTC

Permalink

Hi,

Is it an option to upload to a IResource and store the uploaded data
the same way as if you'd do in the page ?

Post by heapifyman
Hello,
has anyone tried yet to integrate blueimp's jQuery File Upload
http://blueimp.github.com/jQuery-File-Upload/ with Wicket FileUpload?
Especially in combination with additional input fields <input type=text">
I'm kind of stuck because I'm not really sure where to point the jquery
file upload's url param to and how to store the uploaded files in the
wicket page for saving them when the complete form is submitted.
Any help would be appreciated.
Thanks

--
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com

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

heapifyman

2012-10-16 10:59:57 UTC

Permalink

Not sure if I understand.
As far as I got it, the upload plugin requires some "web service" that
accepts POST and DELETE requests to add/remove uploaded files.
Doing that is no problem, I guess.
But how to I link this with the current user's wicket session so that I
know which files the users uploaded when finally the form is submitted?
I'm not sure if I'm using the right wording here. Hope you get the idea...

Post by Martin Grigorov
Hi,
Is it an option to upload to a IResource and store the uploaded data
the same way as if you'd do in the page ?

--
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com
---------------------------------------------------------------------

Bas Gooren

2012-10-16 16:51:52 UTC

Permalink

Hi!

We use a different uploader (uploadify), but the basics are the same.

What we've built for this is a behavior which renders the UI for the
uploader, and handles ajax callbacks.

The uploader uploads to a mounted resource (e.g. at /uploadify), which
has an internal cache (UUID => FileInfo).
After a successful upload, the upload resource returns the UUID;
The javascript onComplete handler then calls the ajax behavior with the
UUID parameter, which allows other components in the page to respond to
the upload.

To prevent overflow in the uploader cache we use a map with a maximum
size which evicts old entries on overflow.

Met vriendelijke groet,
Kind regards,

Bas Gooren

Post by heapifyman
Not sure if I understand.
As far as I got it, the upload plugin requires some "web service" that
accepts POST and DELETE requests to add/remove uploaded files.
Doing that is no problem, I guess.
But how to I link this with the current user's wicket session so that I
know which files the users uploaded when finally the form is submitted?
I'm not sure if I'm using the right wording here. Hope you get the idea...

Post by Martin Grigorov
Hi,
Is it an option to upload to a IResource and store the uploaded data
the same way as if you'd do in the page ?

--
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com
---------------------------------------------------------------------

heapifyman

2012-10-16 17:09:30 UTC

Permalink

Thanks.
Would you mind sharing the mounted resource's code? I'm not completely sure
how to implement that.

Post by Bas Gooren
Hi!
We use a different uploader (uploadify), but the basics are the same.
What we've built for this is a behavior which renders the UI for the
uploader, and handles ajax callbacks.
The uploader uploads to a mounted resource (e.g. at /uploadify), which has
an internal cache (UUID => FileInfo).
After a successful upload, the upload resource returns the UUID;
The javascript onComplete handler then calls the ajax behavior with the
UUID parameter, which allows other components in the page to respond to the
upload.
To prevent overflow in the uploader cache we use a map with a maximum size
which evicts old entries on overflow.
Met vriendelijke groet,
Kind regards,
Bas Gooren
Not sure if I understand.

Post by heapifyman
As far as I got it, the upload plugin requires some "web service" that
accepts POST and DELETE requests to add/remove uploaded files.
Doing that is no problem, I guess.
But how to I link this with the current user's wicket session so that I
know which files the users uploaded when finally the form is submitted?
I'm not sure if I'm using the right wording here. Hope you get the idea...
Hi,

Post by Martin Grigorov
Is it an option to upload to a IResource and store the uploaded data
the same way as if you'd do in the page ?

Post by heapifyman
Hello,
has anyone tried yet to integrate blueimp's jQuery File Upload
http://blueimp.github.com/**jQuery-File-Upload/<http://blueimp.github.com/jQuery-File-Upload/>with Wicket FileUpload?
Especially in combination with additional input fields <input type=text">
I'm kind of stuck because I'm not really sure where to point the jquery
file upload's url param to and how to store the uploaded files in the
wicket page for saving them when the complete form is submitted.
Any help would be appreciated.
Thanks

--
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com
------------------------------**------------------------------**
---------

Bas Gooren

2012-10-16 17:16:53 UTC

Permalink

Behavior (wicket 1.5): http://pastebin.com/WUHsiRL2
instance.js (to initialize uploadify): http://pastebin.com/jGSwzHMN

Mount it in Application.init() with:

// Allow uploads through uploadify
mount( new UploadifyBehavior.Uploader( "/uploadify" ) );

Use it like this:

component.add( new UploadifyBehavior()
{

@Override
protected void onUpload( UploadInfo info,
AjaxRequestTarget target )
{
// Handle upload any way you like, and replace
stuff in this ajax request
}

} );

Met vriendelijke groet,
Kind regards,

Bas Gooren

Post by heapifyman
Thanks.
Would you mind sharing the mounted resource's code? I'm not completely sure
how to implement that.

Post by Martin Grigorov
Is it an option to upload to a IResource and store the uploaded data
the same way as if you'd do in the page ?

--
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com
------------------------------**------------------------------**
---------

heapifyman

2012-10-24 10:54:03 UTC

Permalink

Thanks. That helped a lot.

Post by Bas Gooren
Behavior (wicket 1.5): http://pastebin.com/WUHsiRL2
instance.js (to initialize uploadify): http://pastebin.com/jGSwzHMN
// Allow uploads through uploadify
mount( new UploadifyBehavior.Uploader( "/uploadify" ) );
component.add( new UploadifyBehavior()
{
@Override
protected void onUpload( UploadInfo info,
AjaxRequestTarget target )
{
// Handle upload any way you like, and replace stuff
in this ajax request
}
} );
Met vriendelijke groet,
Kind regards,
Bas Gooren

Post by heapifyman
Thanks.
Would you mind sharing the mounted resource's code? I'm not completely sure
how to implement that.
Hi!

Post by Bas Gooren
We use a different uploader (uploadify), but the basics are the same.
What we've built for this is a behavior which renders the UI for the
uploader, and handles ajax callbacks.
The uploader uploads to a mounted resource (e.g. at /uploadify), which has
an internal cache (UUID => FileInfo).
After a successful upload, the upload resource returns the UUID;
The javascript onComplete handler then calls the ajax behavior with the
UUID parameter, which allows other components in the page to respond to the
upload.
To prevent overflow in the uploader cache we use a map with a maximum size
which evicts old entries on overflow.
Met vriendelijke groet,
Kind regards,
Bas Gooren
Not sure if I understand.

Post by Martin Grigorov
Is it an option to upload to a IResource and store the uploaded data
the same way as if you'd do in the page ?
Hello,

Post by heapifyman
has anyone tried yet to integrate blueimp's jQuery File Upload
http://blueimp.github.com/****jQuery-File-Upload/<http://blueimp.github.com/**jQuery-File-Upload/>
<http://**blueimp.github.com/jQuery-**File-Upload/<http://blueimp.github.com/jQuery-File-Upload/>>with
Wicket FileUpload?
Especially in combination with additional input fields <input type=text">
I'm kind of stuck because I'm not really sure where to point the jquery
file upload's url param to and how to store the uploaded files in the
wicket page for saving them when the complete form is submitted.
Any help would be appreciated.
Thanks

--
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com
------------------------------****----------------------------**--**
---------

Martin Grigorov

2012-11-14 09:51:38 UTC

Permalink

Hi,

I've just added a new article at
http://wicketinaction.com/2012/11/uploading-files-to-wicket-iresource/ that
shows how to integrate such JavaScript file upload widgets with Wicket.
I hope it is useful for you!

Post by heapifyman
Thanks. That helped a lot.

Post by heapifyman
Thanks.
Would you mind sharing the mounted resource's code? I'm not completely sure
how to implement that.
Hi!