abl_droploader: A native drag & drop multiple image uploader

developr · 2012-05-18 16:09:30

Hi Textpattern Fans

Edit: March, 28. 2013: After reorganising my site, download locations has changed a bit. Most pages are now also available in English.

Today, I have published a new plugin: abl_droploader.

Download locations for the Plugin and Textpacks:

The plugin is now also available as a zip-file that contains the source-code of the plugin and external resources like javascripts and css.

This plugin is the result of an inspiring mail discussion with Stef and an idea from Jakob posted in this thread.

What does it do?
DropLoader allows you to upload multiple images at once, simply by dragging files from the desktop onto the browser window. The user interface of DropLoader is a transparent area, shown above Textpatterns own UI. A special feature of DropLoder is the fact, that it hides the standard upload-form, but uses it in the background for sending the data to server. The form-data will therefore be processed by Textpatterns regular image upload-script, txp_image.php.

DropLoader can be used in the images-tab, where it replaces the standard upload-form, but also in the write-tab. This makes it possible to upload images right from an open Article, without a need to switch between the write- and image-tabs. Uploaded images will be automatically assigned to the current article (field article image), if DropLoader is opened directly from the write-tab.

It is also possible to automatically assign a category to the uploaded images. Simply select a category, before files are dropped or selected.

Both, “Drag & Drop” and the upload functionality are based on the jQuery plugin jquery.filedrop.js by Weixi Yen. Thanks!

Requirements

Textpattern 4.4.1+.

Important: To be able to edit preferences, the plugin soo_plugin_pref is required. Hard coded default preferences apply, if soo_plugin_pref is not installed.

The jQuery-plugin filedrop requires the “File Reader API” and the “Drag & Drop API”. DropLoader disables itself, if these API’s are not supported.

Recent versions of Firefox and Google Chrome supports all features and work perfectly. However, Internet Explorer (incl. IE9), Opera and Safari currently do not support all of the required API’s, so DropLoader will not be available with these browsers.

Features

Enables uploading of multiple images at once
File selection using drap & drop or the file open-dialog
Hides the standard upload-form in the images-tab
Automatically assign image-category to each uploaded image (optional)
Automatically create thumbnail, if thumbnail dimensions are available
Fully compatible to the standard image upload-form: Form data is posted to the same script (txp_image.php) for processing
Enables image uploads directly from the write-tab (Article detail/edit view)
Automatically assign uploaded images to the current article’s images-field (only if DropLoader has been opened directly from the write-tab)
Supports localisation (l10n) using textpacks
DropLoader can also be used by other Textpattern plugins, e.g. from file- or image-pickers/selectors

Installation

This plugin can be installed and activated as usual on the plugins-tab.

DropLoader requires some additional resources (jQuery plugins, stylesheet), which are installed when the plugin is activated.

Notes:

When upgrading abl_droploader from a previous version, you may need to clear the browser cache.
When updating a previous DropLoader installation, you must manually change the load order to 9 in the plugins panel! This is not automatically done when updating an already installed plugin.

The following files will be installed on plugin activation:

/ (site-root)
- res/
  - css/
    - abl.droploader-app.css
  - js/
    - jquery.filedrop.js
    - jquery.droploader.js
    - abl.droploader-app.js

Localisation

DropLoader uses textpacks for localisation. The distribution package already contains textpacks in english (en-gb) and german (de-de). These and other Textpacks for abl_droploader are available as separate downloads (see top of this post).

The name of all language strings begins with ‘abl_droploader_’.

Note: Starting with Version 0.13, the english textpack will also be installed under the language-key for the current site language, if this is not en-gb or de-de. These strings can then be translated to the desired language, for example using the snippet editor of the MLP (Multi-Language Pack).

Thanks to Stef Dawson for this tip!

Changelog

Version 0.20 (2013-03-27)

Improved installation procedures:
- SECURITY: changes filemode for created directories from 777 to 755.
- Log errors, warnings and notices in error-log if something goes wrong.
- Set plugin load-order to 9 in database table txp_plugin.
- Remove textpack entry ‘abl_droploader_prefs_custom_stylesheetb’ from table txp_lang (misspelled key)

Uninstallation procedure added (executed when the plugin has been deleted):
- Remove preferences, textpacks and filesystem resources (js, css, directories)

Version 0.19 (2013-02-21)

Write Pane: Rendering of the droploader open-link changed. Function ‘wrapRegion’ will be used, if available (Txp 4.6).
Correction in jquery.droploader.js: Ignore drop-events when the drop-area is not visible.
Cleanup php and javascripts (remove commented code).

Version 0.18 (2013-02-19)

Resolved a compatibility issue with jQuery 1.9 (Txp 4.6-SVN): Use ‘delegate’ instead of ‘live’ for event-handler attachment (live-method has been removed in jQuery 1.9). The delegate-method is available in jQuery Versions 1.4.2 or newer.

Version 0.17 (2013-01-26)

Changed plugin load order from 5 (default) to 9 (low priority). The reason is, that there may be other plugins (like smd_thumbnail), that uses the callback image_uploaded from txp_image.php. Because DropLoader does a PHP exit within that callback, other plugins must be called before DropLoader. Otherwise the callback-event is not fired for these plugins.
Added a new option ‘article-image fields’, which is a comma separated list of article-image CSS field-id’s (default: #article-image). When multiple fields are given, the image-ids’s are inserted into all of these fields. Use #custom-n for the article custom fields, where “n” is the field-number.
Corrected a typo in the textpack: abl_droploader_prefs_custom_stylesheetb renamed to abl_droploader_prefs_custom_stylesheet.
New entry added to the textpack for the new option in the prefs-panel.
Correction in installation procedure: properly add new options to the prefs. Version 0.16 failed to do that correctly.

Version 0.16 (2013-01-16)

Enable DropLoader also after editing an image. I forget to change this in 0.15.
Added two new options for a more flexible UI styling. Option ‘use default styles’ (default: yes) and ‘custom stylesheet’ (default: empty) which is a stylesheet (path/filename) of your own. The custom stylesheet will be included after the default stylesheet, if this is also enabled.
Two entries added to the textpack for the new options in the prefs-panel.
Added an installation note concerning upgrading DropLoader and browser caching.
Cleaned up jquery.droploader.js (comments removed)

Version 0.15 (2013-01-07)

Do not override thumb dimensions on installation if they are already set.
~~Enable DropLoader also after editing an image.~~
Better error handling in JavaScript after upload error.
Default for option “reload image list after upload” changed to false, because pages may contain post-data.

Version 0.14 (2013-01-02)

Avoid display of a JSON-String like ‘{“status”: 1,“image_id”: 123}’, for example after editing a single image.
Enable DropLoader also on empty image-list (no images, no search result), after doing list operations (multi-edit) and after changing the page-size.
Better integration with admin themes:
- Avoid overlay of the close-button for the Hive admin-theme (Txp 4.5.x).
- Write Tab: Rendering of open-link changed.

Version 0.13 (2012-05-25)

Installation procedure corrected for international users (see ‘Localisation’ above).

Version 0.12 (2012-05-22)

Edit preferences: Show default values (not editable) if soo_plugin_pref is not installed.
Thumbnail size not set: If thumbnail defaults where never set (e.g. in a fresh Txp-install), DropLoader sets default values (thumb_w/h: 100/100, thumb_crop: 1) for these preferences upon installation.

Version 0.11 (2012-05-21)

fix for “white screen” if soo_plugin_pref is not installed: Use hard-coded defaults.
Text of Open trigger changed from DropLoader to Upload Images
Option for reloading the image-list when DropLoader is closed (image-tab/bot_image_upload)

Version 0.1 (2012-05-18)

Initial release

Last edited by developr (2013-03-28 20:29:09)

jakob · 2012-05-18 17:58:20

Oh my, and I thought my week was over! Have to say this looks very enticing and it’s arrival is timely. I’ll report back once I’ve tried it out !! Danke Andreas!

developr · 2012-05-18 18:28:32

Gern geschehen, Jakob! Aber geniesse das Wochenende trotzdem.

Hope it works. Originally, I made it for my gallery plugins (which are still in work), but then I have realised that it may be useful having this also in the write-tab.

I am also working on another plugin, an image sorter and editor for the write-tab. But this is in an early stage now. The goal of it is, that article-related images could be managed while editing an article, but without the need to switch to the images-tab.

milosevic · 2012-05-19 06:03:44

Wow, nice idea! I have installed it on my site… but there is some problem with it: can’t see anythink on write and images pages, 100% clear white (no menu, nothing) when the plugin is activated.

I will check for updates to try next versions. Fell free to ask for site diagnosis or any data of my textpattern installation/site hosting to find problems. Diagnosis sais everything is ok and the plugin /res/ files where created ok on activation.

lazyadmin · 2012-05-19 08:13:32

milosevic schrieb:

Wow, nice idea! I have installed it on my site… but there is some problem with it: can’t see anythink on write and images pages, 100% clear white (no menu, nothing) when the plugin is activated.

Same here. First I thought my backend theme is the reason for that – but it isn’t.
Anyway: Thanks for the idea behind it and dankeschön :)

developr · 2012-05-19 08:44:06

Ahh, I have forgotten something important: DropLoader requires an additrional plugin: soo_plugin_pref. I have also changed the original post above.

The symptom is indeed a white screen if soo_plugin_pref is not installed. Sorry for this inconvenience.

I try o change that behavior, so that it fails with an error message instead of a white screen.

Thank you for the feedback, Jorge & Stephan!

Hope it works now as intended.

Zanza · 2012-05-19 08:52:03

It’s working like a charm for me (FF 11). Thanks!

Just some “GUI ideas”:

having to activate the uploader link is far from intuitive for a client: why not to display a little grey box activated by default on which images can simply be dropped? Than, when uploading, you could extend the gray area to give some feedback and other options
Category is ok, but would be possible to have alt and caption field shown too? Alt is required for accessibility in some countries.

I’ve noticed that the plugin is playing nice with multiple article images and is compatible with bot_image_upload! Great work, thank you!

Z-

developr · 2012-05-19 09:48:43

Hi Zanza,

You are right, the trigger isn’t really intuitive. I have already tried to open the GUI automatically when files are dragged onto the browser window. I am failed with this so far, but i think it should be possible somehow. Your idea with the grey box may also be a solution.

The second point is also in my mind, because pictures which are uploaded together are mostly of the same thematic, so appending them the same alt/caption could make sense. Possibly I will add this feature.

But i am also working on another plugin, an image-editor for the write tab. Caption and alt-texts will be directly editable from the write tab with this.

I had a quick look at your cool site. Sadly, my italian knowledge is limited, but the cartoons are really funny. Very good drawings. Is that your work? Great! I like!

uli · 2012-05-19 16:03:52

Andreas, thank you very much for this excellent plugin!
That’s a huge step forward in ease of use! I was smiling like a moron when the first numbers appeared in the article image field =D)

_{(Renamed the topic, beginning it with the plugin’s name, so it’s easier to be found.)}

developr · 2012-05-19 17:43:27

Hello Uli,

Thanks for renaming the topic! And for the flowers… :-)

I had a smile also today, because I found bot_image_upload and tried it immediately, because the description sounds like what I have planned with the article-image-edit. It’s a bit special to install, but it was well worth doing so.

The smile came on my face as I clicked on the “Choose Image”, because the DropLoader is also accessible from the selection screen. Without doing anything… :-))
Just the list refresh is missing, but I have an Idea how to resolve this. It will be in the next release.

And the edit features of bot_image_upload are also very cool, exactly what I had in mind. So I probably stop working on the article-image-edit, because it would really be a duplication of redbots work.

jelle · 2012-05-21 12:36:43

Hi Andreas,

Very nice plugin! I’ve been wanting this behavior for TXP for quite a while, but I’m unable to program it myself. Very nice, thanks.

I’ve installed soo_plugin_pref AND abl_droploader, but I’m still getting a blank screen on the preferences.

developr wrote:

So I probably stop working on the article-image-edit, because it would really be a duplication of redbots work.

Hope not, sounds like your approach is more of an improvement pf redbots work. I’d like to be able to upload/edit pics directly on the write page.

Zanza · 2012-05-21 15:00:55

developr wrote:

Hi Zanza,
I had a quick look at your cool site. Sadly, my italian knowledge is limited, but the cartoons are really funny. Very good drawings. Is that your work? Great! I like!

Thank you very much, developr! Yes, there are some drawings of mine. :)

About your plugin, I second Jelle’s opinion. The difference between bot_image_upload and your method is that bot_i_u plugin gives you the chance to edit images from the write tab, but at the cost of loading the whole image tab interface. A simple way to edit two or three fields for an image without loading the full img tab would be an advantage. Anyway, I’d like the two plugins to continue working together because of the bot plugin re-order capabilities for multiple article images, of for accessing the image tab when you need full metadata editing capabilities.

Z-

Textpattern CMS

Textpattern CMS support forum

#1 2012-05-18 16:09:30

abl_droploader: A native drag & drop multiple image uploader

#2 2012-05-18 17:58:20

Re: abl_droploader: A native drag & drop multiple image uploader

#3 2012-05-18 18:28:32

Re: abl_droploader: A native drag & drop multiple image uploader

#4 2012-05-19 06:03:44

Re: abl_droploader: A native drag & drop multiple image uploader

#5 2012-05-19 08:13:32

Re: abl_droploader: A native drag & drop multiple image uploader

#6 2012-05-19 08:44:06

Re: abl_droploader: A native drag & drop multiple image uploader

#7 2012-05-19 08:52:03

Re: abl_droploader: A native drag & drop multiple image uploader

#8 2012-05-19 09:48:43

Re: abl_droploader: A native drag & drop multiple image uploader

#9 2012-05-19 16:03:52

Re: abl_droploader: A native drag & drop multiple image uploader

#10 2012-05-19 17:43:27

Re: abl_droploader: A native drag & drop multiple image uploader

#11 2012-05-21 12:36:43

Re: abl_droploader: A native drag & drop multiple image uploader

#12 2012-05-21 15:00:55

Re: abl_droploader: A native drag & drop multiple image uploader

Board footer