@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

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"

Changelog

0.2.3 (2020-06-05)

Features

• [uploady] - item/batch event hooks can now be scoped to a specific item

Bug fixes

• [retry] - retry sends failed batch item to be retried (not just data)
• [uploader] - retried items are added as recycled items (keeping their original id)
• [uploader] - abort now runs un-started aborted items through same processing pipeline
• [uploader] - handles abort during item start event hander
• [uploader] - better handling of data cleanup inside internals
• [upload-preview] - rememberPreviousBatches merges items, not just concating
• [upload-preview] - upload preview provides item id and file name as part of PreviewComponent props