File Uploader Gallery - Widget

Quickstart: Javascript

Get the basic version of the File Uploader Gallery widget up and running using the following snippet of code. Options are set to their most common defaults. This code will load, embed the file uploader in the specified container DIV element.

You must replace YOUR_APPLICATION_KEY obtained from the App Dashboard.

If you intend to use your own cloud storage instead of default AppVital internal cloud storage. Add the storage account and replace YOUR_STORAGE_CODE with the storage code you have associated with the account.

Files get uploaded to your storage account(s) and their metadata is returned via onUploadDone callback event data.
                            
<!-- Include file uploader JavaScript SDK module in your code -->
<script src="https://cdn-apps.appvital.com/app/fugrd/1.0.0/fugrd.min.js"></script>

<!-- Container to render file upload widget in-->
<div id="widget_container"></div>   

<script>
  // Replace YOUR_APPLICATION_KEY with a key obtained from https://appvital.com/dashboard
  const fuploader = new ApvUploaderGallery('YOUR_APPLICATION_KEY'); 

  // Setup basic options and make a call to 'create' method
  var uploader_options = {
    multiple: true,
    directoryupload: false,
    onSuccess: uploader_callback_success
  };
  if(fuploader){
    fuploader.create(uploader_options, "widget_container"); 
  }
  
  // Hook up to onSuccess callback to get and process uploaded file metadata object
  function uploader_callback_success(data) {
    console.log(data);
  }
</script>


More on Github

Quickstart: Angular

Grab our Angular SDK from NPM, and look for example code implemenations to get started in a jiffy!

More on Github

Quickstart: React

Grab our React SDK from NPM, and look for example code implemenations to get started in a jiffy!

More on Github

Options

Option Default Description
multiple false Enables (if set to true) or disables (if set to false) the selection of multiple files. If set to false, the user can select only one file at a time.
maxfiles 5 Maximum number of files allowed to upload. Defaults to 5 when multiple option is set to true.
directoryupload false Switch that indicates whether the folder or files can be browsed and uploaded using the widget. When enabled, the uploader component processes the files by iterating through the files and sub-directories in a directory. It allows you to select only folders instead of files to upload.
outputfileoptions Configuration object with settings to control file(s) output.
outputfileoptions.tags null Tag output files being saved to Amazon S3 or Mircosoft Azure Blob storage using an array of key-value pairs.
For Mircosoft Azure Blob storage, tagkey should be a valid C# identifier.
                                            
outputfileoptions: {
    tags: [
        { tagkey: 'mytagkey1', tagvalue: 'mytagval1' },
        { tagkey: 'mytagkey2', tagvalue: 'mytagval2' },
    ]
}
                           
outputfileoptions.storage null Connect file uploader with your storage accounts using an array of key-value pairs. Replace YOUR-STORAGE-CODE value with your own storeage code that you setup at the widget dashboard.

Setup file path while using AppVital's default internal storage option

                                            
outputfileoptions: {
    storage: [
        {path: '/my-inner-folder/sub-folder/'}
    ]
}
                           

Hook up file uploader with your storage accounts.

                                            
outputfileoptions: {
    storage: [
        {code: 'YOUR-STORAGE-CODE-1', path: '/my-inner-folder/sub-folder/'}
    ]
}
                           
inputfileoptions Configures the validation options for input or uploaded files.
inputfileoptions.allowedfileformats null A comma separated list of the file extensions which are allowed for upload.
jpg,png,xml,pdf,zip
inputfileoptions.maxfilesize null Defines the maximum file size in bytes allowed for upload
inputfileoptions.note null An optional short note that shows upon widget load. Comes in handy to show a message or instruction to the user. See example usage:
                                            
inputfileoptions: {
    allowedfileformats: 'doc,docx,pdf,txt,zip',
    maxfilesize: 10000000,
    note: 'DOC, DOCX, PDF, TXT and ZIP files only. 10MB max.'
}
                           
files
For use with AppVital internal storage only
null This property allows you to preload the list of files that are already uploaded. By default, the files are set to uploaded successfully state on widget load. The following properties are required to configure the preloaded files:
  • name - Full name of the file with extension.
  • size - Size of the file in bytes.

If not at the root cloud folder, files must be available in the configured storage path [outputfileoptions.storage > path], if any.
                                            
files: {
    { name: 'movies.jpg', size: 55000 },
    { name: 'books.pdf', size: 82000 },
}
                           

Callbacks

Name Function Description
onReady () Fires when file uploader has been initialized and ready.
onCancel (e) Fires when the upload was cancelled while in progress.
Event data
e.files, array of the canceled files metadata.
onSelect (e) Fires when a file is selected.
Event data
e.files, array of the selected files metadata.
onError (e) Fires when an upload or remove operation fails.
Event data
e.operation - The upload or remove operation.
e.files - Array of affected files uploaded or removed.
onUpload (e) Fires when one or more files are about to be uploaded.
Event data
e.files - Array of files started to upload.
onRemove (e) Fires when one a file removal is initiated.
Event data
e.files - Array of files being removed.
onRemove (e) Fires when one a file removal is initiated.
Event data
e.files - Array of files being removed.
onSuccess (e) Fires when an upload or remove operation succeeds.
Event data
e.operation - The upload or remove operation.
e.files - Array of successfully uploaded or removed files.
                                            
var options = {
  multiple: true,
  maxfiles: 3,
  onSuccess: uploadSuccess_callback,
  onError: uploadError_callback
}

function uploadSuccess_callback(e) {
  console.log('files uploaded !!');
  console.log(e);
}

function uploadError_callback(e) {
  console.log('upload failed !!');
  console.log(e);
}
  
                           

File Uploader Success Response

onSuccess callback receives an array of file metadata object containing file detail and operation performed.

                            
{
   "files":[
      {
         "extension":".jpg",
         "name":"books.jpg",
         "size":50021
      }
   ],
   "operation":"upload"
}