File upload

You can deal with files using tables connected to Appframe File Store. File links are manually created using data-attr. A upload context (which sets up drag and drop area) is set using data-upload="uploadContextName". A dedicated upload can be set up using data-upload-target="uploadContextName".

or drag and drop from your computer

Additional options

By default, it will add drop hover text to upload container. To change text, use data-upload-hovertext="Custom text". Use data-hide-backdrop="true" to hide hover text.

uploadContextName can be used in javascript to extend file upload.

Use uploadContextName.setCurrentPrimKey(PrimKey) to set or change current file PrimKey. Usefull for example if you need to update file, instead of inserting new one.

Use uploadContextName.manualUpload(true) to enable manual upload mode. In this mode, files are not processed directly to server, instead they are stored in file upload object. There are several methods available:

  • removeFile(pFile) - will mark file as deleted in upload list.
  • save(pCallback) - will process files to server and will return callback if it is specified.
  • files() - will return all files added to the uploader. Note: it will also return removed files, which will have deleted flag.
  • getFilesCount() - will return files count. It will not count removed files.
  • getFilesCount() - will return files count. It will not count removed files.
  • removeAllFiles() - will mark all files as deleted.
  • removeDeletedFiles() - will remove all delted files.
  • addExifData(status) - if set to true. It will parse exif data from image and add info to files() as file.exifdata = {...}. Will add exif data only if such exists.
  • setCustomHeaders([ {header: value} ]) - can be used to set additional headers for the XMLHttpRequest. Takes an array of {"header": "value"} items.

Set appendFiles(true) in manual upload mode for all files to be appended to upload list. Otherwise new files will replace existing list. Default is false. Useful when you want to create list of files with several drags or selects.

In manual mode you might not be interested in the auto-generated URLs and would require a specific URL to be targeted instead. This can be achieved by using'your url here' attribute on the upload context DOM container.

To register event use uploadContextName.attachEvent("onFilesUploaded",function(param){...}) in javascript file. These methods are available:

  • onFilesUploaded - will fire after files are uploaded to the server. param will return uplaoded files.
  • onBeforeUpload - will fire before sending files to the server. Useful to add additional fields for file store, by using param.append("field",value).
  • onManualUpload - will fire after files are added to upload list. param will return last added files.
  • onError - will fire on error. param will return error message.
  • onCancel - will fire if upload has been cancelled by the user.

Example of using manual handling of the file upload:


vedlegg.attachEvent("onManualUpload", function(){

vedlegg.attachEvent("onBeforeUpload", function(pForm){
    // append extra attributes to the dataobject before it saves to the database
    pForm.append("BoolFieldname", true);

$("#saveToDB").on("click", function() {
    // save files to the database{
        // do whatever after files is uploaded here...

function drawFilesToDiv(){
    // clears existing content of the div we would like to place the files in.
    // loops though all files and checks if it's not deleted, then append it to an existing div
    $.each(vedlegg.files(), function(pKey, pItem){
        if(!pItem.deleted && !== undefined){
            var vDiv = "
" + + "
"; $('#filesArea').append(vDiv); } }); }