Module: HTML5 Upload Progress

slomo
slomo's picture

Joined: 2005-11-18
Posts: 23
Posted: Thu, 2013-07-25 16:30

Hi

I recently developed a module for an alternative upload dialog with drag and drop support using XHR upload. The module is in early alpha but I would be happy to see someone testing it and post feedback here.

* file drag&drop support
* shows upload progress
* no flash required
* offers optional file preview (be careful if you upload a lot of data - the original images are loaded in your browser window)

You can download the latest version from github: https://github.com/mstoltenburg/html5_upload_progress/archive/master.zip

enjoy

 
GeekDrop
GeekDrop's picture

Joined: 2008-05-12
Posts: 21
Posted: Thu, 2013-07-25 22:03

Heya Slomo,

This sounds interesting, I uploaded and enabled the module but when I click the Add photo link, now nothing happens at all. If I disable it again, it works as usual. I haven't messed w/the module/admin stuff of my gallery for awhile so maybe I'm a bit rusty; do I have to disable the original uploader somehow first? I looked through the modules and didn't see anything recognizable as an uploader to disable, so I'm assuming it's hard coded in and your module over-rides it?


GeekDrop.com | GeekDrop Facebook Fan Page | GeekDrop Twitter
Recently voted the interweb's #1 "Geek" site.

 
slomo
slomo's picture

Joined: 2005-11-18
Posts: 23
Posted: Fri, 2013-07-26 02:46

yes it should work out of the box. It does for me. What version of gallery are you using?

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Fri, 2013-07-26 15:48

I'm using Version: 3.0.9 (Chartres) and I removed the "-master" from the unziped folder added the module so far so good.
I see that the 'add photos' url changes to gallery3/index.php/uploader/index/XX where XX is the ID of the album. I thought that I should check that the class of the link is a dialog and it is. So far so good.
I checked that the CSS and the JS files are being combined: yes.
I think the issue is the uploader.php file. if I remove:

		$group->upload_progress("upload_progress")->album($album);
		$group->checkbox("show_preview")
		      ->label(t("Show file preview"))
		      ->checked(false);

		module::event("add_photos_form", $album, $form);

		$group_actions = $form->group("actions");
		$group_actions->upload_progress_buttons("");
		// $group = $form->group("buttons")->label("");
		// $group->submit("")->value(t("Upload"));
		// $group->button("")->value(t("Done"))->id("g-upload-done");
		// $group->button("")->value(t("Cancel uploads"))->id("g-upload-cancel-all");

I do see a empty dialog so I think the issue is in the above code.
I deleted all non-core module for testing as well.

I'm moving this weekend so might not have much time to investigate further but it looks very promising & thanks for the contribution. Once I get it to work I will create a codex page as well.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
slomo
slomo's picture

Joined: 2005-11-18
Posts: 23
Posted: Sat, 2013-07-27 08:42

I'm really sorry to hear that. If you uncoment that code there is nothing to do for my module anymore :)

I used the current source from the master branch at github, that's newer than 3.0.9. And I'm quite sure that all those errors are javascript related.

Gallery 3.0.9 ist using
- jQuery v1.3.2 (from February 20th, 2009)
- jQuery UI 1.7.2 (from March 21st, 2012)

Gallery source code from git branch master is using
- jQuery v1.10.1
- jQuery UI v1.10.3

I noticed some errors that could be easy to fix but there is even no documentation anymore at http://api.jqueryui.com for versions that old (only 1.8, 1.9 & 1.10 are documented online). I will look at that as soon as posible.

If anyone is using the current source from https://github.com/gallery/gallery3 and a reliable browser it should work flawlessly. I hope I get it backward compatible soon but code from february 2009 is considered really old code for me. Does anyone know when the next gallery release is scheduled?

 
slomo
slomo's picture

Joined: 2005-11-18
Posts: 23
Posted: Sat, 2013-07-27 18:39

I just updated the code to hopefully work with gallery 3.0.9 (using jQuery v1.3.2) too. check it out.

Don't forgett to remove the part "-master" from the directory name after downloading it from github at https://github.com/mstoltenburg/html5_upload_progress/archive/master.zip

 
GeekDrop
GeekDrop's picture

Joined: 2008-05-12
Posts: 21
Posted: Mon, 2013-07-29 20:09

Unfortunately, I'm still having the same issue with it. I just tried it with the latest version as well (removed "-master" as well). Originally tried it with Gallery 3.0.5, upgraded to Version: 3.0.9 (Chartres), and have tried with the latest versions of CyberFox (an x64 implementation of Firefox), Opera, and Chrome, all of which behave the same when I click "add photos".

I was going to let you have a look for yourself, and created a test user, but after doing so and logging into the test user's acct. there's no photo/gallery management links at all ("add photos, etc.) unless I check the "admin" option for the user! LOL *Scratching head* ...


GeekDrop.com | GeekDrop Facebook Fan Page | GeekDrop Twitter
Recently voted the interweb's #1 "Geek" site.

 
slomo
slomo's picture

Joined: 2005-11-18
Posts: 23
Posted: Tue, 2013-07-30 13:52

Strange. Like i said, I see no errors in my clean 3.0.9 (Chartres) installation using the module. A test installation would be great to look at. All you have to do is create a "test" album and give the test user add and edit rights for this particular alum. You could send me the credendials via IM.

 
GeekDrop
GeekDrop's picture

Joined: 2008-05-12
Posts: 21
Posted: Tue, 2013-07-30 20:46

I installed Plupload and it seems to be working ok, it's just this uploader I still can't get to do anything for some reason. I got the permissions worked out; I didn't see any way to edit user-only permissions, probably since I installed the Group permissions module (or something), so long story short, I'll message you the login creds. :)


GeekDrop.com | GeekDrop Facebook Fan Page | GeekDrop Twitter
Recently voted the interweb's #1 "Geek" site.

 
slomo
slomo's picture

Joined: 2005-11-18
Posts: 23
Posted: Wed, 2013-07-31 13:51

Updated again. Thank you for your continuous feedback!

Previously I copied the upload controller because it is not possible to extend a controller and I wanted to tweak one private method of that controller class. I did not realize that the code of the upload controller changed between 3.0.9 and git version. For any strange reason this did not produce errors on my local host but both of you only got server errors with status 500 when calling the upload form.

I changed the code so I do not have to copy/overwrite so much "core" code anymore. I hope this may fix your errors, finally :)

 
GeekDrop
GeekDrop's picture

Joined: 2008-05-12
Posts: 21
Posted: Thu, 2013-08-01 05:45

That did the trick, and WOW! Really nice! My new uploader! :)

One thing that could be nice is for the window to "remember" the checked state of the Preview option. SO if I check the box, the next time I open the window it'll already be checked (and vice-versa when unchecked). And/or maybe an admin setting to choose whether it's checked to not.

And possibly a check box to auto-close the uploader window once all photos/movies are done uploading (unless an error happens, so it can still be seen).

Thanks for the awesome module!


GeekDrop.com | GeekDrop Facebook Fan Page | GeekDrop Twitter

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Mon, 2013-08-19 20:46

I created a codex page:
http://codex.galleryproject.org/Gallery3:Modules:html5_upload
Users; please free to contribute by helping with the documentation.
slomo, Thanks for the contribution it works great!

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
arirea

Joined: 2008-03-09
Posts: 20
Posted: Fri, 2013-09-20 04:45

I tested this module with Firefox 24 running on Linux. The module can be activated and is invoked for uploads, but all the HTML5 funcionality is disabled, and a lot of warning messages are displayed in the upload window:

Movie uploading is disabled on your system. Help!
Drag & drop is not supported
File API & FileReader API is not supported
XHR2's FormData is not supported
XHR2's upload progress is not supported

I checked and firefox 24 supports all of this. In fact, drag and drop uploads work great on Wordpress with this browser.

Why would the module fail to work with linux-based browsers? or is it a firefox 24-specific issue? (firefox 24 is the latest as of today)

 
slomo
slomo's picture

Joined: 2005-11-18
Posts: 23
Posted: Mon, 2013-09-30 12:58

I tested it with Firefox 24 and it's working like expected. I assume there is a javascript error at an earlier moment and the involved script is never executed. Those alerts are shown by default and when the javascript checks for the required functionality are successful the alerts get hidden. So seeing the alerts should happen when your browser does not support the required method, but it will also happen when the script is never executed at all.

Can you tell me which gallery version you are using so I may investigate further on this issue? Thanks in advance. Maybe you can check your error console too if you spot any reported errors there.

 
arirea

Joined: 2008-03-09
Posts: 20
Posted: Mon, 2013-09-30 13:42

Thanks Slomo for following up. This is with Gallery 3.0.9. Gallery is running on Linux (AMI Linux/amazon), and the browser is running on Ubuntu 13.04.
Wordpress 3.6.1, running in the same server and used with the same browser offers drag and drop upload of content to the media library and that functionality works just fine (I understand that is also html5-based).

 
speedracer

Joined: 2003-04-06
Posts: 34
Posted: Tue, 2013-10-22 04:17

I'm seeing the same error as well.

Drag & drop is not supported
File API & FileReader API is not supported
XHR2's FormData is not supported
XHR2's upload progress is not supported

Firefox: 23.0.1
Firefox: 24.0
Chrome: 30.0.1599.101 m

Java Runtime: 1.70_45-b18

 
slomo
slomo's picture

Joined: 2005-11-18
Posts: 23
Posted: Thu, 2013-10-24 14:11

I checked the module with the current stable version (3.0.9 (Chartres)) and the current git version (#fb82ea) and I experienced no error - no matter which (modern) browser I use.

I assume there is a script error earlier on and the script of the module is never executed (see above). Here is what you can do to help me solve your problem:

  • Open JavaScript-Console in Chrome and check the output
  • or create a test user & album and grant me access so I can debug the issue

 
To open the console tab in chrome, do one of the following:

  • Use the keyboard shortcut Command - Option - J (Mac) or Control -Shift -J (Windows/Linux).
  • Select View > Developer > JavaScript Console.

 
To reproduce your scenario it is also helpful to know:

  • which gallery version is in use
  • which theme is in use
  • which modules are activated/installed
 
w91803
w91803's picture

Joined: 2009-08-29
Posts: 67
Posted: Mon, 2013-11-04 03:42

This module is great! However, it works only in Opera, Firefox and Chrome。The others like Internet Explorer and Safari do not work.

I wonder if you add a note in the Screen shot, please open attachment.

I am using 3.0.9 (Chartres).

 
yottabit

Joined: 2004-02-25
Posts: 36
Posted: Sun, 2013-11-17 20:45

For those having the problem where it says certain components are not supported, please read the installation instructions carefully. You need to rename the directory after extraction from Zip. Remove "-master" from the end of the directory.

I didn't carefully read and just slammed the extracted directory into the modules subdir, enabled, and then was disappointed with the errors. I then disabled the module, renamed the directory, re-enabled the module, reloaded the web page, and now it's awesome!

This is a GREAT module and working great so far or me. I *always* had problems with the built-in SWF uploader randomly failing on a few files every single time I used it ... for YEARS on various Ubuntu Server versions. This uploader is fast, looks nice, and WORKS!!

Thank you so much for you contribution!!!! Finally I can stop using the Server Add method which as very inconvenient for a variety of reasons.

 
nstruments

Joined: 2013-12-17
Posts: 2
Posted: Tue, 2013-12-17 05:31

Thanks for the nice uploader! I am quite new to Gallery. I recently installed 3.0.9 on a members-only club website for members to share travel photos with each other. Basically working well. Not all members very computer literate and many had trouble with the flash uploader particularly with Safari.

I installed your HTML5 uploader today and tested on a Windows 7 Pro PC with the current release of IE, Chrome, Firefox, Opera, and Safari. I am seeing Chrome and Firefox working extremely well but some problems with all the others.

IE works perfectly in the file-browser mode but when I use drag-and-drop, IE OPENS the file instead of uploading it. Opera works in both modes but the progress bars don't work well. Safari is the biggest pain. It works in both modes but there are NO progress bars and NO confirmation display. I collected some additional details and some output from the jsConsole that might be useful. Would you like me to send you a small text file?

I will go to a friend's and test on a Mac again tomorrow and see what happens. Are other users still having browser issues or is this likely to be my website?

 
nstruments

Joined: 2013-12-17
Posts: 2
Posted: Wed, 2013-12-18 03:20

Testing some more. My website has jquery and suckerfish installed, I added some navigation menus to the Wind theme, and the Gallery was behind an ssl login. I was afraid this nice uploader was struggling with some crud on my site.

I installed Gallery 3.0.9 on a completely different domain with no js installed, no https, and no changes to the theme. About as standard an install as I know how to do. The only thing in common is that both domains are hosted on bluehost.com.

I am still getting the same browser-dependent behavior. Chrome and Firefox work great but all the others have one or more issues.

I really like this module and would like to see it work well with ALL the standard browsers so I don't have to tell club members what browser to use. Keeping my fingers crossed that someone with more experience than I has found a fix :)

 
Hostek

Joined: 2014-02-02
Posts: 1
Posted: Sun, 2014-02-02 23:21

hello
While searching for a solution with faulty flash uploader I tried this module, and it's working really great.
I'm also trying to find a way to upload an img from url (just by providing url to the img), so would it be possible to add such function to this module ?

 
Procyon

Joined: 2008-11-30
Posts: 42
Posted: Wed, 2014-02-12 18:03

Hi,

Is it possible to modify the script to allow a person to a description? The way I see it could work is once a picture is uploaded the person is redirect to a screen that shows a thumbnail and a description field next to it that allows them to add a description. If they upload multiple pictures, they simply see a list.
Admin should have the option of setting description fields as optional.

Thoughts?

 
rbuelund

Joined: 2014-04-21
Posts: 1
Posted: Mon, 2014-04-21 12:53

I get this error in the firebug console in firefox when I open the upload window:

"TypeError: $(...).h5up is not a function"

Please help - I cannot drag & drop anything to the window.

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Tue, 2014-04-22 00:44

I just tried the module again and I don't get an error and others have not reported a similar error. I suspect you did not add the files properly?

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
doclalor

Joined: 2005-04-28
Posts: 14
Posted: Mon, 2014-06-30 14:56

For what it's worth, I'm running 3.0.9 and I receive the same "not supported" warnings; but when I switched a higher version of jQuery, my theme went all screwy.

Is it possible to update themes so as to permit a more properly recent version of jQuery. Or would updating theme menus, etc., for a higher jQuery screw up other G3 features?