File Uploader - Overview

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

From here navigate to application management page to fetch the application 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.

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

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.


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.
<!-- 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>
Quickstart: Angular
Grab our Angular SDK from NPM, and look for example code implemenations to get started in a jiffy!
Quickstart: React
Grab our React SDK from NPM, and look for example code implemenations to get started in a jiffy!
Options
Also add a storage account and replace value in YOUR-STORAGE-CODE with storage code you have associated with the account.
Callbacks
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 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
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.