Drag 'n Drop Upload

[Spritemarkiv]

Drag 'n Drop Upload

* This module creates an easy way to upload files into a specific directory.


Features
* Uses the plupload Jquery plug-in by the guys who wrote Tiny_MCE.
* Focus of the loader in the current state is for photos.
* Later version will allow other file extensions
* filter the type of files allowed to upload.
* Unlimited file size capasity
* Large files are chucked up.
* Client side image resizing.
* Jquery_Admin Compatible.
* Backend provides easy one click set up.
1. Choose the folder.

Tested on
* WB2.8.1

Still needs work:
*Double check of the upload security( meaning not recommended for production sites yet)
*Internationalization

v0.1.1
*fixed relative links, now works deeper in the menu tree.
*Updated info.php to include GUID
*fixed 2 broken links for flash, and silverlight
*moved script from frontend_body to view.php

Download moved to AMASP
http://www.websitebakers.com/pages/modules/interaction/drag-n-drop-upload.php

[Olli]

this stuff rules  

[Spritemarkiv]

Thanks Olli!  The hard work was done be the plupload team. I'm just porting it to WB.

Here is a demo if anyone wants to play.  Actual uploading is disabled.
http://www.karlpiercedesign.com/pages/web-design/website-baker-modules/drag-n-drop/drag-n-drop-demo.php

[iradj]

I get this message.

Code:

You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.

What should I do?

BR Iradj

[Spritemarkiv]

 This is shown if html5, gears, browserplus, silverlight, flash all fail to load. I'll assume you have one of these.

In WB Settings Change PHP Error Reporting Level: E_ALL
Do you get any errors?
Are you using Firefox?
Are you using firebug?
Are you getting any errors in console?
Are you using Jquery Admin?
I fixed some relative links this morning, are you using v0.1.1?

My guess is that one of the linked files is not loading correctly.

[kweitzel]

Linux (FC14) with FireFox 3.6 does have issues as well, starting when selecting files ...

cheers

Klaus

[Spritemarkiv]

Klaus,
There is a know bug in the jquery plug-in when using jquery-ui.
You can drag one file(or multiple files at once) to the landing place, but when you add another file to the white landing space it fails.

If you drag the second load on top of the first it works.  They promise to fix this in the next plupload version.

But  this is not iradj's problem.

[Spritemarkiv]

iradj,
Another thought..

if you have Jquery loading via your template,
and you are not using Jquery admin
then Jquery will load twice and cause lots of problems.

[Spritemarkiv]

I did find an error that would cause flash and silverlight to fail

view.php line 132:

Code:

// Flash settings
flash_swf_url : '<?php echo WB_URL."/";?>modules/drag_n_drop/plupload/<?php echo WB_URL."/";?>plupload.flash.swf',

// Silverlight settings
silverlight_xap_url : '<?php echo WB_URL."/";?>modules/drag_n_drop/include/plupload/src/javascript/plupload.silverlight.xap',

should read:

Code:

// Flash settings
flash_swf_url : '<?php echo WB_URL."/";?>modules/drag_n_drop/plupload/js/plupload.flash.swf',

// Silverlight settings
silverlight_xap_url : '<?php echo WB_URL."/";?>modules/drag_n_drop/plupload/js/plupload.silverlight.xap',

[iradj]

On my test server I have installed template switch. For all the Tepmlate JQuery is not active without

Code:

register_frontend_modfiles('jquery');

your modules work. In template, which is working with JQuery I gett the message when I click on Add file

iradj

[Spritemarkiv]

The first Add file button you see is a simple slider toggle for display purposes.

Try removing lines 69-78 from the view.php file.

This is where I load the Jquery.

Code:

<script type="text/javascript">
if (typeof jQuery == 'undefined') {
   var head = document.getElementsByTagName("head")[0];
   script = document.createElement('script');
   script.id = 'jQuery';
   script.type = 'text/javascript';
   script.src = '<?php echo WB_URL; ?>/include/jquery/jquery-min.js';
   head.appendChild(script);
}
</script>

[Spritemarkiv]

Just posted V0.1.2 with some fixes.
http://www.websitebakers.com/pages/modules/interaction/drag-n-drop-upload.php

[iradj]

No difference. The template loaded with JQuery not working
Iradj

[Spritemarkiv]

OK, I can't explain why this works but...

If you are using

Code:

register_frontend_modfiles('jquery');

in your template.

in view.php replace lines 69-78

Code:

<script type="text/javascript">
if (typeof jQuery == 'undefined') {
   var head = document.getElementsByTagName("head")[0];
   script = document.createElement('script');
   script.id = 'jQuery';
   script.type = 'text/javascript';
   script.src = '<?php echo WB_URL; ?>/include/jquery/jquery-min.js';
   head.appendChild(script);
}
</script>

with

Code:

<script type="text/javascript" src="<?php echo WB_URL."/include/jquery/jquery-min.js"; ?>"></script>

My guess as to what is happening:
Jquery is loaded in the head with the register_frontend_m odfiles...
but somewhere it is disabled before the script for plupload is called.
This throws an error that $uploader is not defined.

The script you are replacing only calls jquery if it is not all ready in the head.
The new script calls it directly.

I am not sure how to implement a workaround for future updates, mostly because I haven't figured it all out yet.
I'll keep thinking about it.

I would recommend Jquery Adminhttp://www.websitebakers.com/pages/libs/jqueryadmin.php and not use register_frontend_m odfiles...

[iradj]

Now all works.

I have connected with JQuery admin without "register_frontend_m odfiles and drag_n_drop_v_1.4

Thank you for your help

Iradj

[Spritemarkiv]

I'm glad that it is working for you. 

[Boudi]

In first it looks great!

But what is the goal? As an admin you set the folder for that specific page? And customers/visitors kan easily upload files to that folder?

[Spritemarkiv]

As the webmaster for several organizations, I keep hearing how difficult it is to upload multiple flies.  With Drag 'n Drop Upload you can add this module to the page, point the files to the right directory and either allow everyone or just the page admins to add multiple files to a specific folder.

I started using it as a solution for Auto_Gallery, where it is pretty tightly integrated, and thought it had a lot more to offer.

Adding it to a photo gallery or slide show is a pretty obvious combination. But that is just the start.  You could add it to a Down Load Gallery, or a video gallery, or a mp3 gallery...

The module is still in its infancy, and I am curious as to how it will be used.  I personally think it can be quite useful.

Let me know how you would like to use it, and if there are features you would like to see.

[iradj]

If I want to transfer multiple files, only the first file is transmitted. While it is at rest OK check mark.

What went wrong?

Irdaj

[Spritemarkiv]

How funny. 2 minutes ago I posted at AMASP this very bug.  The problem(besides proper testing ) is the new security for the upload.php file using session variables.  Hopefully I have a fix later today.

[Spritemarkiv]

Here is a quick fix if you don't want to wait for the next (soon) update.

change upload.php line 19 to:

Code:

//unset($_SESSION['drag_n_drop_ident']);

Add this to line line 24 of view.php:

Code:

//set the session lifetime to 5 hours (should be enough time)
ini_set("session.gc_maxlifetime", "18000");

[iradj]

It works very well!

Iradj

[dbs]

hi, i like this module.

little problems here with wb 2.8.1.

if i want first add a file per add-button, nothing happens.
after drag'n'drop a file the add-button works for the next file.

if i want add 2 images (one by one) per drag'n'drop, the second image will displayed instead added.

feature-request: would be nice to choose a directory in the frontend.

regards
dbs

[Spritemarkiv]

Hi dbs,
I will have a look and see what I can do.  There  is probably an update to the javascript it is based on.  I will keep you posted.