PKP Library Widgets

From PKP Wiki
Revision as of 09:59, 12 April 2013 by Beghelli (Talk | contribs) (Add multilingual uploader specs and mockup proposal)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Multilingual Uploader

We need a widget that allows the upload of files in a multilingual scenario. Here we spec out only a multilingual uploader for image files, though it can be extended later to handle other file types.

Image files

We try to use the same logic of our multilingual fields because the requirements are the same: user needs to be able to see and edit all localized data for the field at once, without any modification in the user interface language and also no other control outside the field itself.

Use cases

Users trying to upload multiple issue covers or uploading website homepage image.


Multilingual image uploader.png

This is a proposal. State 1 is the default one. We can use a bigger thumbnail, but it must be always a fixed size, so we can make sure that the page layout will not break depending on the size of the original image.

After user tabbed or mouse hover the image controller, the second state is shown.

If user mouse out with no clicking inside any link of the multilingual controller, than it will disappear.

If user clicked in any link (info or delete), it can perform those actions and the multilingual will still be opened. It will only close if user clicks outside, just like the default multilingual (maybe we can add a close icon at the top right of the multilingual controllers to make it obvious).

The actions will open a modal (info and upload) and a confirmation modal (delete). The upload action can directly open a file browse to add a file if no other data is required for the file (like alternate text). If alternate text is required, than it should open a modal with both fields.

The info modal can show the filename, size, dimensions, a real image size, etc. But that can be secondary. The primary goal is to present to users a quickly visualization of each file, so they can decide what to do.

Implementation details

I think that we can still use plupload widget to implement this. The only modification will be the case where we want to upload a file directly without any other actions, like add and after upload. I think that's not too complicated to make the plupload trigger itself the upload action after a file is added. Then we can just use the add action, rename it to upload and hide anything else from the plupload widget.

Anyway, if we want we can also change the plupload to another widget and make sure it works for this multilingual file upload.

Other file types

Actually we don't have any use case for this. If it appears, we should follow the same logic from the image uploader.