Skip to content
This repository has been 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

Open
mkondel opened this issue Jul 2, 2018 · 0 comments

Comments

@mkondel
Copy link

mkondel commented Jul 2, 2018

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>
    );
  }
}
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant