synapsestudios / react-drop-n-crop Goto Github PK

I don't have permissions, need @bobeagan.

• Add description An opinionated implementation of react-dropzone and react-cropper
• Add Tags react javascript drop-n-crop react-drop-n-crop dropzone react-dropzone cropper react-cropper drag-and-drop crop-image image-cropper crop image

It's a pretty good. But is there anyway to custom the content message for localization purpose? Thanks!

Warning: You are manually calling a React.PropTypes validation function for the zoom prop on ReactCropper. This is deprecated and will not work in production with the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.

Because this component is intended to be used as a form input it should conform to the established form input api.

In the future, we can look at supporting things like onBlur, etc, but for now just changing onSave to onChange will help.

It'd be nice to figure out how to implement a value prop so that this can be turned into a controlled component. Obviously that would require more information than just the cropped File object that is output by onSave, so this might not be a good idea.

In order to implement a value prop onChange needs to be updated to return an object shaped something like this:

{
  originalImage: File object,
  croppedImage: File object,
  croppedDimensions: {x: int, y: int, width: int, height: int}
}

These values could be useful in other scenarios anyway (especially if we decide to do image processing on the server), but changes fundamentally the simplicity of this component.

At the very least we'll want to do an initialValue prop that takes a File object for use cases like re-cropping an image that's already been uploaded.

If you set the autoCropArea to any value < 1,, drop an image, and then immediately crop the image without moving the crop area, the value will be the entire image, instead of the cropped area.

Is there a way to set up the cropper so that even when I just dropped an image, the crop result will match the crop area ?

Having issues when using with Typescript.

Could not find a declaration file for module '@synapsestudios/react-drop-n-crop'. '.../node_modules/@synapsestudios/react-drop-n-crop/lib/index.js' implicitly has an 'any' type.
Try npm install @types/synapsestudios__react-drop-n-crop if it exists or add a new declaration (.d.ts) file containing declare module '@synapsestudios/react-drop-n-crop';

using the const = require form cuses problems when I render - with the message that render expects a string but got an object.

When I try to upload the get error..
How to reset the dropzone ??

thx

I'm trying to set initial value of component setting to 'src' and 'result' my base64 picture. Drop zone ancd crop brokes

Is there a way, limit can be set so that user cannot select or drag-drop more than 1 image?

I came across this amazing library yet I have a feeling that documentation is not enough.

In case anyone struggle with handling the uploaded files, hope this help :)

If you follow the instructions at ReadMe.md, then you should have a state variable with 5 attributes (result, filename, filetype, src, err).
The "result" attribute contains a dataURL. Although it is nice of this library to do the conversion for us, sometimes we may need to use a File object. In my case, I need to upload the image to my Firebase Cloud Storage, and the SDK requires a File object.

https://stackoverflow.com/questions/6850276/how-to-convert-dataurl-to-file-object-in-javascript

The above page at stack overflow illustrates exactly what needs to be done.
Good luck with programming!

We should verify that this update (#18) doesn't cause any breaking changes, and document the change in an upgrade guide.

When used with redux-form, props are passed in with cloneElement and react throws a warning:
Failed prop type: The prop 'onChange' is marked as required in 'DropNCrop', but its value is 'undefined'.

This is apparently intentional.

facebook/react#4494

Conclusion: Props shouldn't be required. onChange shouldn't be required and should default to a no-op.