Responsive Images

[DerKobe]

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"
      />
    )
  }
}

[ZeroCho]

@DerKobe I haven't used reponsive feature, but in my library, I'm using ref props to explicitly select the target element.

I found below code in filepicker.js

var responsive = function() {
  fp.responsiveImages.update.apply(null, arguments);
};

function update(element) {
        if (element !== undefined) {
            if (element.nodeName === "IMG") {
                construct(element);
            } else {
                throw new fp.FilepickerException("Passed object is not an image");
            }
        } else {
            constructAll(true);
        }
    }

I think you should provide the target element as an argument of responsive function. Actually i think it should work without providing any argument because filepicker calls constructAll... But, if it doesn't work, at least you should try providing an argument.

[DerKobe]

@ZeroCho The thing is as soon as I import or require filepicker, your library won't work anymore. This is strange. I guess it's the library itself that's not capable of being used this way without conflict, but do you have any idea how I can work around this issue? (when I do require('filepicker-js') I end up with a global filepicker object, but you do this in your lib and there's no such global object ... I don't get it 😢 )

[ZeroCho]

@DerKobe Hmm. I don't get it either... why don't you create responsive mode using current react-filepicker library? Any PR is welcome

[JasonSooter]

@DerKobe or anyone else who comes across this. I was able to get them to work together but just requiring/destructuring them where I needed them instead of globally or at the top of a component/module