Multilingual files uploader

From PKP Wiki
Revision as of 11:02, 15 April 2013 by Beghelli (Talk | contribs) (Better formating)

Jump to: navigation, search

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_input fiels 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

Use cases

We need to be able to upload multilingual files for galleys.


This is the proposal following the same logic from the image uploader.

Multilingual file uploader.png

Implementation details

The idea is basically to show a grid style rows markup, with columns and actions, but cleaner and only if user mouse hover or tab inside the file area.