File Upload / File Picker
Problem
As of DNN 7.1, we have a couple of areas in the application where we allow authorized
users to upload assets to a site. Eg. Control Panel / Tools / Upload File and Admin / File
Management / File Upload. Each of these areas provide a different user interface and
different behavior.
Goal
In the spirit of providing a consistent user experience and reducing our code maintenance
burden in the future, we would like to offer a single method for uploading assets ( which
can still be exposed in multiple areas of the application ). We will use the more modern
File Upload module from the File Management / File Upload area as it offers superior
capabilities such as multiple file upload, drag and drop, etc…
This control will be enhanced with the following features:
Web file source: You often want to utilize documents and images from other sites in your
own site. In order to do this currently, you must download the asset from the remote site
to your local computer and then upload the asset to your own site. This is not always
possible or convenient – especially if you are managing your site on a device such as a
phone or tablet. NOTE: there are copyright issues in using assets from third party sites;
however, that is not the responsibility of our software – it is the responsibility of the
individual user.
Image management interface: This can either be voluntarily accessed by users or set by a
developer as required ( Eg. Uploading a user profile image of a specific size ) where the
user can crop the image, resize, rotate, change contrast and brightness immediately
following upload.
Developer options: Developers should be able to leverage this control in their own
modules and specify file source, destination folder, file decompression and image
management ( required, voluntary, and disabled ).
Solution
We intend to expose the File Management / File Upload module with the suggested
enhancements below to service all file upload (and file picker) functions where applicable
in the DNN platform. It should be noted that many of the scenarios in DNN do not
require the full functionality as described below but it is imperative that the full superset
of functionality be considered when developing this. It should also be noted that this
should be developed with the thought in mind that external developers should be able to
leverage this control and tailor it to their needs ( eg. Setting source, upload destination,
image management [ required, voluntary, and disabled ] )
Enhancements to this control will be:
-
Enhance file upload to be fluid / flexible in order to accommodate skin, dialogue
and various possible contexts.
Ability for user to select file source: from desktop, from web ( user enters Url ),
file select ( using enterprise readiness file picker )
-
-
Ability for user designate upload destination folder
Ability for user determine how to handle compressed files ( zip )
Ability to show users error feedback and actions in same UI as upload progress
Ability to show users images uploaded along with ability to edit / remove images
uploaded
Ability for users to edit images uploaded:
o Image resize, image cropping ( by drag and drop selection and by
numerical input ), brightness, contrast, rotation, undo changes and commit
changes.
Ability for developers to specify file upload source
Ability for developers to specify destination of uploaded file
Ability for developers to specify upload file type
Ability for developers to specify forced image edit process
Ability for developers to specify if image thumbnail view is persistent or not. ( e.g
user profile )
Ability for developers to specify crop value ( disables user control and sets a fixed
crop dimension for users )
Ability for developers to specify file upload limit ( x files )
Enhance multi file upload UI with animated load
Enhance file thumbnail load with animated load
Business Need
Problem with uploader:
There are a number of different implementations of the file uploader in DNN. This
increases code maintenance complexity and greatly impacts the learnability of the
product. By creating a consistent UI / control we will increase product learnability and
reduce the code complexity of DNN.
Problem with image uploader / picker:
Image management is a problem in DNN. Many users are not familiar with image
dimensions and resolution ( pixels ) and consequently users typically upload images that
are too large or too small for their intended use. A great example of this problem is the
DNN Profile image where users can upload portrait or and landscape images.
Unfortunately most references to this image typically call for a square image thus causing
undesirable shrinking or cropping of image.
For purposes of transparency and clarity on the expected functionality we have outlined
all features in one UI; however, this will likely never be surfaced in this manner as
typically many of the options will be pre specified by the developer for their intended use.
Business Challenge
None. Low Risk, High Reward.
User Stories
Enhance file upload (both single and multi file upload)
Card
As a user I want to be able to upload files from my machine to my
DNN site.
Conversation
Confirmation
-
-
-
User must be able to drag files from desktop ( or folder )
into upload UI.
User also must be able to select “browse” which should
allow them to browse and select files to be uploaded.
User should be provided feedback of status of files being
uploaded. ( progress bar until completion then blue
checkmark for success )
Files requiring additional tasks should float to the top of the
list. These files should explain what error or additional task
is and provide actions inline. An examples of such a task
would be uploading files that already exist on the server.
If additional files are selected to be uploaded or drag and
dropped after a set have already been uploaded; their
feedback ( progress bars and files names ) will be prepended
to the feedback list.
Version Details
Enhance file upload (uploading from web)
Card
As a user I want to be able to upload files from the web to my DNN
site.
Conversation
Confirmation
-
User must be able enter a valid URL and select “Load” to
upload the file into the DNN website directly.
File must contain a valid extension that is allowable within
the Host/Safe File extensions list.
User must be able to enter another Url after selecting load.
Each file uploaded will be prepended to the feedback list
below.
Version Details
Ability for users designate upload destination folder
Card
As a user I want to be able to determine where I am uploading my
files to.
Conversation
Confirmation
-
User is provided a folder selector (enterprise readiness
folder selector) to select the destination of their files.
Version Details
Ability for users to determine how to handle compressed files ( zip )
Card
As a user I want to be able to determine if the compressed files I am
uploading should either remain compressed or be decompressed
upon upload.
Conversation
Confirmation
-
User must be able to select file to be decompressed or
remain compressed
Decompressed files should open and appear in the uploaded
files list. Additional actions (e.g. duplication ) should appear
at the top of the list so users can view these and take action.
Version Details
Ability to show users error feedback and actions in same UI as upload progress
Card
As a user I want to be able to see what errors occur during the
upload process and be able to take action on them at that time.
Conversation
Confirmation
-
-
If files require additional actions they should be moved to
the top of feedback list so that the user can view them and
take appropriate action.
Modal close buttons are disabled until actions are completed.
Clicking on either should cause items with actions to flash,
informing the user that actions must be taken before
proceeding.
Version Details
Ability to show users, images uploaded along with ability to edit / remove images
uploaded
Card
As a user I want to be able to see images I have uploaded.
Conversation
Confirmation
-
When uploading files to my DNN site I want to be able be
able to see the files I have uploaded. If images exist as part
of the set that has been uploaded then then their thumbnails
should appear in the thumbnail image tray to the left of the
upload form. The file upload form should be fluid and flex
to accommodate this image tray.
-
There will be a set max-width for all images ( ~ 150px )
however images can be of smaller width.
Images uploaded can be either edited or removed from the
via the controls that appear on hover of the thumbnails.
Upon hover of the thumbnail the title tag attribute should be
used to show the images’ file name.
If many images exist than the file upload form and image
tray will expand to a max height of 600px to accommodate;
additional images will be scrollable within the image
thumbnail tray.
Version Details
Ability for users to edit images that have been uploaded
Card
As a user I want to be able edit my images as upload them into my
DNN site.
Conversation
Confirmation
-
Upon uploading an image, the image tray should slide in
-
-
-
from the left. The upload form should flex to accommodate.
User can click on the pencil icon that appears on hover of a
thumbnail. The pencil icon remains highlighted and the
thumbnail will get a blue border as long as the image is being
edited.
Upload form should fade out and edit image UI should slide
in from the right.
If the user chooses to delete the current image ( via
thumbnail hover controls ) or edit/delete another image from
the image tray then the user should be prompted to either
apply or lose changes for the current image if changes have
been applied.
User can toggle visibility of the image tray on the left with
the arrow button at the top of the edit image UI.
Version Details
Ability for users to crop images that have been uploaded
Card
As a user I want to be able crop images I have uploaded as I load
them into my DNN site.
Conversation
Confirmation
-
-
Upon selecting crop from the available functions, the picture
should be covered by a mask at 50% opacity. A crop area
should appear ( default size is 100px x 100px ).
On hover of crop area handles; mouse should change to show
appropriate actions.
On hover of the crop area the mosue should change to
indicate that the crop area can be moved, until edit image
viewport is reached.
User can drag corners to pull and resize crop area.
User can drag crop area.
User can set crop dimensions via task toolbar.
As user resizes crop area the crop dimension inputs should be
updated with current values so as to provide feedback of size.
Crop is applied when the user clicks on “apply changes”.
If user applies a crop area and selects another function a
javascript dialogue should be presented that asks the user to
apply the crop.
-
Version Details
Ability for users to change the brightness of image that have been uploaded
Card
As a user I want to be able change the brightness of my photos as I
upload them into my site.
Conversation
Confirmation
-
When the brightness feature has been selected the task
toolbar should show a slider that allows user to change the
brightness to either brighter or darker. The center of this
slider represents the original state of the image.
Version Details
Ability for users to change the contrast of image that have been uploaded
Card
As a user I want to be able change the contrast of my photos as I
upload them into my site.
Conversation
Confirmation
Version Details
-
When the contrast feature has been selected the task toolbar
should show a slider that allows user to change the contrast
to either more or less contrast. The center of this slider
represents the original state of the image.
Ability for users to change the rotation of image that have been uploaded
Card
As a user I want to be able change the rotation of my photos as I
upload them into my site.
Conversation
Confirmation
-
When the rotation feature has been selected the task toolbar
should show two sets of buttons ( features ). Ability to flip
an image vertically, flip an image horizontally, rotate the
image 90 deg. Clockwise and 90 deg. Counter Clockwise.
Version Details
Ability for users to change the size of image that have been uploaded
Card
As a user I want to be able change the size of my photos as I upload
them into my site.
Conversation
Confirmation
-
In the top right corner of the edit image UI users can use
the slider to resize the image. Image in the edit image UI
view port should change as the user moves the slider toggle.
Version Details
Ability for users to undo changes applied to an image.
Card
As a user that has uploaded an image and applied some change I
would like the ability to undo that change.
Conversation
Confirmation
-
-
users should be provided the ability to undo changes until
they arrive at the original. ( within reason; if performance is
affected than a limit should be set )
If no changes have been applied, the undo button should be
disabled and appear as such (standard disabled style).
Users can undo cropping changes.
Version Details
Ability for developers to specify file upload source
Card
As a developer I want the ability to specify one method of upload
( either web or browse )
Conversation
Confirmation
Version Details
-
Uploader should only show form fields for selected method.
Ability for developers to specify file upload destination
Card
As a developer I want the ability to specify the destination folder of
uploaded files.
Conversation
Confirmation
- There are three options: recommended destination folder
( which still shows a folder picker UI but shows the
recommended folder path ) or sole folder destination
( folder selector does not appear in the UI ) and the default
folder destination.
Version Details
Ability for developers to specify upload file type
Card
As a developer I want the ability to specify that only certain file
type are acceptable.
Conversation
Confirmation
- Only file types specified by developer should be allowed
to be uploaded into the DNN site. If invalid file type is
uploaded then an inline message is displayed conveying that
it is an invalid file type and to upload the file type specified
by the developer.
Version Details
Ability for developers to specify forced image edit process ( forced crop )
Card
As a developer I want the ability to specify that when an image is
uploaded it should be forced into edit mode. This applies to single
image uploads only.
Conversation
Confirmation
-
-
When an image is uploaded then the thumbnail tray should
appear, edit mode should be automatically triggered, and
edit image UI should appear.
Developer should be able to force crop function before
applying any others.
Cancel option is disabled until crop has been applied.
Clicking on edit pencil to close edit state is disabled until
-
crop has been applied.
User can undo a crop that has been applied but will return
back to crop state until a crop has been applied.
Version Details
Ability for developers to specify image tray ( thumbnail view ) is persistent
Card
As a developer I want the ability to specify that the image tray
remains open.
Conversation
Confirmation
-
Image tray on file uploader appears regardless if an image
has been uploaded or not.
Place holder image thumbnail should appear.
Upon upload of an image a loader should be used prior to
replacing the thumbnail.
Version Details
Ability for developers to specify crop value
Card
As a developer I want the ability to specify the dimensions by
which I want uploaded images to be cropped.
Conversation
Confirmation
-
Crop dimensions remain fixed ( handles on edit UI cannot
change proportion of developer specified dimensions )
User can move crop window around to select appropriate
crop portion of image.
Crop dimension inputs/values in edit image UI are disabled
and show developer entered dimension values.
Version Details
Ability for developers to specify upload limit.
Card
Conversation
As a developer I want the ability to specify the maximum number
of uploads at one time.
Confirmation
-
User can only select browse for x file(s) at a time, or drag
and drop x file(s), or x file(s) from web url.
Version Details
Ability for developers to specify that the uploader be used in file picker mode.
Card
As a developer I want to be able to specify file picker mode that give
users the ability to select images from computer, web, and the local
file system ( of the DNN site ).
Conversation
Confirmation
-
Users should be able to select files locally aside from
uploading.
File picker should use the enterprise readiness file picker.
-
Version
Details
Enhance file thumbnail load with animated load
Card
As a user I want to be provided feedback that the system is
processing my request.
Conversation
Confirmation
-
When an image is being uploaded and the image tray has
been set to be persistent the default thumbnail should be
replaced with a loading spinner until the image has been
loaded and thumbnail created.
Version Details
Enhance multi file upload behavior; last file loads at the top of the feedback list
Card
As a user I want to be provided feedback when new files are added
to the upload que.
Conversation
Confirmation
-
New files to be uploaded are prepended to the feedback list.
Version Details
Enhance multi file upload UI with animated load
Card
As a user I want to be able to visually track the feedback which
means removing abrupt changes in the UI.
Conversation
Confirmation
-
-
When multi files are being uploaded the feedback column
should scroll ( via animation ) to accommodate:
o New files being uploaded
o Files requiring additional actions
When files are added to the upload cue they should be
prepended to the feedback list. List should move down to
accommodate space for new items; then items should fade
in.
Version Details
Update DNN where uploader is currently being used
Card
As a user I expect that the file uploader / picker functionality and
design be consistent throughout the DNN admin.
Conversation
Confirmation
-
File manager / document library
User profile > Manage Profile ( image uploader )
Control Panel > Tools > Upload File
Admin > Site Settings > Basic Settings > Appearance >
Version Details
Technical Details
Logo ( image uploader )
Admin > Site Settings > Basic Settings > Appearance >
Body Background ( image uploader )
Admin > Site Settings > Basic Settings > Appearance >
Body Background ( image uploader )
Admin > Languages > Add new Language
Host > Dashboard > Install Dashboard Control
Host > Extensions > Install Extension Wizard
Host > File Management
Host > Host Settings > Upload Skin / Container
Host > Configuration Manager > Configuration Merge
Scripts > Choose file
Host > SQL > Choose File