Difference between revisions of "Multilingual files uploader"

From PKP Wiki
Jump to: navigation, search
(Moved multilingual files uploader page to its own page.)
 
(Better formating)
(3 intermediate revisions by one user not shown)
Line 1: Line 1:
= 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.  
 
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 ==
+
= 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.
+
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 ===
+
== Use cases ==
  
 
Users trying to upload multiple issue covers or uploading website homepage image.
 
Users trying to upload multiple issue covers or uploading website homepage image.
  
=== Mockup ===
+
== Mockup ==
 
[[File:Multilingual image uploader.png]]
 
[[File:Multilingual image uploader.png]]
  
Line 26: Line 24:
 
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.  
 
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 ===
+
== 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.
 
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.
Line 32: Line 30:
 
Anyway, if we want we can also change the plupload to another widget and make sure it works for this multilingual file upload.
 
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 ==
+
= Other file types =
 +
 
 +
== Use cases ==
 +
 
 +
We need to be able to upload multilingual files for galleys.
 +
 
 +
== Mockup ==
 +
 
 +
This is the proposal following the same logic from the image uploader.
 +
 
 +
[[File:Multilingual file uploader.png]]
 +
 
 +
== Implementation details ==
  
Actually we don't have any use case for this. If it appears, we should follow the same logic from the image uploader.
+
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.

Revision as of 11:02, 15 April 2013

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.

Mockup

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.

Mockup

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.