@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

Example

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

export const App = () => (
     <Uploady>
      
        <UploadPreview
            fallbackUrl="https://icon-library.net/images/image-placeholder-icon/image-placeholder-icon-6.jpg"/>
    </Uploady>
);

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"