Upload images to a server

In This Topic

1. JavaScript class for uploading image file to a server

VintasoftFileAPI class is static JavaScript class that helps to manipulate files on server. The class requires a web service that manipulates files on server. As the web service can be used ASP.NET Core Web API controller (ASP.NET Core), ASP.NET Web API 2 controller (Vintasoft.Imaging.Web.Api2Controllers.VintasoftFileApi2Controller) or ASP.NET HTTP handler (Vintasoft.Imaging.Web.HttpHandlers.VintasoftFileHandler).

Here is an example that demonstrates how to upload image file to a server:

JavaScript

// The file uploading process is finished successfully.
function __uploadImageFile_success(data) {
    // an identifier of uploaded file
    var id = data.fileId;
    // other operations
}

// The file uploading process is failed.
function __uploadImageFile_error(data) {
    // show information about error
}

// get the first selected file from file input
var file = document.getElementById("fileInput").files[0];
// if file exists
if (file != undefined) {
    // start the asynchronous file uploading process
    Vintasoft.Imaging.VintasoftFileAPI.uploadImageFile(file, __uploadImageFile_success, __uploadImageFile_error);
}

Here is an example that demonstrates how to upload several image files to a server:

JavaScript

// The file uploading process is finished successfully.
function __uploadImageFiles_success(data){
    // array with identifiers of uploaded files
    var successedFiles = [];
    // for each uploaded file
    for (var i = 0; i < data.files.length; i++) {
        // if file upload process is failed
        if (!data.files[i].success)
            // show error message
            alert(data.files[i].errorMessage);
        // if file upload process is finished successfully
        else
            successedFiles.push(data.files[i].fileId);
    }
}

// The file uploading process is failed.
function __uploadImageFiles_error(data){
    // show information about error
}

// get selected files from file input
var files = document.getElementById("filesInput").files;
var filesArray = [];
for (var i=0; i < files.length; i++)
    filesArray.push(files[i])  ;
// if there are files to upload
if (filesArray.length > 0) {
    // start the asynchronous file uploading process
    Vintasoft.Imaging.VintasoftFileAPI.uploadImageFiles(filesArray, __uploadImageFiles_success, __uploadImageFiles_error);
}

Here is an example that demonstrates how to upload base64 image to a server:

JavaScript

// The file uploading process is finished successfully.
function __uploadBase64Image_success(data) {
    // an identifier of uploaded file
    var id = data.fileId;
    // other operations
}

// The file uploading process is failed.
function __uploadbase64Image_error(data) {
    // show information about error
}
            
// start the asynchronous uploading process
// "base64Image" parameter is a base64 string that represent an image
Vintasoft.Imaging.VintasoftFileAPI.uploadBase64Image(base64Image, __uploadBase64Image_success, __uploadBase64Image_error);

2. Web Document Viewer UI for uploading image file to a server

WebUiElementsFactoryJS class contains registered element with identifier "uploadFileButton", which represents WebUiButtonJS object that allows to upload selected image file to a server and open it in image viewer.
WebUiElementsFactoryJS class contains registered element with identifier "uploadPdfFileButton", which represents WebUiButtonJS object that allows to upload selected PDF file to a server and open it in image viewer.
When the "uploadFileButton" or "uploadPdfFileButton" is clicked, VintaSoft Web Document Viewer starts the asynchronous image file uploading process with description "Upload file" and fires "asyncOperationStarted", "asyncOperationFinished" and "asyncOperationFailed" events for notifiying about the process status (eventArgs.description == "Upload file").
The file toolbar panel (WebUiFileToolbarPanelJS object) by default contains the "uploadImageButton" button.

Here is screenshot of "uploadFileButton" button in web application:

If you need to upload several files or customize supported file extensions, use WebUiUploadFileButtonJS class.

Send Feedback