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", on this container click download dialog will be prompted. By default container which has data-upload attribute will be drag and drop area. Also pasting an image to this container will trigger file upload. Paste container will listen for paste event.

Paste option is not avaialable in IE 11. For IE 11 custom implementation has to be done.

or drag and drop from your computer

Markup

  • data-hide-backdrop="true" - will not trigger hover text
  • data-upload-hovertext="Custom text" - will set custom text for drag and drop container
  • data-upload-paste="UploadContext" - will set different paste container for uploader.
  • data-route-url="custom/upload/path" - will set different upload route.
  • data-binary="field" - will set up-loader to upload file as binary to database instead of file store.
  • data-allowed-filetypes="pdf, txt" - will set which accepted file formats can be uploaded.
  • It there is only 1 data-upload on page, default paste container will be set to body element only.
  • For more file upload instances, paste container will be set to element which has data-upload attribute.
  • If you define data-upload-paste="fileuploader", then it will be set us a paste container.

Methods

uploadContextName can be used in javascript to extend file upload.

Use uploadContextName.setCurrentPrimKey(PrimKey) to set or change current file PrimKey, when  you need to update file, instead of inserting new one. Mostly triggered onCurrentIndexChange event.

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.
  • addFiles(pFiles) - files/blobs can be added in this way for a uploader.
  • bindPasteContainer(pContainer) - can be used to set different paste container for paste event to trigger.
  • 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 uploadContextName.data-route-url='your url here' attribute on the upload context DOM container.

Events

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 uploaded 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.manualUpload(true);

    vedlegg.attachEvent("onManualUpload", function(){
        drawFilesToDiv();
    });

    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
        vedlegg.save(function(pFiles){
            // do whatever after files is uploaded here...
        });
    });

    function drawFilesToDiv(){
        // clears existing content of the div we would like to place the files in.
        $('#filesArea').empty();
        
        // 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 && pItem.name !== undefined){
                var vDiv = "
" + pItem.name + "
"; $('#filesArea').append(vDiv); } }); }

Related articles