question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Validating files and disabling preview

See original GitHub issue

How it’s supposed to validate, for example, file size? Or separate valid files from invalid ones?

How about introducing smth like validate callback? We can pass each dropped file there, split them by returned result and then pass corresponding arrays to onDropAccepted and onDropRejected.


Also, it’s said “We might want to disable the preview creation to support big files”, but there is no way to detect whether file is actually “big”. So we should either disable previews at all, or create previews for everything. Maybe, it’s worth to add another function to check whether preview for particular file should be created?


And, shouldn’t it be this.props.disablePreview here?

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:9

github_iconTop GitHub Comments

5reactions
MichaelLeeHobbscommented, Aug 19, 2016

Here’s how I validated for anyone finding this.

  const Preview = (props) => (
    (props.file) ?
      <div>
        <img style={{width: '196px', height: '196px'}} src={props.file.preview}/>
      </div> : <div>{props.text}</div>
  );

  const TWO_MiB = 2097152;
  export class ImageDropZone extends React.Component {
    constructor(props) {
      super(props);
      this.maxSize = props.maxSize ? props.maxSize : TWO_MiB;
      this.maxWidth = props.maxWidth ? props.maxWidth : 3000;
      this.maxHeight = props.maxHeight ? props.maxHeight : 3000;
      this.text = props.text ? props.text : `Drop image here. Max ${this.maxSize} and ${this.maxWidth}px by ${this.maxHeight}px`;

      this.state = {
        file: null
      }
    }

    onDrop(files) {
      if (files.length === 0) {
        Bert.alert('No files found!', 'danger');
        return;
      }
      let file = files[0];

      if (file.size > this.maxSize) {
        Bert.alert(`File: ${file.name} size: ${file.size} > max: ${this.maxSize} bytes`, 'danger');
        return;
      }

      var image = new Image();
      image.addEventListener("load", () => {
        if (image.width > this.maxWidth) {
          Bert.alert(`File: ${file.name} width: ${image.width} > max: ${this.maxWidth}px`, 'danger');
          return;
        }
        if (image.height > this.maxHeight) {
          Bert.alert(`File: ${file.name} width: ${image.height} > max: ${this.maxHeight}px`, 'danger');
          return;
        }
        this.setState({
          file: file
        });
      });
      image.src = window.URL.createObjectURL(file);
    }

    render() {
      return (
        <Dropzone multiple={false} onDrop={this.onDrop.bind(this)} accept="image/*">
          <Preview files={this.state.files} text={this.text}/>
        </Dropzone>
      );
    }
  }
5reactions
YannPlcommented, May 26, 2016

is this issue abandoned, I would like to have this option too =)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Preview mode - Optimize Resource Hub - Google Support
Preview your experience variants on multiple devices.Preview mode allows you to validate that a variant renders as intended before you start an experiment....
Read more >
Validating and Previewing Assets Prior to Import
If your file contains more than 200 assets and you want to validate them all before starting the import process, click Validate All....
Read more >
What is Protected View? - Microsoft Support
Protected View is a read-only mode where most editing functions are disabled. There are several reasons why a file opens in Protected View:....
Read more >
“Enable enhanced document viewer” unchecked in Customize ...
I want to remove the preview window that shows up when you click a file in the content tab. I have unchecked the...
Read more >
Turn off file validation - ADMX Help
Turn off file validation ; Registry Path, software\policies\microsoft\office\16.0\excel\security\filevalidation ; Value Name, enableonload ; Value Type, REG_DWORD.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found