@rpldy/upload-preview

Upload Preview

Preview component to show image or video being uploaded.

By default, will present a preview of the file being uploaded in case its an image or video.

Installation

#Yarn: 
   $ yarn add @rpldy/uploady @rpldy/upload-preview 

#NPM:
   $ npm i @rpldy/uploady @rpldy/upload-preview 

Props

Name (* = mandatory)	Type	Default	Description
loadFirstOnly	boolean	false	load preview only for the first item in a batch
maxPreviewImageSize	number	2e+7	maximum size of image to preview
maxPreviewVideoSize	number	1e+8	maximum size of video to preview
fallbackUrl	string | FallbackMethod	undefined	static URL or function that returns fallback in case failed to load preview or when file over max size
imageMimeTypes	string[]	see list below	image mime types to load preview for
videoMimeTypes	string[]	see list below	video mime types to load preview for
previewComponentProps	PreviewComponentPropsOrMethod	undefined	object or function to generate object as additional props for the preview component
PreviewComponent	React.ComponentType	img | video	The component that will show the preview
rememberPreviousBatches	boolean	false	show previous batches' previews as opposed to just the last
previewMethodsRef	React Ref	undefined	ref will be set with preview helper methods
onPreviewsChanged	(PreviewItem[]) => void	undefined	callback will be called whenever preview items array changes

Example

import React from "react";
import Uploady from "@rpldy/uploady";
import UploadPreview from "@rpldy/upload-preview";

export const App = () => (
     <Uploady destination={{ url: "my-server.com/upload" }}>     
        <UploadPreview
            fallbackUrl="https://icon-library.net/images/image-placeholder-icon/image-placeholder-icon-6.jpg"/>
    </Uploady>
);

Advanced Usage

_The props rememberPreviousBatches, previewMethodsRef, and onPreviewsChanged make it possible to do more with previews. Specifically, the make it possible to create a visual queue of the uploads.

This is especially useful when adding other features such as abort and retry.

The code below shows how to clear the previews with a button click:

import React from "react";
import Uploady from "@rpldy/uploady";
import UploadPreview from "@rpldy/upload-preview";
import UploadButton from "@rpldy/upload-button";

const PreviewsWithClear = () => {
	const previewMethodsRef = useRef();
	const [previews, setPreviews] = useState([]);

	const onPreviewsChanged = useCallback((previews) => {
		setPreviews(previews);
	}, []);

	const onClear = useCallback(() => {
		if (previewMethodsRef.current?.clear) {
			previewMethodsRef.current.clear();
		}
	}, [previewMethodsRef]);

	return <>
		<button onClick={onClear}>
            Clear {previews.length} previews
        </button>
		<br/>		
        <UploadPreview
            rememberPreviousBatches            
            previewMethodsRef={previewMethodsRef}
            onPreviewsChanged={onPreviewsChanged}
        />            		
	</>;
};

export const App = () => {	
	return <Uploady destination={{ url: "my-server.com/upload" }}>
		<UploadButton />
		<PreviewsWithClear />
	</Uploady>;
};

Custom Preview

For an example of using a custom preview component see this story.

Default image types

• "image/jpeg"
• "image/webp"
• "image/gif"
• "image/png"
• "image/apng"
• "image/bmp"
• "image/x-icon"
• "image/svg+xml"

Default video types

• "video/mp4"
• "video/webm"
• "video/ogg"

Changelog

0.13.3 (2021-07-29)

Bug fixes

• [chunked-sender] - fix progress data calculation & add progress event on chunk finish. Fix for #203

Storybook

• [chunked-sender] - added first story with item, chunk-start,chunk-finish events logging

Docs

• root - fix link to destination type & typo in README.md

Internal

• all - upgraded to latest flow (0.156.0)