Home

HTML5 Upload is a file upload app to upload images, documents and files using Ajax. HTML5 File Upload plug-in supports multiple file selection, drag & drop, progress bar, auto file upload, file input validation and preview images. Plug-in is developed using HTML5, jQuery, mustache templates and Bootstrap 3.0 framework

By defualt uploaded files are saved in the fileupload directory in the parent root dirctory. If fileupload directory doesn't exist, App creates a new directory in the root directory.

File upload directory can be configured in portlet preference mode or portlet.xml file. Set the value for the portlet init parameter

default-upload-location in the portlet.xml to upload files to the configured folder .


    <init-param>
        <name>default-upload-location</name>
        <value>/fileupload/</value>
    </init-param>
 
See more on Customization

Features :

  • Multiple files selection.
  • Drag and drop files into upload queue.
  • Preview images before upload.
  • Portlet edit mode support for configuring upload file destination.
  • Configurations for view, delete, upload and download file permissions.
  • View uploaded files.
  • Download uploaded files.
  • Delete uploaded files.
  • Resize images.
  • Convert uploaded images to JPEG or PNG.
  • Mobile and Tablet support.
  • Mustache templates for Mobile and Desktop browsers.
  • Responsive design support using twitter bootstrap framework.
  • Localization support (Sample French bundle included in the Portlet).
  • Upload queued files by AJAX.
  • Submit additional form data along with file upload.
  • View uploads process by progress bars.
  • Remove unwanted images from upload queue.
  • Input file validations type, size etc (see Options).
  • Auto file upload.
  • Powerful, documented API — public methods, options and callbacks
  • Plug-in UI is developed using jquery widget framework, mustache templates and bootstrap framework can easily extendable and customizable.
  • Easy to customize file upload implementation as File Upload Implementation is developed using java interfaces. Customers can write their own implementations like storing the uploaded file into the database instead of file system, without changing the Portlet code.
  • Very simple configuration
  • Developed as per JSR 286 specification

Coming Soon:

  • Crop Image

Browser Support and Device Support:

    Desktop Browsers:

  • Mozilla Firefox 28 (Tested) works on older versions with HTML 5 support.
  • Google Chrome 33 (Tested) works on older versions versions with HTML 5 support.
  • Microsoft Internet Explorer 10.0+ (Tested) works on latest 11.0  versions with HTML 5 support


    Mobile Browsers:

        Plug-in is provides OOTB mobile template to support mobile devices.

  • iphone 4 and 5 .
  • Samsung Galaxy S III  and Galaxy Nexus.
  • ipad 3 and 4.

        Note: Tested on chrome browser emulator


Configuration:

The Ajax File Upload widget is initialized by calling the ajaxfileupload method on a jQuery collection with the target HTML element:

Basic configuration:

jQuery("#fileupload").ajaxfileupload();

Advance configuration with options:

var options = {
            uri:"uploadActionUrl",
            maxFileSize:100,
            validFileTypes:["png","pdf","exe","zip","jpg","ppt"],
            maxFileUploadCount:5,
            dropzone:'dropPannel',
            contextPath:contextPath,
            thumbnail:false,
            autoUpload:true
           };

jQuery("#fileupload").ajaxfileupload(options);

Note: contextPath is required to show the file type default images (ex:zip, doc).

where "fileupload" is the html form Id, refer to Options section for all available options. 

Submit additional form data:

No additional configuration required for submitting additional form data for example adding a text boxes, check boxes etc.  Plug-in will take care of submitting additional form data along with the upload files. Refer to "demoView.jsp" files in bundled software for information.