Multiupload multiple files simultaneously in UI5 (Async Multiple Upload files)

by | Jul 16, 2023 | SAP, UI5, UI5 Programs

Home » SAP » UI5 » UI5 Programs » Multiupload multiple files simultaneously in UI5 (Async Multiple Upload files)

Introduction

Introducing Multiupload: the ultimate solution for uploading multiple files simultaneously in SAP UI5. With our Async Multiple Upload feature, you can easily select and upload multiple files in one go, saving you time and effort. Whether you need to upload documents, images, or any other file types, Multiupload streamlines the process, ensuring a smooth and efficient file upload experience. Say goodbye to tedious one-by-one uploads and embrace the power of simultaneous file uploading with Multiupload in UI5.

Difference between Sync and Asyn File Uploads in JavaScript

Synchronous (Sync) and asynchronous (Async) file uploads in JavaScript refer to different approaches for handling file upload operations.

1. Synchronous File Upload:
– In synchronous file upload, the upload process occurs in a blocking manner.
– When a file is uploaded synchronously, the entire execution of the script is paused until the upload is complete.
– Users have to wait for the file to be uploaded before they can continue interacting with the webpage.
– Synchronous file uploads are straightforward to implement but may lead to a poor user experience, especially for larger files or slower network connections.

2. Asynchronous File Upload:
– In asynchronous file upload, the upload process occurs in a non-blocking manner.
– When a file is uploaded asynchronously, the script continues executing without waiting for the upload to complete.
– Users can continue interacting with the webpage while the file is being uploaded in the background.
– Asynchronous file uploads are typically implemented using AJAX (Asynchronous JavaScript and XML) techniques, allowing for a smoother user experience.
– Progress indicators and callbacks can be used to provide real-time feedback to the user during the upload process.

The choice between synchronous and asynchronous file uploads depends on various factors such as the specific requirements of the application, file size, network conditions, and desired user experience. Asynchronous file uploads are commonly preferred as they allow for better responsiveness and improved user interactions while files are being uploaded.

Multiupload multiple files simultaneously in UI5 (Async Multiple Upload files)

View Code

<mvc:View controllerName="Test.Test.controller.Main" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"
    xmlns:upload="sap.m.upload">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="My Project Ideas: Multiupload multiple files simultaneously in UI5 (Async Multiple Upload files)">
                    <content>
                        <upload:UploadSet id="UploadSet" instantUpload="true" showIcons="true" uploadEnabled="true" terminationEnabled="true"
                            fileTypes="txt,doc,png" maxFileNameLength="30" maxFileSize="200" mediaTypes="text/plain,application/msword,image/png"
                            uploadUrl="../../../../upload" items="{path: '/items', templateShareable: false}" mode="MultiSelect" selectionChanged="onSelectionChange">
                            <upload:toolbar>
                                <OverflowToolbar>
                                    <ToolbarSpacer/>
                                    <Button id="uploadSelectedButton" text="Upload selected" press="onUploadSelectedButton"/>
                                    <Button id="downloadSelectedButton" text="Download selected" press="onDownloadSelectedButton"/>
                                    <Button id="versionButton" enabled="false" text="Upload a new version" press="onVersionUpload"/>
                                    <upload:UploadSetToolbarPlaceholder/>
                                </OverflowToolbar>
                            </upload:toolbar>
                            <upload:items>
                                <upload:UploadSetItem fileName="{fileName}" mediaType="{mediaType}" url="{url}" thumbnailUrl="{thumbnailUrl}"
                                    markers="{path: 'markers', templateShareable: false}" statuses="{path: 'statuses', templateShareable: false}" uploadState="{uploadState}">
                                    <upload:markers>
                                        <ObjectMarker type="{type}" visibility="{visibility}"/>
                                    </upload:markers>
                                    <upload:statuses>
                                        <ObjectStatus title="{title}" text="{text}" state="{state}" icon="{icon}" active="{active}"/>
                                    </upload:statuses>
                                </upload:UploadSetItem>
                            </upload:items>
                        </upload:UploadSet>
                        <VBox>
                            <Title text="Messages"/>
                            <TextArea width="100%" value="{appConfigModel>/msgModel}"/>
                        </VBox>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

 

Controller Code

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";
    return Controller.extend("Test.Test.controller.Main", {
        onInit: function () {
            var oUploadSet = this.byId("UploadSet");
            // Modify "add file" button
            oUploadSet.getDefaultFileUploader().setButtonOnly(false);
            oUploadSet.getDefaultFileUploader().setTooltip("");
            oUploadSet.getDefaultFileUploader().setIconOnly(true);
            oUploadSet.getDefaultFileUploader().setIcon("sap-icon://attachment");
            oUploadSet.attachUploadCompleted(this.onUploadCompleted.bind(this));
        },
        onUploadSelectedButton: function () {
            var that = this;
            // Message Model
            var msgModel = new sap.ui.model.json.JSONModel({});
            var oUploadSet = this.byId("UploadSet");
            var previous;
            oUploadSet.getItems().forEach(function (oItem) {
                if (oItem.getListItem().getSelected()) {
                    // AJAX Call
                    var form = new FormData();
                    form.append("file", oItem);
                    return $.ajax({
                        method: "PUT",
                        url: "<Your API>",
                        data: form,
                        async: true,
                        processData: false,
                        mimeType: "multipart/form-data",
                        headers: {
                            "X-Csrf-Token": "<get security key from Data Model>"
                        },
                        contentType: false,
                    }).done((response) => {
                        previous = that.getOwnerComponent().getModel("appConfigModel").getProperty("/msgModel");
                        var updated = previous != "" ? previous.concat(response, ', ') : response;
                        that.getOwnerComponent().getModel("appConfigModel").setProperty("/msgModel", updated);
                    }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
                        // Updating the Message Popover
                        var sErrorMsg = XMLHttpRequest.responseText;
                        if (sErrorMsg) {
                            previous = that.getOwnerComponent().getModel("appConfigModel").getProperty("/msgModel");
                            var updated = previous != "" ? previous.concat(sErrorMsg, ', ') : sErrorMsg;
                            that.getOwnerComponent().getModel("appConfigModel").setProperty("/msgModel", updated);
                        }
                    });
                }
            });
        },
        onDownloadSelectedButton: function () {
            var oUploadSet = this.byId("UploadSet");
            oUploadSet.getItems().forEach(function (oItem) {
                if (oItem.getListItem().getSelected()) {
                    oItem.download(true);
                }
            });
        },
        onSelectionChange: function () {
            var oUploadSet = this.byId("UploadSet");
            // If there's any item selected, sets version button enabled
            if (oUploadSet.getSelectedItems().length > 0) {
                if (oUploadSet.getSelectedItems().length === 1) {
                    this.byId("versionButton").setEnabled(true);
                } else {
                    this.byId("versionButton").setEnabled(false);
                }
            } else {
                this.byId("versionButton").setEnabled(false);
            }
        },
        onVersionUpload: function (oEvent) {
            var oUploadSet = this.byId("UploadSet");
            this.oItemToUpdate = oUploadSet.getSelectedItem()[0];
            oUploadSet.openFileDialog(this.oItemToUpdate);
        },
        onUploadCompleted: function (oEvent) {
            this.oItemToUpdate = null;
            this.byId("versionButton").setEnabled(false);
        }
    });
});

Output

Multiupload multiple files simultaneously in UI5 (Async Multiple Upload files)

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Author