SK.UI.FileUpload

• Overview
• Include Resource Files
• Default Options and Configuration
• Methods
• Events
• Examples

Overview

The File Upload Control is used to upload files to a specified location on the Web server. It is HTML5-based and extends the UI with drag & drop upload feature. The users are able to drag files from their desktop (local filesystem) as well as from the current or another browser window. Or the file can be uploaded from URL. The class that controls the File Upload Control is SK.UI.FileUpload.
​

Preview of File Upload Control
 

​


 

Include Resource Files

The FileUpload class is included by default within the Admin area of the web site builder, however the File Upload can be used for File Upload Control in the published web site as well, for instance if an application requires file upload control. In that case the file dependencies need to be included.

• /Shared/UIComponents/Internal/FileUpload
  • css/styles.css

       <link type="text/css" rel="stylesheet" href="/Shared/UIComponents/Internal/FileUpload/css/fat_file_upload.css">

  • /Scripts/fat_file_upload.js

       <script type="text/javascript" src="/Shared/UIComponents/Internal/FileUpload/Scripts/fat_file_upload.js"></script>

Default Options and Configuration

Preview options:

• type - Preview type. Available options are: "file_name", "flash", "image" and "none".
• width - For "image" and "flash" this is the width of the image or the flash animation. The default one for "image" and "flash" is 200px. For "file_name" he text width of the file name in the preview. if it is a number, then the file name will be clipped, default is 'auto'.
• height - Available for preview type "image" and "flash". This is the height of the image or the flash animation.
• keep_proportion - Available for preview type"image". Whether or not to use image proportions for the preview. If value is set to 'false' - image preview area will ignore image proportions and can accept custom width and height values. Default is 'true'.
• show_file_size - Available for preview type "file_name". The size of the file will be shown if the size property is defined and show_file_size is set to true. Default is "true".
• show_icon - Available for preview type "file_name". Whether ot not to show the file type icon (doc, img, video, flash). Default is 'false'

Allowed formats and size for validator options are:

• allowed_formats
  • images - "bmp","gif","jpg","jpeg","png","tif","svg"
  • video - "3g2","3gp","asf","asx","avi","flv","mov","mp4","mpg","rm","swf","vob","wmv"
  • documents - "txt","doc","docx","rtf","txt","csv","pps","ppt","pptx","sdb","wks","xls","xlsx","xml","svg","pdf"
  • audio - "aac","aif","iff","m3u","mid","midi","mp3","mpa","ra","wav","wma"
• allowed_max_size - Maximum file size in bytes that is valid. If it is 0 then the size validation will not be made

Methods

Events

Examples

Creating a file upload instance:

<link type="text/css" rel="stylesheet" href="/Shared/UIComponents/Internal/FileUpload/css/fat_file_upload.css">
<script type="text/javascript" src="/Shared/UIComponents/Internal/FileUpload/Scripts/fat_file_upload.js"></script>
<!-- CSS -->
<!-- We are able to control the width (or other CSS styles) of the default drop-zone by CSS. 
It has a class fu-dropzone referring to the main wrapper. When custom class is added to the main wrapper, 
we can address a CSS selector. -->
<style type="text/css">
#demo-uploader-dnd {
   width: 350px;
}
#demo-uploader,
#uploaded-image {
   margin: 10px 0;
}
</style>

<!-- HTML -->
<p>Uploaded Image will appear below</p>
<div id="uploaded-image"></div>

<p>File Uploader</p>
<div id="demo-uploader-dnd"></div>
<div id="demo-uploader"></div>

<!-- JavaScript -->
<script type="text/javascript">
var uploader = new SK.UI.FileUpload({
   container            : 'demo-uploader',
   dz_container         : _$('demo-uploader-dnd'),
   show_upload_button   : true,
   url                  : '',
   url_input_width      : 200,
   validator            : {
      allowed_formats : ['images']
   },
   buttons              : {
      list  : ['change','delete']
   },

   preview              : {
      type           : 'image',
      width          : 212,
      height         : 112,
      show_file_size : true,
      show_icon      : false
   },

   add_from_url_button_caption : 'Add Image',
   dz_caption_add              : 'Drag & Drop to Add Image',
   dz_subcaption_add           : 'or click anywhere to choose file',

   onButtonChange : function () {
      _$('uploaded-image').setStyles({
         width: '',
         height: ''
      }).empty();
   }.bind( this ),

   onButtonDelete : function () {
      _$('uploaded-image').setStyles({
         width: '',
         height: ''
      }).empty();
   }.bind( this ),

   onComplete : function ( url ) {
      var image = new Element('img', {
         id       : 'image-area',
         src      : url,
         styles   : {
            width             : '100%',
            height            : '100%',
            'background-size' : 'cover'
         }
      });
      _$('uploaded-image').setStyles({
         width: '350px',
         height: '250px'
      }).grab( image );
      this.fireEvent('uploaded');
   }.bind( this )
});
</script>