File Uploader - Documentation / Support

You can sign up for a free File Uploader trial account here.

Application dashboard where you will find all your applications/widgets. Click on 'Manage' button to navigate to it's management page. This is where you access application key, add storage backends/aliases, and more.

From here navigate to application management page to fetch the application key.

By default, AppVital stores uploaded files to an internally managed S3 bucket. If you plan to hook up your own clour storage instead, follow the instructions here in this section.

Head over to dashboard and then navigate to the application management page. Under Storage Settings tab you will see options to add various storage types:

• Amazon S3 Bucket
• Azure Blob Container

File uploader can automatically push the final files to your own Amazon S3 bucket. All regions are supported. You can specify a separate folder path with each instance of file uploader.

Click on Add New Amazon S3 Storage button to add the storage details and use Test button to test and verify the setup before using.

See these helpful screenshots to find the correct S3 bucket region, un-block public access [all public access is blocked by default] and add an IAM policy which is a good pratice but not mandatory.

Find Bucket Region

Un-block public access

IAM Setup (optional)

S3 Access Key ID / Secret Key

S3 File Url

                            
outputfileoptions: {
    storage: [
        {code: 'YOUR-STORAGE-CODE-1', path: '/my-inner-folder/sub-folder/'},
        {code: 'YOUR-STORAGE-CODE-2', path: '/my-inner-folder/sub-folder/'}
    ]
}
                           

IAM Setup

The best practice is to create a new IAM user attached to the following IAM policy to run S3 buckets under, replace YOUR_BUCKET_NAME with the name of your bucket. If required, restrict access [origin or referer] to AppVital domains only, otherwise feel free to remove the condition code block.

                            
{
   "Version":"2012-10-17",
   "Statement":[
      {
         "Effect":"Allow",
         "Action":[
            "s3:GetObject",
            "s3:PutObject",
            "s3:PutObjectAcl"
         ],
         "Resource":[
            "arn:aws:s3:::YOUR_BUCKET_NAME/*"
         ],
         "Condition":{
            "StringLike":{
               "aws:Referer":[
                  "http://apps.appvital.com/*",
                  "http://appvital.com/*"
               ]
            }
         }
      }
   ]
}
                           

S3 Files / Content Delivery

You can use raw S3 URLs for delivery of your files, or setup Amazon CloudFront [or some other CDN] to do the job.

S3 File Url

File uploader can automatically push the final files to your own Azure Blob container. You can specify a separate folder path with each instance of file uploader.

Click on Add New Azure Blob Storage button to add the storage details and use Test button to test and verify the setup before using.

File uploader can automatically push output files to any location using SFTP. You will need the hostname or IP, a user with write permissions and the password. You can also specify folder in which the files will be stored.

Click on Add New SFTP Storage button to add the storage details and use Test button to test and verify the setup before using.

The following snippet of code will give the basic version of file uploader up and running. Options are set to their most common defaults. This code will load, initialize and open the file uploader.

You must replace the value in YOUR-APP-KEY with the your application key. You can find this key using the App Dashboard.

Also add a storage account and replace value in YOUR-STORAGE-CODE with storage code you have associated with the account.

                            
<!-- Include file uploader JavaScript SDK module in your code -->
<script src="https://cdn-apps.appvital.com/app/fpicker/1.0.0/fpicker.min.js"></script>

<script>
    // This initiliazes file uploader with YOUR_APPLICATION_KEY
    const picker = new ApvFilepicker('YOUR_APPLICATION_KEY');

    // Very basic widget cofiguration settings. Replace YOUR-STORAGE-CODE with your storage code.
    var filepicker_options = {
        outputfileoptions: {
            storage: [
                { code: 'YOUR-STORAGE-CODE' }
            ]
        }
    };

    // Open file uploader with basic options
    picker.open(filepicker_options);
</script>

More on Github

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

More on Github

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

More on Github

Also add a storage account and replace value in YOUR-STORAGE-CODE with storage code you have associated with the account.

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.
outputfileoptions		Configuration object with settings to control file(s) output.
outputfileoptions.width For image / photo file types only	null	The target width of the output image file type. If only outputfileoptions.height is set, will automatically be set to the same value.
outputfileoptions.height For image / photo file types only	null	The target height of the output image file type. If only outputfileoptions.width is set, will automatically be set to the same value.
outputfileoptions.resizetype For image / photo file types only	free	Resize mode for output image. Available options fixed, fit, aspectratio and free.
fit - Resizes the image to fit within the specified output width and height dimensions. If only width or height is specified, aspect ratio is maintained. pad resize-confict mode is used as default. free - Constrains image by width or height, if specified.
outputfileoptions.resizeconflict For image / photo file types only	pad	Mode that decides how image resize conflict would be handled. Available values pad, stretch and crop.
pad - Adds background color to resize-confict area of the output image using outputfileoptions.backgroundcolor value. If no background color value is specified, transparent padding is added for PNGs. stretch - Each dimension of the image is stretched independently to specified output width and height, without trying to keep the same ratio. crop - Image is resized and cropped to fit to specified output width and height dimensions, while maintaining the original aspect ratio.
outputfileoptions.fileformat For image / photo file types only	null	The target image file format if needs to be changed from original source file. Avalable values jpg and png.
outputfileoptions.filename	null	Auto-generate output file name if set to auto, keeps original file name otherwise. Example auto-generated file name: fd31d633-2880-4c7d-b136-b0111dd86a79.pdf
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/'}, {code: 'YOUR-STORAGE-CODE-2', path: '/my-inner-folder/sub-folder/'} ] }
outputfileoptions.thumbnails For image / photo file types only	null	Generate photo thumbnails using an array of thumbnails options. Takes filenamesuffix to add a suffix to the output file name. width, height, resizetype, resizeconflict and fileformat properties are same as explained for main output image file.
Code snippet showing example configuration to ouput 2 thumbnails for each photo uploaded. outputfileoptions: { thumbnails: [ { width: 400, height: 225, resizetype: 'fit', resizeconflict: 'crop', fileformat: 'png', filenamesuffix: 'thumb400' //your thubmnail file name suffix }, { width: 200, height: 200, resizetype: 'fit', resizeconflict: 'pad', backgroundcolor: '#6D7E8F', fileformat: 'png', filenamesuffix: 'thumb200' //your thubmnail file name suffix } ] }
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.
inputfileoptions.maxfilesize	null	Defines the maximum file size in bytes allowed for upload
inputfileoptions.note	null	An optional note that shows upon widget load. Comes in handy to show a message or instruction to the user. See example usage:

onUploadDone callback receives an array of file metadata object containing file detail and status. For example:

                            
{
   "extension":".png",
   "fileName":"myPhoto.png",
   "size":"76021",
   "source":"device",
   "storage":"my-storage-code",
   "type":"image/png",
   "uploadId":"4808fa14-d072-4bfa-81d2-fcae585b81cb",
   "width":500,
   "height":375,
   "status":"uploaded"
},
{
   "extension":".pdf",
   "fileName":"myDocument.pdf",
   "size":"76021",
   "source":"googledrive",
   "storage":"my-storage-code",
   "type":"application/pdf",
   "uploadId":"b0ff8c6a-829f-44ab-971a-f6906b1dc5f5",
   "width":0,
   "height":0,
   "status":"uploaded"
}
  
                           

You can personalize photo files by watermarking them before they get uploaded to your cloud storage. A watermark is usually a logo, stamp, or signature superimposed onto a photo. Watermarking photos helps protect them against copyright infringement.

With file uploader, you can watermar photos either using an image, your company logo perhaps, or a custom text. Image used for watermarking must be available on the web [CDN preferred] and accessible by our domain appvital.com and apps.appvital.com.

Following is the example code snippet showing watermark settings for the main and a thubnail image in outputfileoptions section:

                            
outputfileoptions: {
    width: 800,
    height: 600,
    resizetype: 'fit',
    resizeconflict: 'crop',
                            watermark: {
        type: 'image',
        url: 'YOUR-WATERMARK-IMAGE-URL-HERE', //public cdn url preferred
        position: 'bottomright',
        margin: 30,
        marginleft: 10,
        marginright: 30,
        margintop: 30,
        marginbottom: 10,
        opacity: .8,
        scale: 1.0,
        rotate: 0,
        repeat: "no-repeat"
    },
    thumbnails: [{
        width: 400,
        height: 225,
        resizetype: 'fit',
        resizeconflict: 'crop',
        fileformat: 'png',
        filenamesuffix: 'thumb400', 
                            watermark: {
            type: 'text',
            text: 'Text Watermark',
            font: 'Verdana',
            fontsize: 20,
            fontcolor: 'Black',
            position: 'topleft',
            margin: 30,
            opacity: .7,
            scale: 1.0,
            rotate: 0,
            repeat: "no-repeat"
        }
    }]
}
                           

Watermark Parameters

Available Font Colors

Text Watermark Font Colors

Watermark Repeat Options

Watermark repeat-brick

Watermark repeat

Watermark repeat-top

Watermark repeat-middle

Watermark repeat-bottom