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