Skip to content
This repository was archived by the owner on Nov 19, 2018. It is now read-only.
This repository was archived by the owner on Nov 19, 2018. It is now read-only.

Please implement a 'hideScaled' option to hide scaled thumbnails from the UI #200

@mkondel

Description

@mkondel

Ask: I would like to be able to hide scaled versions of uploaded files from showing in the UI from react-fine-uploader.

Details: fine-uploader has a built-in feature to resize images as thumbnails. You give it a list of sizes, and for each entry it will upload a smaller version. When I use that feature, react-fine-uploader UI will display all versions. There exist an option in fine-uploader UI to 'hideScaled', which will prevent the resized version from showing. In the following screenshot I only uploaded a single file, but the UI shows all 3 versions: 1 original (largest size) and 2 scaled (by fine-uploader).

image

My fine-uploader options are below. I used the react-fine-uploader <Gallery/> component, <CustomGallery/> is just that. Only changes were to make the UI look like a vertical list.

import FineUploaderS3 from 'fine-uploader-wrappers/s3'

const uploader = new FineUploaderS3({
    debug: true,
    options: {
        request: {
            endpoint: "https://FOOBAR.s3.amazonaws.com",
            accessKey: "FOOBAR"
        },
        signature: {
            endpoint: 'https://FOOBAR/s3handler'
        },
        scaling: {
            sendOriginal: true,
            includeExif: true,
            sizes: [
                {name: "small", maxSize: 100},
                {name: "medium", maxSize: 300}
            ]
        },
    },
})

class UploadButton extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
        <div>
            {/*
                CustomGallery is Gallery from react-fine-uploader
            */
            <CustomGallery 
                dropzone-disabled={ true }
                fileInput-multiple={ true } 
                fileInput-accept={ 'image/*' } 
                uploader={ uploader } 
            />}
        </div>
    );
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions