File Uploader - Overview

Step 1
Free Sign Up

Get Started

Getting started is fast, free, and easy. Head over file uploader's pricing page and pick a plan that suits your needs. Grab the appliation key to use with quick setup code.

Step 2
Visit File Uploader Dashboard

Setup Storages

Add your storage accounts that file uploader can use to save the output files. We currently support Amazon S3, Azure Blob and SFTP storages, working on to add more.

Step 3
Use quick start Code

Add Widget To App

Add file uploader to your application using quick start code. Use application key, storage code/alias and other configuration settings to start using the widget.

Get started quickly with minimum configuration and improve user experience of your application using one of the three File Uploader implementations

Sign up for - or sign in to AppVital

Already have a AppVital account? Go ahead and skip this part.

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

  • When you sign up, you'll be asked to verify your email address before you can login to your account dashboard.
  • Once you finish the onboarding flow, you'll arrive at your account dashboard. This is where you'll be able to access your file uploader application key and setup up your cloud and SFTP storage accounts, and more.

Obtain Application Key

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.

appvital file uploader dashboard

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

appvital file uploader application api key

Storage Accounts / Aliases

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

Add Amazon S3 Storage

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.

appvital file uploader storage setup amazon s3 bucket

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.

Important! Use Storage Code to hook up storage accounts to the file uploader.
                            
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.

Add Azure Blob Storage

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.

appvital file uploader storage setup azure blob container

Add SFTP Storage

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.

appvital file uploader storage sftp ftp

Quickstart: Javascript

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.

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/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

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

Also add a storage account and replace value in YOUR-STORAGE-CODE with 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.
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:

Callbacks

Name Function Description
onOpen () Fires when file uploader has been initialized and is ready.
onClose () Fires when file uploader popup is closed.
onCancel () Fires when file uploader is canceled.
onUploadStarted () Fires when file(s) uploading starts.
onUploadError (error) Fires when file(s) upload is failed returning string error message.
onUploadDone (PickerResponse) Fires when uploading completes with response containing an array of metadata of each file uploaded, including image thubmnails if any.
                                            
var options = {
  multiple: true,
  maxfiles: 3,
  onUploadDone: uploadDone_callback,
  onUploadError: uploadError_callback
}

function uploadDone_callback(data) {
  console.log('files uploaded !!');
  console.log(data);
}

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

picker.open(options);
  
                           

File Uploader Response

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"
}
  
                           
Param Type Description
uploadId string Unique identifier of the uploaded file.
fileName string Name of the uploaded file. Value here depends if outputfileoptions.filename option is set.
type string Mimetype of the uploaded file.
extension string Extension of the uploaded file.
size integer Size of the uploaded file in bytes.
source string Source of the uploaded file. locl device, facebook, url, camera etc.
status string Status of the uploaded file. File succesfully uploaded and stored shows uploaded, othewise failed
width int Width of the image type file in pixels.
height int Height of the image type file in pixels.

Watermark Options

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

Param Type Description
type string Type of watermark, text or image.
url string Url of the image that needs to be used for watermarking. Image must be available on the web [CDN preferred] and accessible by our domain appvital.com and apps.appvital.com. Url is madatory if watermark type is image.
Note: Orginal size of the watermark image will be superimposed onto the target photo unless scaled up or down using scale option.
text string Custom text for watermarking. Madatory if watermark type is text.
font string Name of the font for text watermark. Default Arial type font will be used if not provided. See list of available fonts below.
fontsize int Size of the font in pixels for text watermark.
fontcolor string Color of the font for text watermark. See available color names in the table below.
position string Placement of watermark on the photo. Available options are topright, topleft, bottomright, bottomleft and middle. bottomright is default which is the most commonly used position for watermarking.
margin int Sets margin applied to all four sides of the watermark in pixels.
Note: other margin params are ignored if this has value greater than 0.
margintop int Sets the top margin of the watermark in pixels.
marginbottom int Sets the bottom margin of the watermark in pixels.
marginleft int Sets the left margin of the watermark in pixels.
marginright int Sets the right margin of the watermark in pixels.
opacity decimal Sets the opacity or transparency level for of the watermark. 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
scale decimal Scales [increase or decrease] size of the applied watermark. 0 is not scaled at all, 0.5 is watermarked size reduce to 50% from the original size. 2 being watermark size is doubled. Valid range 0 to 10.
rotate int Sets rotation of the applied watermark at given angle. Valid angle range 1 to 360
repeat string Sets how the watermark is repeated along the horizontal and vertical axes, or not repeated at all. Available options are no-repeat, repeat-brick, repeat-top, repeat-middle and repeat-bottom. See examples shown below.
Available Watermark Fonts

Available Font Colors

Watermark Repeat Options

Dynamic URL-based Image Transformations

File uploader can be configured to generate multiple photo thumbnails of various sizes and types, and push the files to your cloud / SFTP storage. This is acheieved using the outputfileoptions.thumbnails setting.

However, if you need dyanmic URL-based manipulation without having multiple versions of each image, and you're using Amazon S3 Bucket as storage, you can take advantage of AWS Serverless Image Handler solution to achieve this feature in an easy and cost-effective manner. This solution currently supports multiple filters on an image appended to the CloudFront URL. Example:

https://YOUR-CLOUDFRONT-URL/fit-in/300x400/filters:fill(00ff00)/filters:rotate(90)/YOUR-IMAGE-FILE.jpg
                           

Other cloud platforms might have such solution in the pipeline to be available in the near future.

Sign up for - or sign in to AppVital

Already have a AppVital account? Go ahead and skip this part.

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

  • When you sign up, you'll be asked to verify your email address before you can login to your account dashboard.
  • Once you finish the onboarding flow, you'll arrive at your account dashboard. This is where you'll be able to access your file uploader application key and setup up your cloud and SFTP storage accounts, and more.