zerocho / react-filepicker Goto Github PK

This is not an issue of this code but in conjuction with it, so I thought I post it here and hope for the best :-)

I want to write a React-Component for the Filestack's responsive images like so. But the moment I require or import "filepicker-js", the picker won't work anymore. Any idea how this could work together?

import React from "react"

export default class FPImage extends React.Component {
  componentDidMount() {
    const filepicker = require("filepicker-js")
    filepicker.responsive()
  }

  render() {
    const { src, style, filestackApikey } = this.props
    return(
      <img
        style={style}
        data-fp-src={src}
        data-fp-apikey={filestackApikey}
        data-fp-on-resize="none"
        data-fp-image-quality="50"
      />
    )
  }
}

I tested on Safari and Chrome for iOS on both your implementation and our implementation and the new window is being blocked from being opened

I have a controlled input for setting the height of a component to allow me to set the correct cropRatio that I need for the final image. The width of the image is set to 600 and the height is originally set to 200 giving an aspect ratio of 3. The options I'm passing into the control trace out to the console as follows:

{
    "imageQuality": 100,
    "buttonText": "Upload Banner",
    "backgroundUpload": false,
    "mimetypes": ["image/*"],
    "imageDim": [600, 200],
    "cropForce": true,
    "cropRatio": 3
}

When I update the text field for the image height to 100, I can see the imageDim and and cropRatio reflected in the console as:

{
    "imageQuality": 100,
    "buttonText": "Upload Banner",
    "backgroundUpload": false,
    "mimetypes": ["image/*"],
    "imageDim": [600, 100],
    "cropForce": true,
    "cropRatio": 6
}

However... when I click the Button labeled "Upload Banner", the cropRatio matches the default, and not the updated options. Is there an additional step, am I doing something wrong or is this a bug?

Hey,
I'm trying to use react-filepicker but I keep getting "Cannot read property 'videoRes' of undefined" and I can't figure out why.

This is my setup:

In my Form Field Component:

<ReactFilepicker apikey={filestack} onSuccess={this.changeInput} options={{
                    buttonText: 'Upload picture',
                    buttonClass: 'btn btn-primary',
                    services: ['COMPUTER', 'CONVERT'],
                    conversions: ['crop', 'rotate', 'filter'],
                    mimetype: 'image/*',
                    container: 'modal',
                    imageDim: [450, 450],
                    cropRatio: 1,
                    cropForce: true,
                    multiple: false,
                    location: 'S3',
                    access: 'public',
                    path: `user_avatars/${moment().format('DD-MM-YYYY')}/`,
                  }} />

Any clue why this happens? I can't figure it out...

I am trying to create a file picker that is limited to just video file formats but I am receiving an error when the picker is loaded.

[uuid=A097EC5393404C5E] Error: the service convert couldn't be found or does not support the given mimetype(s): [u'video/*']

I am using it as follows:

Usage

<ReactFilepicker apikey={API_KEY} defaultWidget={false} options={options} onSuccess={this.uploadSuccess.bind(this)} />

Options

{
        buttonText  : 'Add Video Resume',
        mimetype    : 'video/*',
        buttonClass : 'buttonClass',
        cropRatio   : 1,
        conversions : ['crop', 'rotate', 'filter'],
        services    : ['CONVERT', 'COMPUTER', 'DROPBOX', 'FACEBOOK', 'INSTAGRAM', 'URL', 'WEBCAM', 'GOOGLE_DRIVE', 'GMAIL', 'BOX', 'CLOUDDRIVE', 'GITHUB', 'FLICKR', 'EVERNOTE', 'SKYDRIVE', 'PICASA', 'CLOUDAPP', 'IMGUR']
      }