react-files-uploading v1.0.2

react-files-uploading

The simple files uploader applied Render Props pattern. (You can read more about this pattern here).

This approach allows you to fully control UI component and behaviours.

This is a modified version of react-images-uploading for files uploading.

• Installation
• Usage
• Props
  • Note
• Exported options
• Contributors ✨

Installation

npm

npm install --save react-files-uploading

yarn

yarn add react-files-uploading

Basic

import * as React from 'react';
import FileUploading from 'react-files-uploading';

export const App = () => {
  const [files, setFiles] = React.useState<File[]>([]);

  const onChange = (fileList: File[]) => {
    setFiles(fileList);
  };

  return (
    <div className="App">
      <FileUploading multiple value={files} maxNumber={10} onChange={onChange}>
        {({
          fileList,
          errors,
          isDragging,
          onFileUpload,
          onFileRemoveAll,
          onFileUpdate,
          onFileRemove,
          dragProps,
        }) => {
          return (
            <div className="upload__file-wrapper">
              {errors && errors.maxNumber && (
                <span>Number of selected files exceed maxNumber</span>
              )}

              <button
                id="btn-upload"
                type="button"
                style={isDragging ? { color: 'red' } : undefined}
                onClick={onFileUpload}
                {...dragProps}
              >
                Click or Drop here
              </button>

              <button id="btn-remove" type="button" onClick={onFileRemoveAll}>
                Remove all files
              </button>

              <div id="list-files">
                {fileList.map((file, index) => (
                  <div key={`file-${index}`} className="file-item">
                    <p>{file.name}</p>
                    <div className="file-item__btn-wrapper">
                      <button
                        id={`update_${index}`}
                        type="button"
                        onClick={() => onFileUpdate(index)}
                      >
                        {`Update ${index}`}
                      </button>
                      <button
                        id={`remove_${index}`}
                        type="button"
                        onClick={() => onFileRemove(index)}
                      >
                        {`Remove ${index}`}
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          );
        }}
      </FileUploading>
    </div>
  );
};

Validation

...
  {({ fileList, onFileUpload, onFileRemoveAll, errors }) => (
    errors && <div>
      {errors.maxNumber && <span>Number of selected files exceed maxNumber</span>}
      {errors.acceptType && <span>Your selected file type is not allow</span>}
      {errors.maxFileSize && <span>Selected file size exceed maxFileSize</span>}
    </div>
  )}
...

Drag and Drop

...
  {({ fileList, dragProps, isDragging }) => (
    <div {...dragProps}>
      {isDragging ? "Drop here please" : "Upload space"}
      {fileList.map((file, index) => (
        <p>{file.name}</p>
      ))}
    </div>
  )}
...

Props

Exported options

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!