react-videos-uploading

react-videos-uploading

The simple videos 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 videos uploading.

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

Installation

npm

npm install --save react-videos-uploading

yarn

yarn add react-videos-uploading

Basic

import React from 'react';
import VideoUploading from 'react-videos-uploading';

export function App() {
  const [videos, setVideos] = React.useState<File[]>([]);

  const onChange = (videoList: File[]) => {
    setVideos(videoList);
  };

  return (
    <div id="app">
      <VideoUploading value={videos} onChange={onChange} {...props}>
        {({
          videoList,
          errors,
          isDragging,
          onVideoUpload,
          onVideoRemoveAll,
          onVideoUpdate,
          onVideoRemove,
          dragProps,
        }) => {
          return (
            <div className="upload__video-wrapper">
              {errors && errors.maxNumber && (
                <span>Number of selected videos exceed maxNumber</span>
              )}

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

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

              <div id="list-videos">
                {videoList.map((video, index) => (
                  <div key={`video-${index}`} className="video-item">
                    <p data-testid={`video-${index}`} id={`video-${index}`}>
                      {video.name}
                    </p>
                    <div className="video-item__btn-wrapper">
                      <button
                        id={`update_${index}`}
                        type="button"
                        onClick={() => onVideoUpdate(index)}
                      >
                        {`Update ${index}`}
                      </button>
                      <button
                        id={`remove_${index}`}
                        type="button"
                        onClick={() => onVideoRemove(index)}
                      >
                        {`Remove ${index}`}
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          );
        }}
      </VideoUploading>
    </div>
  );
}

Validation

...
  {({ videoList, onVideoUpload, onVideoRemoveAll, errors }) => (
    errors && <div>
      {errors.maxNumber && <span>Number of selected videos 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

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

Props

parameter	type	options	default	description
value	array		[]	List of videos
onChange	function	(videoList, addUpdateIndex) => void		Called when add, update or delete action is called
multiple	boolean		false	Set true for multiple chooses
maxNumber	number		1000	Number of videos user can select if mode = multiple
onError	function	(errors, files) => void		Called when it has errors
acceptType	array	['mp4', 'webm', 'vob']	[]	The file extension(s) to upload
maxFileSize	number			Max video size (Byte) and it is used in validation
inputProps	React.HTMLProps<HTMLInputElement>

Exported options

parameter	type	description
videoList	array	List of videos to render.
onVideoUpload	function	Called when an element is clicks and triggers to open a file dialog
onVideoRemoveAll	function	Called when removing all videos
onVideoUpdate	(updateIndex: number) => void	Called when updating an video at updateIndex.
onVideoRemove	(deleteIndex: number | number[]) => void	Called when removing one or list video.
errors	object	Exported object of validation
dragProps	object	Native element props for drag and drop feature
isDragging	boolean	"true" if an video is being dragged

Contributors ✨

Thanks goes to these wonderful people (emoji key):

vutoan266 💻 🤔 📖 🚧 ⚠️ 👀

David Nguyen 💻 🤔 📖 👀

DK 💻 🚇 🤔 👀 📖

Isaac Maseruka 💻

Vu Nguyen 💻

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