first commit

.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+npm-debug.log
+examples/.uploads/*
+.tmp/*

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Doracone Co
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,148 @@
+React Files
+=======================
+
+A minimal, zero dependency, file input (dropzone) component for React.
+
+
+![Alt text](/demo.gif?raw=true "Demo")
+
+
+```bash
+npm install react-files --save
+```
+
+## Basic Usage
+
+```js
+import React from 'react'
+import Files from 'react-files-ts'
+
+const FileDropzone = () => {
+  const handleChange = (files) => {
+    console.log(files)
+  }
+
+  const handleError = (error, file) => {
+    console.log('error code ' + error.code + ': ' + error.message)
+  }
+
+  return (
+    <div className="files">
+      <Files
+        className='files-dropzone'
+        onChange={handleChange}
+        onError={handleError}
+        accepts={['image/png', '.pdf', 'audio/*']}
+        multiple
+        maxFileSize={10000000}
+        minFileSize={0}
+        clickable>
+        Drop files here or click to upload
+      </Files>
+    </div>
+  )
+}
+```
+
+1. The most significant change is that `react-files-ts` no longer manages state internally to track files that have been uploaded to a file list. This can be achieved quite simply however.
+2. `dropActiveClassName` prop has been renamed to `dragActiveClassName`.
+2. Removed unnecessary parent/wrapper `div` element. No more default values for `className` or `dragActiveClassName` props.
+3. Ability to pass in a render prop with a prop that indicates whether a drag is in progress.
+4. Ability to pass in attributes to underlying input
+
+
+## Props
+
+`onChange(files)` - *Function*
+
+Perform work on files added when submit is clicked.
+
+---
+
+`onError(error, file)` - *Function*
+  - `error.code` - Number
+  - `error.message` - String
+
+Perform work or notify the user when an error occurs.
+
+Error codes are:
+1. Invalid file type
+2. File too large
+3. File too small
+4. Maximum file count reached
+
+---
+
+`accepts` - *Array* of *String*
+
+Control what types of generic/specific MIME types or file extensions can be dropped/added.
+
+> See full list of MIME types here: http://www.iana.org/assignments/media-types/media-types.xhtml
+
+Example:
+```js
+accepts={['image/*', 'video/mp4', 'audio/*', '.pdf']}
+```
+
+---
+
+`multiple` - *Boolean*
+
+Default: `true`
+
+Allow multiple files
+
+---
+
+`clickable` - *Boolean*
+
+Default: `true`
+
+Dropzone is clickable to open file browser. Disable for dropping only.
+
+---
+
+`maxFiles` - *Number*
+
+Default: `Infinity`
+
+Maximum number of files allowed
+
+---
+
+`maxFileSize` - *Number*
+
+Default: `Infinity`
+
+Maximum file size allowed (in bytes)
+
+---
+
+`minFileSize` - *Number*
+
+Default: `0`
+
+Minimum file size allowed (in bytes)
+
+---
+
+`dragActiveClassName` - *String*
+
+Class added to the Files component when user is actively hovering over the dropzone with files selected.
+
+---
+
+`inputProps` - *Object*
+
+Default: `{}`
+
+Inject properties directly into the underlying HTML `file` input. Useful for setting `required` or overriding the `style` attributes.
+
+---
+
+
+Then visit http://localhost:8080/
+
+## License
+
+MIT. Copyright (c) Doracone Co. 2023

dist/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+interface FilePreview {
+    type: 'image' | 'file';
+    url?: string;
+}
+interface ExtendedFile extends File {
+    id: string;
+    extension: string;
+    sizeReadable: string;
+    preview: FilePreview;
+}
+interface FilesProps {
+    accepts?: string[] | null;
+    children?: React.ReactNode | ((isDragging: boolean) => React.ReactNode);
+    className?: string;
+    clickable?: boolean;
+    dragActiveClassName?: string;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    multiple?: boolean;
+    maxFiles?: number;
+    maxFileSize?: number;
+    minFileSize?: number;
+    name?: string;
+    onChange?: (files: ExtendedFile[]) => void;
+    onDragEnter?: (event: React.DragEvent<HTMLDivElement>) => void;
+    onDragLeave?: (event: React.DragEvent<HTMLDivElement>) => void;
+    onError?: (error: {
+        code: number;
+        message: string;
+    }, file?: ExtendedFile) => void;
+    style?: React.CSSProperties;
+}
+declare const Files: React.FC<FilesProps>;
+export default Files;

dist/index.js

@@ -0,0 +1,106 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useCallback, useRef, useState } from 'react';
+import fileExtension from './utils/fileExtension';
+import fileSizeReadable from './utils/fileSizeReadable';
+import fileTypeAcceptable from './utils/fileTypeAcceptable';
+var Files = function (_a) {
+    var _b = _a.accepts, accepts = _b === void 0 ? null : _b, children = _a.children, className = _a.className, _c = _a.clickable, clickable = _c === void 0 ? true : _c, dragActiveClassName = _a.dragActiveClassName, _d = _a.inputProps, inputProps = _d === void 0 ? {} : _d, _e = _a.multiple, multiple = _e === void 0 ? true : _e, _f = _a.maxFiles, maxFiles = _f === void 0 ? Infinity : _f, _g = _a.maxFileSize, maxFileSize = _g === void 0 ? Infinity : _g, _h = _a.minFileSize, minFileSize = _h === void 0 ? 0 : _h, _j = _a.name, name = _j === void 0 ? 'file' : _j, _k = _a.onChange, onChange = _k === void 0 ? function (files) { return console.log(files); } : _k, onDragEnter = _a.onDragEnter, onDragLeave = _a.onDragLeave, _l = _a.onError, onError = _l === void 0 ? function (err) { return console.log("error code ".concat(err.code, ": ").concat(err.message)); } : _l, style = _a.style;
+    var idCounter = useRef(1);
+    var dropzoneElement = useRef(null);
+    var inputElement = useRef(null);
+    var _m = useState(false), isDragging = _m[0], setDragging = _m[1];
+    var handleError = function (error, file) {
+        onError(error, file);
+    };
+    var handleDragOver = useCallback(function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }, []);
+    var handleDragEnter = function (event) {
+        var el = dropzoneElement.current;
+        if (dragActiveClassName && el && !el.className.includes(dragActiveClassName)) {
+            el.className = "".concat(el.className, " ").concat(dragActiveClassName);
+        }
+        if (typeof children === 'function') {
+            setDragging(true);
+        }
+        if (onDragEnter) {
+            onDragEnter(event);
+        }
+    };
+    var handleDragLeave = function (event) {
+        var el = dropzoneElement.current;
+        if (dragActiveClassName && el) {
+            el.className = el.className.replace(" ".concat(dragActiveClassName), '');
+        }
+        if (typeof children === 'function') {
+            setDragging(false);
+        }
+        if (onDragLeave) {
+            onDragLeave(event);
+        }
+    };
+    var openFileChooser = function () {
+        if (inputElement.current) {
+            inputElement.current.value = '';
+            inputElement.current.click();
+        }
+    };
+    var handleDrop = function (event) {
+        event.preventDefault();
+        handleDragLeave(event);
+        var filesAdded = event instanceof DragEvent && event.dataTransfer
+            ? event.dataTransfer.files
+            : event.target.files;
+        if (!filesAdded)
+            return;
+        if (!multiple && filesAdded.length > 1) {
+            filesAdded = [filesAdded[0]];
+        }
+        var fileResults = [];
+        if (filesAdded) {
+            for (var i = 0; i < filesAdded.length || 0; i += 1) {
+                var file = filesAdded[i];
+                file.id = "files-".concat(idCounter.current);
+                idCounter.current += 1;
+                file.extension = fileExtension(file);
+                file.sizeReadable = fileSizeReadable(file.size);
+                file.preview = file.type && file.type.split('/')[0] === 'image'
+                    ? { type: 'image', url: URL.createObjectURL(file) }
+                    : { type: 'file' };
+                if (fileResults.length >= maxFiles) {
+                    handleError({ code: 4, message: 'maximum file count reached' }, file);
+                    break;
+                }
+                if (file.size > maxFileSize) {
+                    handleError({ code: 2, message: "".concat(file.name, " is too large") }, file);
+                    break;
+                }
+                if (file.size < minFileSize) {
+                    handleError({ code: 3, message: "".concat(file.name, " is too small") }, file);
+                    break;
+                }
+                if (!fileTypeAcceptable(accepts, file)) {
+                    handleError({ code: 1, message: "".concat(file.name, " is not a valid file type") }, file);
+                    break;
+                }
+                fileResults.push(file);
+            }
+        }
+        onChange(fileResults);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("input", __assign({ accept: accepts ? accepts.join(',') : '', style: { display: 'none' } }, inputProps, { ref: inputElement, type: "file", multiple: multiple, name: name, onChange: handleDrop })),
+        React.createElement("div", { ref: dropzoneElement, className: className, onClick: clickable ? openFileChooser : undefined, onDrop: handleDrop, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, style: style }, typeof children === 'function' ? children(isDragging) : children)));
+};
+export default Files;

dist/utils/fileExtension.d.ts

@@ -0,0 +1,4 @@
+declare const fileExtension: (file: {
+    name: string;
+}) => string;
+export default fileExtension;

dist/utils/fileExtension.js

@@ -0,0 +1,8 @@
+var fileExtension = function (file) {
+    var extensionSplit = file.name.split('.');
+    if (extensionSplit.length > 1) {
+        return extensionSplit[extensionSplit.length - 1];
+    }
+    return 'none';
+};
+export default fileExtension;

dist/utils/fileSizeReadable.d.ts

@@ -0,0 +1,2 @@
+declare const fileSizeReadable: (size: number) => string;
+export default fileSizeReadable;

dist/utils/fileSizeReadable.js

@@ -0,0 +1,15 @@
+/* eslint-disable prefer-template */
+var fileSizeReadable = function (size) {
+    if (size >= 1000000000) {
+        return Math.ceil(size / 1000000000) + 'GB';
+    }
+    if (size >= 1000000) {
+        return Math.ceil(size / 1000000) + 'MB';
+    }
+    if (size >= 1000) {
+        return Math.ceil(size / 1000) + 'KB';
+    }
+    return Math.ceil(size) + 'B';
+};
+/* eslint-enable prefer-template */
+export default fileSizeReadable;

dist/utils/fileTypeAcceptable.d.ts

@@ -0,0 +1,6 @@
+interface FileObject {
+    type?: string;
+    extension?: string;
+}
+declare const fileTypeAcceptable: (accepts: string[] | null, file: FileObject) => boolean;
+export default fileTypeAcceptable;

dist/utils/fileTypeAcceptable.js

@@ -0,0 +1,31 @@
+// eslint-disable-next-line
+var mimeTypeRegexp = /^(application|audio|example|image|message|model|multipart|text|video|\*)\/[a-z0-9\.\+\*-]+$/;
+var extRegexp = /\.[a-zA-Z0-9]*$/;
+var fileTypeAcceptable = function (accepts, file) {
+    if (!accepts) {
+        return true;
+    }
+    return accepts.some(function (accept) {
+        if (file.type && accept.match(mimeTypeRegexp)) {
+            var _a = file.type.split('/'), typeLeft = _a[0], typeRight = _a[1];
+            var _b = accept.split('/'), acceptLeft = _b[0], acceptRight = _b[1];
+            if (acceptLeft && acceptRight) {
+                if (acceptLeft === '*' && acceptRight === '*') {
+                    return true;
+                }
+                if (acceptLeft === typeLeft && acceptRight === '*') {
+                    return true;
+                }
+                if (acceptLeft === typeLeft && acceptRight === typeRight) {
+                    return true;
+                }
+            }
+        }
+        else if (file.extension && accept.match(extRegexp)) {
+            var ext = accept.substr(1);
+            return file.extension.toLowerCase() === ext.toLowerCase();
+        }
+        return false;
+    });
+};
+export default fileTypeAcceptable;