I moved away from the Wonder upload components a while back and moved to use
dropzone.js, which is quite nice. Unfortunately I've never gotten around to
make an actual component out of it since each project has such different UI
requirements.
But dropzone is easy enough to use and quite well documented. I believe the
request consumption part is mostly ripped off from AjaxFileUpload, so… Thanks
Mike :).
Note that I "fixed" thes code snippets for sharing in the mail message, so
expect it to be … wonky. Hope it helps though.
HTML ---------------------------
<!-- This is where files get dropped -->
<div class="zone">Gimme files!</div>
<!-- This UC gets updated once files have been dropped in. Optional, but
included for completeness. -->
<wo:AjaxUpdateContainer id="updateContainerForShowingFiles">
<!-- Show list of files/previews here -->
</wo:AjaxUpdateContainer>
<!-- activate the dropzone -->
<script type="text/javascript">
jQuery( document ).ready( function() {
var storageURL = '<wo:actionURL action="$upload" />';
var params = { url:storageURL, createImageThumbnails:true,
maxFilesize:1000 };
var dropzone = new Dropzone( 'div.zone', params );
dropzone.on("complete", function(file) {
updateContainerForShowingFilesUpdate();
});
});
</script>
Java ---------------------------
@Override
public void appendToResponse( WOResponse r, WOContext c ) {
super.appendToResponse( r, c );
AjaxUtils.addScriptResourceInHead( context(), r, "app",
"vendor/dropzone.js" ); // you can get this from here:
https://www.dropzonejs.com/
}
public WOResponse upload() {
WOResponse response = new WOResponse();
try {
WOMultipartIterator multipartIterator =
context().request().multipartIterator();
String uploadFileName = null;
InputStream uploadInputStream = null;
int streamLength = -1;
if( multipartIterator == null ) {
response.appendContentString( "Already Consumed!" );
}
else {
WOMultipartIterator.WOFormData formdata;
while( (formdata = multipartIterator.nextFormData()) !=
null ) {
String name = formdata.name();
if( formdata.isFileUpload() ) {
uploadFileName =
context().request().stringFormValueForKey( name + ".filename" );
streamLength =
multipartIterator.contentLengthRemaining();
uploadInputStream =
formdata.formDataInputStream();
// here you handle the data from
uploadInutStream
break;
}
}
}
}
catch( Exception e ) {
throw new RuntimeException( e );
}
return response;
}
Cheers,
- hugi
> On 18 Dec 2019, at 16:40, Markus Ruggiero via Webobjects-dev
> <webobjects-dev@lists.apple.com> wrote:
>
> AjaxFlexibleFileUpload is quite nice but does not provide drag'n'drop.
> Anyone's got an idea about how to enhance this component with drag'n'drop?
> ERAttachment framework has ERDragAndDropUpload component but for the current
> customer project using ERAttachment is not an option. Thus we have
> implemented upload with AjaxFlexibleFileUpload but the customer asks for drag
> and drop.
>
> Thanks for any help
> ---markus---
> _______________________________________________
> Do not post admin requests to the list. They will be ignored.
> Webobjects-dev mailing list (Webobjects-dev@lists.apple.com)
> Help/Unsubscribe/Update your Subscription:
> https://lists.apple.com/mailman/options/webobjects-dev/hugi%40karlmenn.is
>
> This email sent to h...@karlmenn.is
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list (Webobjects-dev@lists.apple.com)
Help/Unsubscribe/Update your Subscription:
https://lists.apple.com/mailman/options/webobjects-dev/archive%40mail-archive.com
This email sent to arch...@mail-archive.com
