`
);
};
// Not all files will be able to generate previews. In case this happens, we provide several types "generic previews" based on the file extension.
reader.onloadend = function createFilePreview() {
const previewImage = document.getElementById(imageId) as HTMLImageElement;
const fileExtension = fileName.split('.').pop();
if (fileExtension === 'pdf') {
setPreviewFallback(previewImage, PDF_PREVIEW_CLASS);
} else if (
fileExtension === 'doc' ||
fileExtension === 'docx' ||
fileExtension === 'pages'
) {
setPreviewFallback(previewImage, WORD_PREVIEW_CLASS);
} else if (
fileExtension === 'xls' ||
fileExtension === 'xlsx' ||
fileExtension === 'numbers'
) {
setPreviewFallback(previewImage, EXCEL_PREVIEW_CLASS);
} else if (fileExtension === 'mov' || fileExtension === 'mp4') {
setPreviewFallback(previewImage, VIDEO_PREVIEW_CLASS);
} else {
setPreviewFallback(previewImage, GENERIC_PREVIEW_CLASS);
}
// Removes loader and displays preview
previewImage.classList.remove(LOADING_CLASS);
previewImage.src = reader.result as string;
};
if (fileNames[i]) {
reader.readAsDataURL(fileNames[i]);
}
}
if (fileNames.length === 0) {
// Reset input aria-label with default message
fileInputEl.setAttribute('aria-label', DEFAULT_ARIA_LABEL_TEXT);
} else {
addPreviewHeading(fileInputEl, fileNames);
}
updateStatusMessage(statusElement, fileNames, fileStore);
};
/**
* When using an Accept attribute, invalid files will be hidden from
* file browser, but they can still be dragged to the input. This
* function prevents them from being dragged and removes error states
* when correct files are added.
*
* SOURCE: index.js (Lines 435-506)
*
* @param e - Event
* @param fileInputEl - The input element
* @param instructions - The container for visible interaction instructions
* @param dropTarget - The drag and drop target area
*/
const preventInvalidFiles = (
e: Event,
fileInputEl: HTMLInputElement,
instructions: HTMLElement,
dropTarget: HTMLElement
): void => {
const acceptedFilesAttr = fileInputEl.getAttribute('accept');
dropTarget.classList.remove(INVALID_FILE_CLASS);
/**
* We can probably move away from this once IE11 support stops, and replace
* with a simple es `.includes`
* check if element is in array
* check if 1 or more alphabets are in string
* if element is present return the position value and -1 otherwise
* @param file
* @param value
* @returns
*/
const isIncluded = (file: string, value: string): boolean => {
let returnValue = false;
const pos = file.indexOf(value);
if (pos >= 0) {
returnValue = true;
}
return returnValue;
};
// Runs if only specific files are accepted
if (acceptedFilesAttr) {
const acceptedFiles = acceptedFilesAttr.split(',');
const errorMessage = document.createElement('div');
const userErrorText = fileInputEl.dataset.errormessage;
const errorMessageText = userErrorText || DEFAULT_ERROR_LABEL_TEXT;
errorMessage.setAttribute('aria-hidden', 'true');
// If multiple files are dragged, this iterates through them and look for any files that are not accepted.
let allFilesAllowed = true;
const target = e.target as HTMLInputElement;
const scannedFiles =
target.files || (e as DragEvent).dataTransfer?.files || new FileList();
for (let i = 0; i < scannedFiles.length; i += 1) {
const file = scannedFiles[i];
if (allFilesAllowed) {
for (let j = 0; j < acceptedFiles.length; j += 1) {
const fileType = acceptedFiles[j];
allFilesAllowed =
file.name.indexOf(fileType) > 0 ||
isIncluded(file.type, fileType.replace(/\*/g, ''));
if (allFilesAllowed) {
TYPE_IS_VALID = true;
break;
}
}
} else break;
}
// If dragged files are not accepted, this removes them from the value of the input and creates and error state
if (!allFilesAllowed) {
removeOldPreviews(dropTarget, instructions);
fileInputEl.value = '';
errorMessage.textContent = errorMessageText;
dropTarget.insertBefore(errorMessage, fileInputEl);
const ariaLabelText = `${errorMessageText} ${DEFAULT_ARIA_LABEL_TEXT}`;
fileInputEl.setAttribute('aria-label', ariaLabelText);
errorMessage.classList.add(ACCEPTED_FILE_MESSAGE_CLASS);
dropTarget.classList.add(INVALID_FILE_CLASS);
TYPE_IS_VALID = false;
e.preventDefault();
e.stopPropagation();
}
}
};
/**
* 1. passes through gate for preventing invalid files
* 2. handles updates if file is valid
*
* SOURCE: index.js (Lines 514-519)
*
* @param event - Event
* @param fileInputEl - The input element
* @param instructions - The container for visible interaction instructions
* @param dropTarget - The drag and drop target area
*/
const handleUpload = (
event: Event,
fileInputEl: HTMLInputElement,
instructions: HTMLElement,
dropTarget: HTMLElement
): void => {
preventInvalidFiles(event, fileInputEl, instructions, dropTarget);
if (TYPE_IS_VALID === true) {
handleChange(event, fileInputEl, instructions, dropTarget);
}
};
/**
* Initialize file input behavior
*
* SOURCE: index.js (Lines 521-558)
*
* @param root - Root element or document
* @returns Cleanup function
*/
export function initializeFileInput(root: HTMLElement | Document = document): () => void {
const fileInputs = selectOrMatches(DROPZONE, root);
const handlers = new Map();
fileInputs.forEach((fileInputEl) => {
const { instructions, dropTarget } = enhanceFileInput(fileInputEl as HTMLInputElement);
const handleDragOver = function (this: HTMLElement) {
this.classList.add(DRAG_CLASS);
};
const handleDragLeave = function (this: HTMLElement) {
this.classList.remove(DRAG_CLASS);
};
const handleDrop = function (this: HTMLElement) {
this.classList.remove(DRAG_CLASS);
};
const handleChangeEvent = (e: Event) =>
handleUpload(e, fileInputEl as HTMLInputElement, instructions, dropTarget);
dropTarget.addEventListener('dragover', handleDragOver, false);
dropTarget.addEventListener('dragleave', handleDragLeave, false);
dropTarget.addEventListener('drop', handleDrop, false);
(fileInputEl as HTMLInputElement).addEventListener('change', handleChangeEvent, false);
// Store handlers for cleanup
handlers.set(fileInputEl as HTMLElement, {
dropTarget,
handleDragOver,
handleDragLeave,
handleDrop,
handleChangeEvent,
});
});
return () => {
fileInputs.forEach((fileInputEl) => {
const handler = handlers.get(fileInputEl as HTMLElement);
if (handler) {
handler.dropTarget.removeEventListener('dragover', handler.handleDragOver, false);
handler.dropTarget.removeEventListener('dragleave', handler.handleDragLeave, false);
handler.dropTarget.removeEventListener('drop', handler.handleDrop, false);
(fileInputEl as HTMLInputElement).removeEventListener(
'change',
handler.handleChangeEvent,
false
);
}
});
handlers.clear();
};
}
// Export functions needed by other components
export { getFileInputContext };