File Uploader Pro - Widget

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.