@commercetools-frontend-extensions/import-resources-modal 1.0.1 → 1.0.2

package/dist/{active-drag-drop-area-be3680ab.cjs.prod.js → active-drag-drop-area-7c0fb409.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-d79bbd8e.cjs.prod.js');
+var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-b5df19c8.cjs.prod.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 require('@babel/runtime-corejs3/core-js-stable/object/keys');
 require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');

package/dist/{active-drag-drop-area-fae899bd.cjs.dev.js → active-drag-drop-area-abad3c41.cjs.dev.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-bb7f975c.cjs.dev.js');
+var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-6e529a62.cjs.dev.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 require('@babel/runtime-corejs3/core-js-stable/object/keys');
 require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');

package/dist/{active-drag-drop-area-06cef014.esm.js → active-drag-drop-area-bf8b7a30.esm.js}

@@ -1,4 +1,4 @@
-import { F as FileDropped, E as EnabledDropArea } from './index-a4665b30.esm.js';
+import { F as FileDropped, E as EnabledDropArea } from './index-3765b5c8.esm.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 import '@babel/runtime-corejs3/core-js-stable/object/keys';
 import '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';

package/dist/commercetools-frontend-extensions-import-resources-modal.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-bb7f975c.cjs.dev.js');
+var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-6e529a62.cjs.dev.js');
 require('@babel/runtime-corejs3/core-js-stable/object/keys');
 require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 require('@babel/runtime-corejs3/core-js-stable/instance/filter');

package/dist/commercetools-frontend-extensions-import-resources-modal.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-d79bbd8e.cjs.prod.js');
+var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-b5df19c8.cjs.prod.js');
 require('@babel/runtime-corejs3/core-js-stable/object/keys');
 require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 require('@babel/runtime-corejs3/core-js-stable/instance/filter');

package/dist/commercetools-frontend-extensions-import-resources-modal.esm.js

@@ -1,4 +1,4 @@
-export { I as default } from './index-a4665b30.esm.js';
+export { I as default } from './index-3765b5c8.esm.js';
 import '@babel/runtime-corejs3/core-js-stable/object/keys';
 import '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
 import '@babel/runtime-corejs3/core-js-stable/instance/filter';

package/dist/declarations/src/@types/file-upload.d.ts

@@ -40,6 +40,8 @@ export interface FileUploadRequestParameters {
     resourceType: ResourceType;
     file: File;
     abortSignal?: AbortSignal;
+    onSuccess: (data: FileUploadResponse) => void;
+    onProgress: (progress: number) => void;
 }
 export interface ProcessUploadedFileRequestParameters {
     projectKey: string;

package/dist/{enabled-drop-area-32e0dc61.cjs.prod.js → enabled-drop-area-3ea78d44.cjs.prod.js}

@@ -11,7 +11,7 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 require('react');
 var uiKit = require('@commercetools-frontend/ui-kit');
-var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-d79bbd8e.cjs.prod.js');
+var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-b5df19c8.cjs.prod.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 require('react-intl');
 require('@commercetools-frontend/application-shell-connectors');

package/dist/{enabled-drop-area-69507fae.esm.js → enabled-drop-area-5e43f909.esm.js}

@@ -9,7 +9,7 @@ import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import 'react';
 import { Spacings, Text, Link } from '@commercetools-frontend/ui-kit';
-import { m as messages } from './index-a4665b30.esm.js';
+import { m as messages } from './index-3765b5c8.esm.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import 'react-intl';
 import '@commercetools-frontend/application-shell-connectors';

package/dist/{enabled-drop-area-56d860b6.cjs.dev.js → enabled-drop-area-db0fea7b.cjs.dev.js}

@@ -11,7 +11,7 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 require('react');
 var uiKit = require('@commercetools-frontend/ui-kit');
-var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-bb7f975c.cjs.dev.js');
+var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-6e529a62.cjs.dev.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 require('react-intl');
 require('@commercetools-frontend/application-shell-connectors');

package/dist/{file-dropped-area-e856a71f.cjs.prod.js → file-dropped-area-20f1d402.cjs.prod.js}

@@ -2,7 +2,7 @@
 
 var reactIntl = require('react-intl');
 var uiKit = require('@commercetools-frontend/ui-kit');
-var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-d79bbd8e.cjs.prod.js');
+var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-b5df19c8.cjs.prod.js');
 require('react');
 require('@commercetools-frontend/application-shell-connectors');
 require('@commercetools-frontend/sdk');

package/dist/{file-dropped-area-6f365e02.esm.js → file-dropped-area-2a6284e9.esm.js}

@@ -1,6 +1,6 @@
 import { useIntl } from 'react-intl';
 import { Spacings, PaperclipIcon, Constraints, Text, SecondaryButton } from '@commercetools-frontend/ui-kit';
-import { u as useImportResourcesContext, m as messages } from './index-a4665b30.esm.js';
+import { u as useImportResourcesContext, m as messages } from './index-3765b5c8.esm.js';
 import 'react';
 import '@commercetools-frontend/application-shell-connectors';
 import '@commercetools-frontend/sdk';

package/dist/{file-dropped-area-6acf82c0.cjs.dev.js → file-dropped-area-c728d70e.cjs.dev.js}

@@ -2,7 +2,7 @@
 
 var reactIntl = require('react-intl');
 var uiKit = require('@commercetools-frontend/ui-kit');
-var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-bb7f975c.cjs.dev.js');
+var dist_commercetoolsFrontendExtensionsImportResourcesModal = require('./index-6e529a62.cjs.dev.js');
 require('react');
 require('@commercetools-frontend/application-shell-connectors');
 require('@commercetools-frontend/sdk');

package/dist/{index-a4665b30.esm.js → index-3765b5c8.esm.js}

@@ -8,7 +8,7 @@ import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import { defineMessages, useIntl, FormattedMessage, IntlProvider } from 'react-intl';
-import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { oidcStorage, useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
 import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
 import React, { useContext, lazy, useState, useEffect } from 'react';
 import { actions, useAsyncDispatch } from '@commercetools-frontend/sdk';
@@ -29,7 +29,7 @@ import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instanc
 import '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
 import 'querystring';
 import 'ramda';
-import { executeHttpClientRequest, buildApiUrl } from '@commercetools-frontend/application-shell';
+import { createHttpClientOptions, buildApiUrl } from '@commercetools-frontend/application-shell';
 import _Reflect$construct from '@babel/runtime-corejs3/core-js-stable/reflect/construct';
 import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
 import _classCallCheck from '@babel/runtime-corejs3/helpers/esm/classCallCheck';
@@ -298,49 +298,69 @@ let HttpError = /*#__PURE__*/function (_Error) {
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 
 function ownKeys$e(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys$e(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys$e(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys$e(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys$e(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const addProxyPrefixToUrl = (uri, proxy) => {
   var _context;
   return proxy ? _concatInstanceProperty(_context = "/proxy/".concat(proxy)).call(_context, uri) : uri;
 };
-const fetcher = async _ref => {
-  let url = _ref.url,
-    payload = _ref.payload,
-    config = _ref.config;
-  const data = await executeHttpClientRequest(async options => {
-    const res = await fetch(buildApiUrl(addProxyPrefixToUrl(url, config === null || config === void 0 ? void 0 : config.proxy)), _objectSpread$e(_objectSpread$e({}, options), {}, {
-      method: config === null || config === void 0 ? void 0 : config.method,
-      body: payload,
-      signal: config === null || config === void 0 ? void 0 : config.abortSignal
-    }));
-    if (!res.ok) {
-      const errorData = await res.json();
-      throw new HttpError(res.status, res.statusText, errorData);
-    }
-    const data = res.json();
-    return {
-      data,
-      statusCode: res.status,
-      getHeader: key => res.headers.get(key)
-    };
-  }, {
+const fetchUsingXhr = _ref2 => {
+  let url = _ref2.url,
+    payload = _ref2.payload,
+    config = _ref2.config,
+    onProgress = _ref2.onProgress,
+    onSuccess = _ref2.onSuccess;
+  const options = createHttpClientOptions({
     headers: _objectSpread$e({
       'Content-Type': 'application/json'
     }, config === null || config === void 0 ? void 0 : config.headers)
   });
-  return data;
+  const xhr = new XMLHttpRequest();
+  xhr.open(config === null || config === void 0 ? void 0 : config.method, buildApiUrl(addProxyPrefixToUrl(url, config === null || config === void 0 ? void 0 : config.proxy)), true);
+  if (options.headers) {
+    var _context2;
+    _forEachInstanceProperty(_context2 = _Object$keys(options.headers)).call(_context2, key => {
+      xhr.setRequestHeader(key, options.headers[key]);
+    });
+  }
+  xhr.upload.onprogress = function (event) {
+    if (event.lengthComputable) {
+      const percentComplete = event.loaded / event.total * 100;
+      onProgress(percentComplete);
+    }
+  };
+  xhr.onload = function () {
+    const data = JSON.parse(xhr.responseText);
+    // Code copied from `executeHttpClientRequest` to replicate the same behavior
+    const refreshedSessionToken = xhr.getResponseHeader('x-refreshed-session-token');
+    if (refreshedSessionToken) {
+      oidcStorage.setActiveSession(refreshedSessionToken);
+    }
+    if (xhr.status >= 200 && xhr.status < 300) {
+      onSuccess(data);
+    } else {
+      throw new HttpError(xhr.status, xhr.statusText, data);
+    }
+  };
+  xhr.onerror = function () {
+    const errorData = JSON.parse(xhr.responseText);
+    throw new HttpError(xhr.status, xhr.statusText, errorData);
+  };
+  xhr.send(payload);
+  return xhr;
 };
 
-async function uploadFileForImport(_ref) {
+function uploadFileForImport(_ref) {
   let projectKey = _ref.projectKey,
     containerKey = _ref.containerKey,
     resourceType = _ref.resourceType,
     file = _ref.file,
-    abortSignal = _ref.abortSignal;
+    abortSignal = _ref.abortSignal,
+    onSuccess = _ref.onSuccess,
+    onProgress = _ref.onProgress;
   const uri = getFileUploadURL(projectKey, resourceType, containerKey);
   const formData = new FormData();
   formData.append('file', file, file.name);
-  const response = await fetcher({
+  return fetchUsingXhr({
     url: uri,
     payload: formData,
     config: {
@@ -350,9 +370,10 @@ async function uploadFileForImport(_ref) {
       headers: {
         'Content-Type': null
       }
-    }
+    },
+    onProgress,
+    onSuccess
   });
-  return response;
 }
 
 function ownKeys$d(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -408,7 +429,8 @@ function ownKeys$c(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySy
 function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$c(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$c(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function reducer(state, action) {
   if (action.type === 'setCurrentStep') return _objectSpread$c(_objectSpread$c({}, state), {}, {
-    currentStep: action.currentStep
+    currentStep: action.currentStep,
+    progress: 0
   });
   if (action.type === 'setUploadFileResponse') return _objectSpread$c(_objectSpread$c({}, state), {}, {
     uploadFileResponse: action.uploadFileResponse
@@ -425,7 +447,8 @@ function reducer(state, action) {
     fileUploadClientSideErrors: [],
     uploadFileResponse: undefined,
     droppedFile: undefined,
-    dropAreaState: 'disabled'
+    dropAreaState: 'disabled',
+    progress: 0
   });
   if (action.type === 'uploadNewFile') return _objectSpread$c(_objectSpread$c({}, state), {}, {
     currentStep: 1,
@@ -433,7 +456,8 @@ function reducer(state, action) {
     fileUploadClientSideErrors: [],
     uploadFileResponse: undefined,
     droppedFile: undefined,
-    dropAreaState: 'ready-for-drop'
+    dropAreaState: 'ready-for-drop',
+    progress: 0
   });
   if (action.type === 'setDroppedFile') {
     return _objectSpread$c(_objectSpread$c({}, state), {}, {
@@ -450,6 +474,11 @@ function reducer(state, action) {
       abortController: action.abortController
     });
   }
+  if (action.type === 'setProgress') {
+    return _objectSpread$c(_objectSpread$c({}, state), {}, {
+      progress: action.progress
+    });
+  }
   throw new Error(getUnknownActionError(action));
 }
 function getUnknownActionError(actionType) {
@@ -462,7 +491,8 @@ const initialState = {
   uploadFileResponse: undefined,
   fileUploadClientSideErrors: [],
   resourceType: 'category',
-  containerKey: undefined
+  containerKey: undefined,
+  progress: 0
 };
 
 function ownKeys$b(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -517,6 +547,10 @@ const ImportResourcesProvider = props => {
     type: 'setFileUploadClientSideErrors',
     fileUploadClientSideErrors: nextFileUploadClientSideErrors
   });
+  const setProgress = progress => dispatch({
+    type: 'setProgress',
+    progress
+  });
   const handleClose = function () {
     let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       shouldDeleteImportContainer = _ref.shouldDeleteImportContainer;
@@ -542,7 +576,8 @@ const ImportResourcesProvider = props => {
         setDroppedFile,
         setContainerKey,
         setAbortController,
-        setFileUploadClientSideErrors
+        setFileUploadClientSideErrors,
+        setProgress
       }
     },
     children: props.children
@@ -701,25 +736,28 @@ const useUpload = () => {
     actions.setCurrentStep(2);
     const containerKey = encodeFileNameWithTimestampToContainerKey(state.droppedFile.name);
     actions.setContainerKey(containerKey);
-    const newAbortController = new AbortController();
-    actions.setAbortController(newAbortController);
     try {
       await createImportContainerForFileUpload({
         key: containerKey,
         resourceType: state.resourceType
       }, projectKey, asyncDispatch);
-      const fileUploadResponse = await uploadFileForImport({
+      const newAbortController = uploadFileForImport({
         projectKey,
         containerKey,
         resourceType: state.resourceType,
         file: state.droppedFile,
-        abortSignal: newAbortController.signal
+        onSuccess: fileUploadResponse => {
+          actions.setUploadFileResponse(fileUploadResponse);
+          actions.setCurrentStep(3);
+        },
+        onProgress: progress => {
+          actions.setProgress(progress);
+        }
       });
-      actions.setUploadFileResponse(fileUploadResponse);
+      actions.setAbortController(newAbortController);
     } catch (error) {
       deleteImportContainer(projectKey, containerKey, asyncDispatch);
       handleUploadError(error);
-    } finally {
       actions.setCurrentStep(3);
     }
   };
@@ -799,13 +837,13 @@ function getDefaultDropWrapperStyles(_dropAreaState) {
   return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? "" : ";label:getDefaultDropWrapperStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3AtYXJlYS13cmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QlkiLCJmaWxlIjoiZHJvcC1hcmVhLXdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHR5cGUgRHJvcHpvbmVSb290UHJvcHMgfSBmcm9tICdyZWFjdC1kcm9wem9uZSdcbmltcG9ydCB7IHN0eWxlcyB9IGZyb20gJy4vc3R5bGVzJ1xuaW1wb3J0IHsgdHlwZSBEcm9wQXJlYVN0YXRlIH0gZnJvbSAnQHR5cGVzJ1xuXG5pbnRlcmZhY2UgRHJvcFdyYXBwZXJQcm9wcyBleHRlbmRzIERyb3B6b25lUm9vdFByb3BzIHtcbiAgZHJvcEFyZWFTdGF0ZTogRHJvcEFyZWFTdGF0ZVxufVxuZXhwb3J0IGNvbnN0IERyb3BXcmFwcGVyID0gc3R5bGVkLmRpdjxEcm9wV3JhcHBlclByb3BzPmBcbiAgJHtzdHlsZXMuYmFzZX1cbiAgJHsocHJvcHMpID0+IHtcbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ2Rpc2FibGVkJykge1xuICAgICAgcmV0dXJuIHN0eWxlcy5kaXNhYmxlZFxuICAgIH1cbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ3JlYWR5LWZvci1kcm9wJykge1xuICAgICAgcmV0dXJuIHN0eWxlcy5yZWFkeUZvckRyb3BcbiAgICB9XG4gICAgaWYgKHByb3BzLmRyb3BBcmVhU3RhdGUgPT09ICdhY3RpdmUtZHJhZycpIHtcbiAgICAgIHJldHVybiBzdHlsZXMuYWN0aXZlRHJhZ1xuICAgIH1cbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ2ZpbGUtZHJvcHBlZCcpIHtcbiAgICAgIHJldHVybiBzdHlsZXMuZmlsZURyb3BwZWRcbiAgICB9XG4gICAgcmV0dXJuIGdldERlZmF1bHREcm9wV3JhcHBlclN0eWxlcyhwcm9wcy5kcm9wQXJlYVN0YXRlKVxuICB9fVxuYFxuZnVuY3Rpb24gZ2V0RGVmYXVsdERyb3BXcmFwcGVyU3R5bGVzKF9kcm9wQXJlYVN0YXRlOiBuZXZlcikge1xuICByZXR1cm4gY3NzYGBcbn1cbiJdfQ== */");
 }
 
-var ActiveDragDropArea = /*#__PURE__*/lazy(() => import('./active-drag-drop-area-06cef014.esm.js' /* webpackChunkName: "active-drag-drop-area" */));
+var ActiveDragDropArea = /*#__PURE__*/lazy(() => import('./active-drag-drop-area-bf8b7a30.esm.js' /* webpackChunkName: "active-drag-drop-area" */));
 
 var DisabledDropArea = /*#__PURE__*/lazy(() => import('./disabled-drop-area-2c088477.esm.js' /* webpackChunkName: "disabled-drop-area" */));
 
-var EnabledDropArea = /*#__PURE__*/lazy(() => import('./enabled-drop-area-69507fae.esm.js' /* webpackChunkName: "enabled-drop-area" */));
+var EnabledDropArea = /*#__PURE__*/lazy(() => import('./enabled-drop-area-5e43f909.esm.js' /* webpackChunkName: "enabled-drop-area" */));
 
-var FileDropped = /*#__PURE__*/lazy(() => import('./file-dropped-area-6f365e02.esm.js' /* webpackChunkName: "filed-dropped-area" */));
+var FileDropped = /*#__PURE__*/lazy(() => import('./file-dropped-area-2a6284e9.esm.js' /* webpackChunkName: "filed-dropped-area" */));
 
 function getDropArea(_ref) {
   let dropAreaState = _ref.dropAreaState,
@@ -1704,6 +1742,7 @@ const Uploading = () => {
   const intl = useIntl();
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state,
+    actions = _useImportResourcesCo.actions,
     onClose = _useImportResourcesCo.onClose;
   const resourceTypePlural = resourceTypeToDisplayName({
     resourceType: state.resourceType,
@@ -1739,13 +1778,14 @@ const Uploading = () => {
           size: "medium",
           label: intl.formatMessage(sharedMessages.cancel),
           onClick: () => {
+            actions.setCurrentStep(1);
             state.abortController.abort();
           }
         })]
       }), jsx(ProgressBar, {
         barWidth: "scale",
         height: "10",
-        progress: 100
+        progress: state.progress
       }), jsx("div", {})]
     })
   });

package/dist/{index-bb7f975c.cjs.dev.js → index-6e529a62.cjs.dev.js}

@@ -329,49 +329,69 @@ let HttpError = /*#__PURE__*/function (_Error) {
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 
 function ownKeys$e(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$e(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$e(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$e(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$e(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const addProxyPrefixToUrl = (uri, proxy) => {
   var _context;
   return proxy ? _concatInstanceProperty__default["default"](_context = "/proxy/".concat(proxy)).call(_context, uri) : uri;
 };
-const fetcher = async _ref => {
-  let url = _ref.url,
-    payload = _ref.payload,
-    config = _ref.config;
-  const data = await applicationShell.executeHttpClientRequest(async options => {
-    const res = await fetch(applicationShell.buildApiUrl(addProxyPrefixToUrl(url, config === null || config === void 0 ? void 0 : config.proxy)), _objectSpread$e(_objectSpread$e({}, options), {}, {
-      method: config === null || config === void 0 ? void 0 : config.method,
-      body: payload,
-      signal: config === null || config === void 0 ? void 0 : config.abortSignal
-    }));
-    if (!res.ok) {
-      const errorData = await res.json();
-      throw new HttpError(res.status, res.statusText, errorData);
-    }
-    const data = res.json();
-    return {
-      data,
-      statusCode: res.status,
-      getHeader: key => res.headers.get(key)
-    };
-  }, {
+const fetchUsingXhr = _ref2 => {
+  let url = _ref2.url,
+    payload = _ref2.payload,
+    config = _ref2.config,
+    onProgress = _ref2.onProgress,
+    onSuccess = _ref2.onSuccess;
+  const options = applicationShell.createHttpClientOptions({
     headers: _objectSpread$e({
       'Content-Type': 'application/json'
     }, config === null || config === void 0 ? void 0 : config.headers)
   });
-  return data;
+  const xhr = new XMLHttpRequest();
+  xhr.open(config === null || config === void 0 ? void 0 : config.method, applicationShell.buildApiUrl(addProxyPrefixToUrl(url, config === null || config === void 0 ? void 0 : config.proxy)), true);
+  if (options.headers) {
+    var _context2;
+    _forEachInstanceProperty__default["default"](_context2 = _Object$keys__default["default"](options.headers)).call(_context2, key => {
+      xhr.setRequestHeader(key, options.headers[key]);
+    });
+  }
+  xhr.upload.onprogress = function (event) {
+    if (event.lengthComputable) {
+      const percentComplete = event.loaded / event.total * 100;
+      onProgress(percentComplete);
+    }
+  };
+  xhr.onload = function () {
+    const data = JSON.parse(xhr.responseText);
+    // Code copied from `executeHttpClientRequest` to replicate the same behavior
+    const refreshedSessionToken = xhr.getResponseHeader('x-refreshed-session-token');
+    if (refreshedSessionToken) {
+      applicationShellConnectors.oidcStorage.setActiveSession(refreshedSessionToken);
+    }
+    if (xhr.status >= 200 && xhr.status < 300) {
+      onSuccess(data);
+    } else {
+      throw new HttpError(xhr.status, xhr.statusText, data);
+    }
+  };
+  xhr.onerror = function () {
+    const errorData = JSON.parse(xhr.responseText);
+    throw new HttpError(xhr.status, xhr.statusText, errorData);
+  };
+  xhr.send(payload);
+  return xhr;
 };
 
-async function uploadFileForImport(_ref) {
+function uploadFileForImport(_ref) {
   let projectKey = _ref.projectKey,
     containerKey = _ref.containerKey,
     resourceType = _ref.resourceType,
     file = _ref.file,
-    abortSignal = _ref.abortSignal;
+    abortSignal = _ref.abortSignal,
+    onSuccess = _ref.onSuccess,
+    onProgress = _ref.onProgress;
   const uri = getFileUploadURL(projectKey, resourceType, containerKey);
   const formData = new FormData();
   formData.append('file', file, file.name);
-  const response = await fetcher({
+  return fetchUsingXhr({
     url: uri,
     payload: formData,
     config: {
@@ -381,9 +401,10 @@ async function uploadFileForImport(_ref) {
       headers: {
         'Content-Type': null
       }
-    }
+    },
+    onProgress,
+    onSuccess
   });
-  return response;
 }
 
 function ownKeys$d(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -439,7 +460,8 @@ function ownKeys$c(e, r) { var t = _Object$keys__default["default"](e); if (_Obj
 function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$c(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$c(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function reducer(state, action) {
   if (action.type === 'setCurrentStep') return _objectSpread$c(_objectSpread$c({}, state), {}, {
-    currentStep: action.currentStep
+    currentStep: action.currentStep,
+    progress: 0
   });
   if (action.type === 'setUploadFileResponse') return _objectSpread$c(_objectSpread$c({}, state), {}, {
     uploadFileResponse: action.uploadFileResponse
@@ -456,7 +478,8 @@ function reducer(state, action) {
     fileUploadClientSideErrors: [],
     uploadFileResponse: undefined,
     droppedFile: undefined,
-    dropAreaState: 'disabled'
+    dropAreaState: 'disabled',
+    progress: 0
   });
   if (action.type === 'uploadNewFile') return _objectSpread$c(_objectSpread$c({}, state), {}, {
     currentStep: 1,
@@ -464,7 +487,8 @@ function reducer(state, action) {
     fileUploadClientSideErrors: [],
     uploadFileResponse: undefined,
     droppedFile: undefined,
-    dropAreaState: 'ready-for-drop'
+    dropAreaState: 'ready-for-drop',
+    progress: 0
   });
   if (action.type === 'setDroppedFile') {
     return _objectSpread$c(_objectSpread$c({}, state), {}, {
@@ -481,6 +505,11 @@ function reducer(state, action) {
       abortController: action.abortController
     });
   }
+  if (action.type === 'setProgress') {
+    return _objectSpread$c(_objectSpread$c({}, state), {}, {
+      progress: action.progress
+    });
+  }
   throw new Error(getUnknownActionError(action));
 }
 function getUnknownActionError(actionType) {
@@ -493,7 +522,8 @@ const initialState = {
   uploadFileResponse: undefined,
   fileUploadClientSideErrors: [],
   resourceType: 'category',
-  containerKey: undefined
+  containerKey: undefined,
+  progress: 0
 };
 
 function ownKeys$b(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -548,6 +578,10 @@ const ImportResourcesProvider = props => {
     type: 'setFileUploadClientSideErrors',
     fileUploadClientSideErrors: nextFileUploadClientSideErrors
   });
+  const setProgress = progress => dispatch({
+    type: 'setProgress',
+    progress
+  });
   const handleClose = function () {
     let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       shouldDeleteImportContainer = _ref.shouldDeleteImportContainer;
@@ -573,7 +607,8 @@ const ImportResourcesProvider = props => {
         setDroppedFile,
         setContainerKey,
         setAbortController,
-        setFileUploadClientSideErrors
+        setFileUploadClientSideErrors,
+        setProgress
       }
     },
     children: props.children
@@ -732,25 +767,28 @@ const useUpload = () => {
     actions.setCurrentStep(2);
     const containerKey = encodeFileNameWithTimestampToContainerKey(state.droppedFile.name);
     actions.setContainerKey(containerKey);
-    const newAbortController = new AbortController();
-    actions.setAbortController(newAbortController);
     try {
       await createImportContainerForFileUpload({
         key: containerKey,
         resourceType: state.resourceType
       }, projectKey, asyncDispatch);
-      const fileUploadResponse = await uploadFileForImport({
+      const newAbortController = uploadFileForImport({
         projectKey,
         containerKey,
         resourceType: state.resourceType,
         file: state.droppedFile,
-        abortSignal: newAbortController.signal
+        onSuccess: fileUploadResponse => {
+          actions.setUploadFileResponse(fileUploadResponse);
+          actions.setCurrentStep(3);
+        },
+        onProgress: progress => {
+          actions.setProgress(progress);
+        }
       });
-      actions.setUploadFileResponse(fileUploadResponse);
+      actions.setAbortController(newAbortController);
     } catch (error) {
       deleteImportContainer(projectKey, containerKey, asyncDispatch);
       handleUploadError(error);
-    } finally {
       actions.setCurrentStep(3);
     }
   };
@@ -830,13 +868,13 @@ function getDefaultDropWrapperStyles(_dropAreaState) {
   return /*#__PURE__*/react.css(process.env.NODE_ENV === "production" ? "" : ";label:getDefaultDropWrapperStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3AtYXJlYS13cmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QlkiLCJmaWxlIjoiZHJvcC1hcmVhLXdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHR5cGUgRHJvcHpvbmVSb290UHJvcHMgfSBmcm9tICdyZWFjdC1kcm9wem9uZSdcbmltcG9ydCB7IHN0eWxlcyB9IGZyb20gJy4vc3R5bGVzJ1xuaW1wb3J0IHsgdHlwZSBEcm9wQXJlYVN0YXRlIH0gZnJvbSAnQHR5cGVzJ1xuXG5pbnRlcmZhY2UgRHJvcFdyYXBwZXJQcm9wcyBleHRlbmRzIERyb3B6b25lUm9vdFByb3BzIHtcbiAgZHJvcEFyZWFTdGF0ZTogRHJvcEFyZWFTdGF0ZVxufVxuZXhwb3J0IGNvbnN0IERyb3BXcmFwcGVyID0gc3R5bGVkLmRpdjxEcm9wV3JhcHBlclByb3BzPmBcbiAgJHtzdHlsZXMuYmFzZX1cbiAgJHsocHJvcHMpID0+IHtcbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ2Rpc2FibGVkJykge1xuICAgICAgcmV0dXJuIHN0eWxlcy5kaXNhYmxlZFxuICAgIH1cbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ3JlYWR5LWZvci1kcm9wJykge1xuICAgICAgcmV0dXJuIHN0eWxlcy5yZWFkeUZvckRyb3BcbiAgICB9XG4gICAgaWYgKHByb3BzLmRyb3BBcmVhU3RhdGUgPT09ICdhY3RpdmUtZHJhZycpIHtcbiAgICAgIHJldHVybiBzdHlsZXMuYWN0aXZlRHJhZ1xuICAgIH1cbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ2ZpbGUtZHJvcHBlZCcpIHtcbiAgICAgIHJldHVybiBzdHlsZXMuZmlsZURyb3BwZWRcbiAgICB9XG4gICAgcmV0dXJuIGdldERlZmF1bHREcm9wV3JhcHBlclN0eWxlcyhwcm9wcy5kcm9wQXJlYVN0YXRlKVxuICB9fVxuYFxuZnVuY3Rpb24gZ2V0RGVmYXVsdERyb3BXcmFwcGVyU3R5bGVzKF9kcm9wQXJlYVN0YXRlOiBuZXZlcikge1xuICByZXR1cm4gY3NzYGBcbn1cbiJdfQ== */");
 }
 
-var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-fae899bd.cjs.dev.js' /* webpackChunkName: "active-drag-drop-area" */); }));
+var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-abad3c41.cjs.dev.js' /* webpackChunkName: "active-drag-drop-area" */); }));
 
 var DisabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./disabled-drop-area-aa78075b.cjs.dev.js' /* webpackChunkName: "disabled-drop-area" */); }));
 
-var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-56d860b6.cjs.dev.js' /* webpackChunkName: "enabled-drop-area" */); }));
+var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-db0fea7b.cjs.dev.js' /* webpackChunkName: "enabled-drop-area" */); }));
 
-var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-6acf82c0.cjs.dev.js' /* webpackChunkName: "filed-dropped-area" */); }));
+var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-c728d70e.cjs.dev.js' /* webpackChunkName: "filed-dropped-area" */); }));
 
 function getDropArea(_ref) {
   let dropAreaState = _ref.dropAreaState,
@@ -1735,6 +1773,7 @@ const Uploading = () => {
   const intl = reactIntl.useIntl();
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state,
+    actions = _useImportResourcesCo.actions,
     onClose = _useImportResourcesCo.onClose;
   const resourceTypePlural = resourceTypeToDisplayName({
     resourceType: state.resourceType,
@@ -1770,13 +1809,14 @@ const Uploading = () => {
           size: "medium",
           label: intl.formatMessage(sharedMessages.cancel),
           onClick: () => {
+            actions.setCurrentStep(1);
             state.abortController.abort();
           }
         })]
       }), jsxRuntime.jsx(uiKit.ProgressBar, {
         barWidth: "scale",
         height: "10",
-        progress: 100
+        progress: state.progress
       }), jsxRuntime.jsx("div", {})]
     })
   });

package/dist/{index-d79bbd8e.cjs.prod.js → index-b5df19c8.cjs.prod.js}

@@ -329,49 +329,69 @@ let HttpError = /*#__PURE__*/function (_Error) {
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 
 function ownKeys$e(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$e(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$e(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$e(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$e(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const addProxyPrefixToUrl = (uri, proxy) => {
   var _context;
   return proxy ? _concatInstanceProperty__default["default"](_context = "/proxy/".concat(proxy)).call(_context, uri) : uri;
 };
-const fetcher = async _ref => {
-  let url = _ref.url,
-    payload = _ref.payload,
-    config = _ref.config;
-  const data = await applicationShell.executeHttpClientRequest(async options => {
-    const res = await fetch(applicationShell.buildApiUrl(addProxyPrefixToUrl(url, config === null || config === void 0 ? void 0 : config.proxy)), _objectSpread$e(_objectSpread$e({}, options), {}, {
-      method: config === null || config === void 0 ? void 0 : config.method,
-      body: payload,
-      signal: config === null || config === void 0 ? void 0 : config.abortSignal
-    }));
-    if (!res.ok) {
-      const errorData = await res.json();
-      throw new HttpError(res.status, res.statusText, errorData);
-    }
-    const data = res.json();
-    return {
-      data,
-      statusCode: res.status,
-      getHeader: key => res.headers.get(key)
-    };
-  }, {
+const fetchUsingXhr = _ref2 => {
+  let url = _ref2.url,
+    payload = _ref2.payload,
+    config = _ref2.config,
+    onProgress = _ref2.onProgress,
+    onSuccess = _ref2.onSuccess;
+  const options = applicationShell.createHttpClientOptions({
     headers: _objectSpread$e({
       'Content-Type': 'application/json'
     }, config === null || config === void 0 ? void 0 : config.headers)
   });
-  return data;
+  const xhr = new XMLHttpRequest();
+  xhr.open(config === null || config === void 0 ? void 0 : config.method, applicationShell.buildApiUrl(addProxyPrefixToUrl(url, config === null || config === void 0 ? void 0 : config.proxy)), true);
+  if (options.headers) {
+    var _context2;
+    _forEachInstanceProperty__default["default"](_context2 = _Object$keys__default["default"](options.headers)).call(_context2, key => {
+      xhr.setRequestHeader(key, options.headers[key]);
+    });
+  }
+  xhr.upload.onprogress = function (event) {
+    if (event.lengthComputable) {
+      const percentComplete = event.loaded / event.total * 100;
+      onProgress(percentComplete);
+    }
+  };
+  xhr.onload = function () {
+    const data = JSON.parse(xhr.responseText);
+    // Code copied from `executeHttpClientRequest` to replicate the same behavior
+    const refreshedSessionToken = xhr.getResponseHeader('x-refreshed-session-token');
+    if (refreshedSessionToken) {
+      applicationShellConnectors.oidcStorage.setActiveSession(refreshedSessionToken);
+    }
+    if (xhr.status >= 200 && xhr.status < 300) {
+      onSuccess(data);
+    } else {
+      throw new HttpError(xhr.status, xhr.statusText, data);
+    }
+  };
+  xhr.onerror = function () {
+    const errorData = JSON.parse(xhr.responseText);
+    throw new HttpError(xhr.status, xhr.statusText, errorData);
+  };
+  xhr.send(payload);
+  return xhr;
 };
 
-async function uploadFileForImport(_ref) {
+function uploadFileForImport(_ref) {
   let projectKey = _ref.projectKey,
     containerKey = _ref.containerKey,
     resourceType = _ref.resourceType,
     file = _ref.file,
-    abortSignal = _ref.abortSignal;
+    abortSignal = _ref.abortSignal,
+    onSuccess = _ref.onSuccess,
+    onProgress = _ref.onProgress;
   const uri = getFileUploadURL(projectKey, resourceType, containerKey);
   const formData = new FormData();
   formData.append('file', file, file.name);
-  const response = await fetcher({
+  return fetchUsingXhr({
     url: uri,
     payload: formData,
     config: {
@@ -381,9 +401,10 @@ async function uploadFileForImport(_ref) {
       headers: {
         'Content-Type': null
       }
-    }
+    },
+    onProgress,
+    onSuccess
   });
-  return response;
 }
 
 function ownKeys$d(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -439,7 +460,8 @@ function ownKeys$c(e, r) { var t = _Object$keys__default["default"](e); if (_Obj
 function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$c(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$c(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function reducer(state, action) {
   if (action.type === 'setCurrentStep') return _objectSpread$c(_objectSpread$c({}, state), {}, {
-    currentStep: action.currentStep
+    currentStep: action.currentStep,
+    progress: 0
   });
   if (action.type === 'setUploadFileResponse') return _objectSpread$c(_objectSpread$c({}, state), {}, {
     uploadFileResponse: action.uploadFileResponse
@@ -456,7 +478,8 @@ function reducer(state, action) {
     fileUploadClientSideErrors: [],
     uploadFileResponse: undefined,
     droppedFile: undefined,
-    dropAreaState: 'disabled'
+    dropAreaState: 'disabled',
+    progress: 0
   });
   if (action.type === 'uploadNewFile') return _objectSpread$c(_objectSpread$c({}, state), {}, {
     currentStep: 1,
@@ -464,7 +487,8 @@ function reducer(state, action) {
     fileUploadClientSideErrors: [],
     uploadFileResponse: undefined,
     droppedFile: undefined,
-    dropAreaState: 'ready-for-drop'
+    dropAreaState: 'ready-for-drop',
+    progress: 0
   });
   if (action.type === 'setDroppedFile') {
     return _objectSpread$c(_objectSpread$c({}, state), {}, {
@@ -481,6 +505,11 @@ function reducer(state, action) {
       abortController: action.abortController
     });
   }
+  if (action.type === 'setProgress') {
+    return _objectSpread$c(_objectSpread$c({}, state), {}, {
+      progress: action.progress
+    });
+  }
   throw new Error(getUnknownActionError(action));
 }
 function getUnknownActionError(actionType) {
@@ -493,7 +522,8 @@ const initialState = {
   uploadFileResponse: undefined,
   fileUploadClientSideErrors: [],
   resourceType: 'category',
-  containerKey: undefined
+  containerKey: undefined,
+  progress: 0
 };
 
 function ownKeys$b(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -548,6 +578,10 @@ const ImportResourcesProvider = props => {
     type: 'setFileUploadClientSideErrors',
     fileUploadClientSideErrors: nextFileUploadClientSideErrors
   });
+  const setProgress = progress => dispatch({
+    type: 'setProgress',
+    progress
+  });
   const handleClose = function () {
     let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       shouldDeleteImportContainer = _ref.shouldDeleteImportContainer;
@@ -573,7 +607,8 @@ const ImportResourcesProvider = props => {
         setDroppedFile,
         setContainerKey,
         setAbortController,
-        setFileUploadClientSideErrors
+        setFileUploadClientSideErrors,
+        setProgress
       }
     },
     children: props.children
@@ -732,25 +767,28 @@ const useUpload = () => {
     actions.setCurrentStep(2);
     const containerKey = encodeFileNameWithTimestampToContainerKey(state.droppedFile.name);
     actions.setContainerKey(containerKey);
-    const newAbortController = new AbortController();
-    actions.setAbortController(newAbortController);
     try {
       await createImportContainerForFileUpload({
         key: containerKey,
         resourceType: state.resourceType
       }, projectKey, asyncDispatch);
-      const fileUploadResponse = await uploadFileForImport({
+      const newAbortController = uploadFileForImport({
         projectKey,
         containerKey,
         resourceType: state.resourceType,
         file: state.droppedFile,
-        abortSignal: newAbortController.signal
+        onSuccess: fileUploadResponse => {
+          actions.setUploadFileResponse(fileUploadResponse);
+          actions.setCurrentStep(3);
+        },
+        onProgress: progress => {
+          actions.setProgress(progress);
+        }
       });
-      actions.setUploadFileResponse(fileUploadResponse);
+      actions.setAbortController(newAbortController);
     } catch (error) {
       deleteImportContainer(projectKey, containerKey, asyncDispatch);
       handleUploadError(error);
-    } finally {
       actions.setCurrentStep(3);
     }
   };
@@ -827,13 +865,13 @@ function getDefaultDropWrapperStyles(_dropAreaState) {
   return /*#__PURE__*/react.css("" , "" );
 }
 
-var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-be3680ab.cjs.prod.js' /* webpackChunkName: "active-drag-drop-area" */); }));
+var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-7c0fb409.cjs.prod.js' /* webpackChunkName: "active-drag-drop-area" */); }));
 
 var DisabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./disabled-drop-area-99c1fa0b.cjs.prod.js' /* webpackChunkName: "disabled-drop-area" */); }));
 
-var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-32e0dc61.cjs.prod.js' /* webpackChunkName: "enabled-drop-area" */); }));
+var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-3ea78d44.cjs.prod.js' /* webpackChunkName: "enabled-drop-area" */); }));
 
-var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-e856a71f.cjs.prod.js' /* webpackChunkName: "filed-dropped-area" */); }));
+var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-20f1d402.cjs.prod.js' /* webpackChunkName: "filed-dropped-area" */); }));
 
 function getDropArea(_ref) {
   let dropAreaState = _ref.dropAreaState,
@@ -1729,6 +1767,7 @@ const Uploading = () => {
   const intl = reactIntl.useIntl();
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state,
+    actions = _useImportResourcesCo.actions,
     onClose = _useImportResourcesCo.onClose;
   const resourceTypePlural = resourceTypeToDisplayName({
     resourceType: state.resourceType,
@@ -1764,13 +1803,14 @@ const Uploading = () => {
           size: "medium",
           label: intl.formatMessage(sharedMessages.cancel),
           onClick: () => {
+            actions.setCurrentStep(1);
             state.abortController.abort();
           }
         })]
       }), jsxRuntime.jsx(uiKit.ProgressBar, {
         barWidth: "scale",
         height: "10",
-        progress: 100
+        progress: state.progress
       }), jsxRuntime.jsx("div", {})]
     })
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-frontend-extensions/import-resources-modal",
   "description": "Shared import modal for importing resources",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "BSD-3-Clause",
   "publishConfig": {
     "access": "public"