fix: autoupload

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acpaas-ui/react-editorial-components",
-  "version": "1.5.6",
+  "version": "1.5.9",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "scripts": {
@@ -46,7 +46,7 @@
     "react-dom": "^16.13.0",
     "react-popper": "^2.2.4",
     "rxjs": "^6.6.3",
-    "sanitize-html": "^2.4.0"
+    "sanitize-html": "2.4.0"
   },
   "devDependencies": {
     "@a-ui/flexboxgrid": "^1.0.1",

src/components/FileUpload/FileUpload.const.js

@@ -11,4 +11,5 @@ export const UPLOAD_OPTIONS_DEFAULT = {
 	maxFileSize: 0, // 0 is infinite
 	url: '',
 	messages: VALIDATION_MESSAGES_DEFAULT,
+	autoUpload: true,
 };

src/components/FileUpload/FileUpload.jsx

@@ -1,5 +1,8 @@
+/* eslint-disable react/require-default-props */
 import PropTypes from 'prop-types';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, {
+	forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState,
+} from 'react';
 
 import { isNumber } from '../../helpers';
 import { useSlot } from '../../hooks/useSlot';
@@ -10,23 +13,32 @@ import { FileUploadZone } from './FileUploadZone';
 import { Uploader } from './Uploader';
 import { ValidationList } from './ValidationList';
 
-const FileUpload = ({
+const FileUpload = forwardRef(({
 	id = '',
 	ariaLabelRemove = 'Verwijder',
 	disabled = false,
 	files = [],
 	options = UPLOAD_OPTIONS_DEFAULT,
 	selectUploadedFiles = () => null,
+	selectQueuedFiles = () => null,
 	removeFile = () => null,
 	children,
-}) => {
+}, ref) => {
 	/**
 	 * Hooks
 	 */
 	const fileUploadDescriptionSlot = useSlot(FileUploadDescription, children);
 	const fileUploadMessageSlot = useSlot(FileUploadMessage, children);
 	const [uploader, setUploader] = useState(null);
 	const [invalidFiles, setInvalidFiles] = useState([]);
+	const [queuedFiles, setQueuedFiles] = useState([]);
+	const uploadZoneRef = useRef();
+
+	useImperativeHandle(ref, () => ({
+		startUpload(extraHeaders) {
+			return uploadZoneRef.current.uploadFiles(queuedFiles, extraHeaders);
+		},
+	}));
 
 	useEffect(() => {
 		if (!uploader) {
@@ -42,13 +54,25 @@ const FileUpload = ({
 		return true;
 	}, [options.fileLimit, files]);
 
+	useEffect(() => {
+		if (!selectQueuedFiles) {
+			return;
+		}
+
+		selectQueuedFiles(queuedFiles);
+	}, [queuedFiles, selectQueuedFiles]);
+
 	/**
 	 * Methods
 	 */
 	const onInvalidFiles = (invFiles) => {
 		setInvalidFiles(invFiles);
 	};
 
+	const onQueuedFiles = (qFiles) => {
+		setQueuedFiles(qFiles);
+	};
+
 	const onRequestError = (error) => {
 		setInvalidFiles(error.files.map((file) => ({
 			file,
@@ -60,6 +84,15 @@ const FileUpload = ({
 		setInvalidFiles(invalidFiles.filter((file, i) => i !== index));
 	};
 
+	const onRemoveFile = (fileId, index) => {
+		// If the file is queued, just delete it.
+		if (!fileId && queuedFiles?.[index]) {
+			return setQueuedFiles(queuedFiles.filter((_, fIndex) => index !== fIndex));
+		}
+
+		removeFile(fileId, index);
+	};
+
 	/**
 	 * Render
 	 */
@@ -79,7 +112,7 @@ const FileUpload = ({
 					<li key={file.id || index}>
 						<span className="fa fa-file-o" />
 						<span className="m-upload__filename">{file.name}</span>
-						<button disabled={disabled} onClick={() => removeFile(file.id, index)} type="button" className="m-upload__delete a-button-transparent a-button--default a-button--small has-icon">
+						<button disabled={disabled} onClick={() => onRemoveFile(file.id, index)} type="button" className="m-upload__delete a-button-transparent a-button--default a-button--small has-icon">
 							<span className="fa fa-close" aria-label="Close" />
 						</button>
 					</li>
@@ -91,7 +124,10 @@ const FileUpload = ({
 	return (
 		<div className="m-upload">
 			<FileUploadZone
+				ref={uploadZoneRef}
+				autoUpload={options.autoUpload}
 				invalidFiles={onInvalidFiles}
+				queuedFiles={onQueuedFiles}
 				onRequestError={onRequestError}
 				uploadedFiles={selectUploadedFiles}
 				disabled={disabled || !uploadZoneIsDisabled}
@@ -114,7 +150,7 @@ const FileUpload = ({
 						</FileUploadDescription>
 					) }
 			</FileUploadZone>
-			{ renderFiles(files) }
+			{ renderFiles([...files, ...queuedFiles]) }
 			<ValidationList
 				messages={options.messages}
 				ariaLabelRemove={ariaLabelRemove}
@@ -123,13 +159,14 @@ const FileUpload = ({
 			/>
 		</div>
 	);
-};
+});
 
 FileUpload.propTypes = {
 	id: PropTypes.string.isRequired,
 	disabled: PropTypes.bool,
 	ariaLabelRemove: PropTypes.string,
 	options: PropTypes.shape({
+		autoUpload: PropTypes.bool,
 		allowedMimeTypes: PropTypes.arrayOf(PropTypes.string),
 		allowedFileTypes: PropTypes.arrayOf(PropTypes.string),
 		maxFileSize: PropTypes.number,
@@ -146,12 +183,17 @@ FileUpload.propTypes = {
 			key: PropTypes.string,
 			value: PropTypes.string,
 		}),
+		requestHeaders: PropTypes.arrayOf(PropTypes.shape({
+			key: PropTypes.string,
+			value: PropTypes.string,
+		})),
 	}),
 	files: PropTypes.arrayOf(PropTypes.shape({
 		id: PropTypes.string.isRequired,
 		name: PropTypes.string.isRequired,
 	})),
 	selectUploadedFiles: PropTypes.func,
+	selectQueuedFiles: PropTypes.func,
 	removeFile: PropTypes.func,
 	children: PropTypes.node,
 };

src/components/FileUpload/FileUpload.stories.mdx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useRef } from 'react';
 import { action } from '@storybook/addon-actions'
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 
@@ -183,6 +183,43 @@ A file upload component
 			)
 		}}
 	</Story>
+	<Story name='No Autoupload'>
+		{() => {
+			const [files, setFiles] = useState([]);
+			const ref = useRef();
+			return (
+				<>
+					<FileUpload
+						ref={ref}
+						id="my-upload"
+						options={{
+							allowedMimeTypes: ['application/zip'],
+							allowedFileTypes: ['zip'],
+							maxFileSize: 5000000000000000,
+							url: 'api/upload',
+							fileLimit: 3,
+							autoUpload: false,
+							requestHeaders: [{
+								key: 'x-custom-header-1',
+								value: 'value-1'
+							}, {
+								key: 'x-custom-header-2',
+								value: 'value-2'
+							}]
+						}}
+						selectQueuedFiles={(files) => console.log(files)}
+						files={files}
+						removeFile={(id, index) => setFiles(files.filter(file => file.id === id))}
+						selectUploadedFiles={action()}
+					>
+						<FileUploadMessage>Drag your files here or click to upload</FileUploadMessage>
+						<FileUploadDescription>Optional description message</FileUploadDescription>
+					</FileUpload>
+					<button onClick={() => ref.current.startUpload()}>Upload</button>
+				</>
+			)
+		}}
+	</Story>
 </Preview>
 
 ## Props

src/components/FileUpload/FileUploadZone/FileUploadZone.jsx

@@ -1,13 +1,16 @@
+/* eslint-disable react/require-default-props */
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useMemo, useRef, useState } from 'react';
+import React, {
+	forwardRef, useImperativeHandle, useMemo, useRef, useState,
+} from 'react';
 
 import { useSlot } from '../../../hooks/useSlot';
 import { ProgressBar } from '../../ProgressBar';
 import { FileUploadDescription, FileUploadMessage } from '../FileUpload.slots';
 import { Uploader } from '../Uploader';
 
-const FileUploadZone = ({
+const FileUploadZone = forwardRef(({
 	autoUpload = true,
 	id = '',
 	ariaId = '',
@@ -18,12 +21,12 @@ const FileUploadZone = ({
 	onCustomDrop,
 	uploadedFiles = () => null,
 	invalidFiles = () => null,
+	queuedFiles = () => null,
 	onRequestError = () => null,
 	allowedMimeTypes = [],
 	allowedFileTypes = [],
 	children,
-
-}) => {
+}, ref) => {
 	/**
 	 * Hooks
 	 */
@@ -36,6 +39,13 @@ const FileUploadZone = ({
 	const accept = useMemo(() => allowedFileTypes.map((type) => `.${type}`).concat(allowedMimeTypes).join(','),
 		[allowedFileTypes, allowedMimeTypes]);
 
+	useImperativeHandle(ref, () => ({
+		uploadFiles(files, extraHeaders) {
+			// eslint-disable-next-line no-use-before-define
+			return uploadFiles(files, extraHeaders);
+		},
+	}));
+
 	/**
 	 * Methods
 	 */
@@ -47,13 +57,13 @@ const FileUploadZone = ({
 		}
 	};
 
-	const uploadFiles = (files) => {
+	const uploadFiles = (files, extraHeaders) => new Promise((resolve, reject) => {
 		// Reset progress
 		setUploadProgress(0);
 		setUploadingFiles(files);
 
 		// upload
-		uploader.uploadFiles(files).subscribe(
+		uploader.uploadFiles(files, extraHeaders).subscribe(
 			(response) => {
 				if (response.progress) {
 					setUploadProgress(Math.floor(response.progress * 100));
@@ -79,14 +89,18 @@ const FileUploadZone = ({
 					files,
 					error,
 				});
+
+				reject(error);
 			},
 			() => {
 				setUploadProgress(0);
 				setUploadingFiles([]);
 				clearFileInput();
+
+				resolve();
 			},
 		);
-	};
+	});
 
 	const handleFiles = async (files, customHandler) => {
 		const response = await Promise.resolve(uploader.validateFiles(files));
@@ -95,9 +109,14 @@ const FileUploadZone = ({
 		if (customHandler) {
 			customHandler(response.validFiles);
 		}
+
 		if (autoUpload && response.validFiles.length > 0) {
 			uploadFiles(response.validFiles);
 		}
+
+		if (!autoUpload && response.validFiles.length > 0) {
+			queuedFiles(response.validFiles);
+		}
 	};
 
 	const handleCustomClick = (e) => {
@@ -200,7 +219,7 @@ const FileUploadZone = ({
 			</div>
 		</>
 	);
-};
+});
 
 FileUploadZone.propTypes = {
 	autoUpload: PropTypes.bool,
@@ -211,6 +230,7 @@ FileUploadZone.propTypes = {
 	ariaId: PropTypes.string,
 	uploadedFiles: PropTypes.func,
 	invalidFiles: PropTypes.func,
+	queuedFiles: PropTypes.func,
 	onRequestError: PropTypes.func,
 	onCustomClick: PropTypes.func,
 	onCustomDrop: PropTypes.func,