@chayns-components/core/lib/esm/utils/fileDialog.js

A set of beautiful React components for developing your own applications with chayns.

import { createDialog, DialogType } from 'chayns-api';
export const selectFiles = _ref => {
  let {
    type,
    multiple,
    maxFileSizeInMB
  } = _ref;
  return new Promise((resolve, reject) => {
    const input = document.createElement('input');
    input.type = 'file';
    input.style.visibility = 'none';
    input.style.width = '0';
    input.style.height = '0';
    input.style.display = 'none';
    if (type !== '*/*' && type) {
      input.accept = type;
    }
    if (multiple) {
      input.multiple = true;
    }
    document.body.appendChild(input);
    const abortController = new AbortController();
    const {
      signal
    } = abortController;
    const onChange = event => {
      document.body.removeChild(input);
      abortController.abort();
      if (!event.target) {
        resolve([]);
        return;
      }
      const target = event.target;
      const {
        files
      } = target;
      if (!files) {
        resolve([]);
        return;
      }
      const fileArray = Object.values(files);
      let filteredFileArray = fileArray.filter(file => {
        const sizeInMB = file.size / 1024 / 1024;
        if (maxFileSizeInMB && maxFileSizeInMB < sizeInMB) {
          return false;
        }
        if (file.type.includes('video/') && sizeInMB > 500) {
          return false;
        }
        return !(file.type.includes('image/') && sizeInMB > 64);
      });
      if (fileArray.length !== filteredFileArray.length) {
        void createDialog({
          type: DialogType.ALERT,
          text: 'Einige Deiner ausgewählten Dateien sind zu groß.'
        }).open();
      }
      if (typeof type === 'string') {
        filteredFileArray = filterFilesByMimeType(filteredFileArray, type);
      }
      resolve(filteredFileArray);
    };
    const onCancel = () => {
      document.body.removeChild(input);
      abortController.abort();
      reject(new Error('File selection was cancelled.'));
    };
    input.addEventListener('change', onChange, {
      signal
    });
    input.addEventListener('focusout', onCancel, {
      signal
    });
    input.click();
  });
};
export const filterFilesByMimeType = (files, mimeTypes) => {
  const allowedTypes = mimeTypes.split(',').map(type => type.trim());
  const isAllowedType = fileType => allowedTypes.some(allowedType => {
    if (allowedType.endsWith('/*')) {
      const convertedAllowedType = allowedType.split('/*')[0];
      if (!convertedAllowedType) {
        return false;
      }
      return fileType.startsWith(convertedAllowedType);
    }
    return fileType === allowedType;
  });
  return Array.from(files).filter(file => isAllowedType(file.type));
};
export const getFileAsArrayBuffer = file => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onload = e => {
    if (e.target?.result) {
      resolve(e.target.result);
    } else {
      reject(Error('Could not get array buffer.'));
    }
  };
  reader.onerror = reject;
  reader.readAsArrayBuffer(file);
});
//# sourceMappingURL=fileDialog.js.map