Skip to main content

getUploadPreviewForBatchItemsMethod

Package​

Installation​

npm install @rpldy/upload-preview

Details​

The default way the UploadPreview component learns which items to show previews for is done by internally using the useBatchStartListener hook. This means that for a batch that hasn't started uploading, because a previous batch hasn't finished or when autoUpload = false, the previews for the next batch will not be shown.

If there's a different event (or one completely custom) you want to listen to, for example: the useBatchAddListener hook, you can do that with getUploadPreviewForBatchItemsMethod. With useBatchAddListener, the previews will be shown even for batches that hadn't started to upload yet.

This method expects a hook method as a parameter that will return a batch(-like) object with a items property as an array of BatchItems. It returns a UploadPreview component that will use the custom hook method to learn about the items to preview.

Example​

Create a custom UploadPreview components that shows previews earlier by listening to the BATCH_ADD event, instead of BATCH_START.

getUploadPreviewForBatchItemsMethod with Batch Add listener
import React from "react";
import Uploady, { useBatchAddListener } from "@rpldy/uploady";
import { getUploadPreviewForBatchItemsMethod } from "@rpldy/upload-preview";
import UploadButton from "@rpldy/upload-button";

const MyUploadPreview = getUploadPreviewForBatchItemsMethod(useBatchAddListener);

export const App = () => {
    return (
        <Uploady
            destination={{ url: "[upload-url]" }}
        >
            <div className="App">
                <UploadButton>Upload Files</UploadButton>
                <br />
  
                <MyUploadPreview
                    maxPreviewVideoSize={2}
                    fallbackUrl="https://icon-library.net/images/image-placeholder-icon/image-placeholder-icon-6.jpg"
                />
            </div>
        </Uploady>
    );
}