jakehartnell/react-images-upload

React input file component with images preview

react-images-upload's Issues

onChange function should be called with only the files that were accepted

The onChange function is currently called back with an array of the files that were added. However, some of these files may have been rejected because they were too large, of an invalid type, etc.

There's no way for the parent component to know which of these files were accepted/rejected without duplicating the validation logic within the component.

In the most common case, the parent component will only be interested in the files that were accepted, so we should call the onChange function with the accepted files instead.

How do you reset this component?

Uploading works fine but how would I reset this component after saving an image to my backend ?

No event handler for removing an image

As far as I can tell, there is no way to detect when a user removes an image from the preview. This is necessary to keep track of the images the user wish to choose.

Will this be implemented at some point?

Allow one Image select

how can config component so it allow only selection of single image currently can select multiple images

Error in npm run build

This library causing problem when I execute npm run build , any solution for that?

Thanks

image extension validation should be case-insensitive

e.g. If the user specifies

        <ImageUploader
          withIcon
          onChange={this.onChange}
          imgExtension={['.png']}
          buttonText="Add Images"
          fileTypeError=" is not a supported image type"/>

then all of the following should be allowed

• foo.png
• foo.PNG
• foo.PnG
• etc.

cant upload jpeg file event if it's the same image type as jpg

Error image classes are incorrectly concatenated

In the renderErrors() method there should be a space between the errorMessage CSS class, and the class provided via the errorClass prop.

https://github.com/JakeHartnell/react-images-upload/blob/master/src/component/index.js#L123
https://github.com/JakeHartnell/react-images-upload/blob/master/src/component/index.js#L132

Label doesn't update with changes to file types/file size

Current setup:

<ImageUploader
  id="photo"
  withIcon={false}
  buttonText="Change photo"
  onChange={() => this.onDrop}
  imgExtension={['.jpeg', '.jpg', '.png']}
  maxFileSize={5242880}
/>

Current text:

Max file size: 5mb, accepted: jpg|gif|png

Expected text:

Max file size: 4mb, accepted: jpeg|jpg|png

PropType error on style

Failed prop type: Invalid prop style of type object supplied to ReactImageUploadComponent, expected string.

ReactImageUploadComponent.defaultProps = {
style: {},
};

ReactImageUploadComponent.propTypes = {
style: PropTypes.string,
}

multiple image selection when singleImage is true

Wrong behavior, when singleImage is true user should not be able to select multiple image to upload, not just on the component UI.

Provide file data URLs when callback function is invoked

When the onChange function is called, only the file objects are provided. So if the parent component needs the file data URLs, they have to process the files again with a FileReader, which is an expensive operation.

To avoid this, the file data URLs could be passed as a second argument to this function.

How can I pass the uploaded images to my server?

Really thank you soo much, you saved my time alot.

I need to save the uploaded image to my server, when I try to pass pictures state , I have getting
Uncaught TypeError: Illegal invocation error.

Any help please..

If you select an image, remove it, then select it again, nothing happens

See this demo. The same problem occurs if you select 2 images, remove them, then select these same 2 images again.

It seems that the second time a set of files are chosen, the onDropFile handler is not triggered.

User can choose multiple files when singleImage is true

The markup for the input element always has an attribute multiple="multiple" but this attribute should be omitted if the singleImage prop is set to true.

Also, the singleImage attribute is not documented.

Improve style of image previews

There's too much (grey) padding around the image previews, which makes the images themselves very small. Screenshot

buttonClassName prop has the wrong type

It should be a string, but it's defined as an object

Update demo site to latest version

The demo site is using an ancient version of the image upload component, could we update it to use the latest version?

Proptype validation

ReactImageUploadComponent.PropTypes = {

should be ReactImageUploadComponent.propTypes = {

an error is thrown in the console currently

Elements inside buttonText property

I've tried to add elements as child of the of the component, it worked properly but a warning appears in the browsers when the application is deployed.

My example:

<ImageUploader withIcon={false} buttonText={ <p> <Icon>cloud_upload</Icon> <span className={classes.buttonText}> Upload images </span> </p> } onChange={this.onDrop} imgExtension={['.jpg', '.gif', '.png', '.gif']} maxFileSize={5242880} withPreview={true} withLabel={false} buttonClassName={classes.button} />

Is there a way to disable the validation of prop type in buttonText?

Thank you so much.

Unexpected Token error

(function (exports, require, module, __filename, __dirname) { .fileUploader {

Showing unexpected token error

Preview is not showing like the Demo example.

For some reason my image uploader is not showing the image's preview.

I created my example using react-create-app and just copy and paste the example instalation in my App.js file.

Here is my package.json

{
"name": "teste",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-flip-move": "^3.0.2",
"react-images-upload": "^1.1.99",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

and my App.js:

import React from 'react';
import ImageUploader from 'react-images-upload';

class App extends React.Component {

constructor(props) {
    super(props);
     this.state = { pictures: [] };
     this.onDrop = this.onDrop.bind(this);
}

onDrop(picture) {
    this.setState({
        pictures: this.state.pictures.concat(picture),
    });
}

render() {
    return (
        <ImageUploader
            withIcon={true}
            buttonText='Choose images'
            onChange={this.onDrop}
            imgExtension={['.jpg', '.gif', '.png', '.gif']}
            maxFileSize={5242880}
        />
    );
}

}

export default App;

Form submit trigger

When put inside a form, the click on the upload button trigger the submit functionality.

Fixed amount of images

Hi!
How can I set fixed amount of uploaded images?

Image to Base64 format

can you help me to convert images to base64 formate using this package?

OnDelete

This package is missing a lot of functionality, there is a delete button included but all it is doing is removing it from state with no propType to be able to edit the onDelete function, same with being able to set it to single file upload instead of multi upload.

localhost error

@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill webpack/hot/only-dev-server react-hot-loader/patch ./index.js

setState callback is never called

onDrop is not called

Error on importing react-images-upload.

When I import react-images-upload from node_modules Like that.

import ImageUploader from 'react-images-upload';

It gives me error.

Uncaught SyntaxError: Unexpected token export

Incorrect default accept attribute value

By default, the input element's accept attribute is accept="accept=image/*". It should instead be:
accept="image/*"

"Choose images" button type should be configurable

The "choose images" button does not have a type attribute. A consequence of this is that when the ImageUploader is used within a <form>, clicking on this button causes the form to be submitted (because the default type of a button in a form is a submit button).

It should be possible to configure the button type via a prop, so that it can be changed to (for example) <button type="button"> which would not submit a form when clicked.

Error in ./UploadIcon.svg

Hi guys, I am having this problem that when I import, it said "Error in ./UploadIcon.svg". Any one know how to fix it?

Thank you so much!

Module parse failed: Unexpected token (85:10)

I'd love to use your module but using your example that's the error I get on compile, I'm using an app created by the create-react-app module so don't have control over the webpack configuration (I chose not to anyway):

./node_modules/react-images-upload/index.js
Module parse failed: Unexpected token (85:10)
You may need an appropriate loader to handle this file type.
| renderIcon() {
| if (this.props.withIcon) {
| return

;
| }
| }

No matching version for [email protected]

What's the solution of this?

File upload triggered when hitting the `enter` key on any input text

How to suppress the file upload window from showing when hitting enter from any input text inside the form?

Eliminate invalid callbacks to onChange prop

In this example usage, I upload 2 files, one of which is 2.7MB and the other is 4.2MB. Notice that the onChange prop is called back multiple times. The first time it is called back, only the first uploaded file is provided in the arguments, the second time it is called back, both files are provided in the arguments, etc.

You can see evidence of this in the console output of the example above

onChange called back with files: [File(2744170)]
onChange called back with files: (2) [File(2744170), File(4199232)]

Similarly, if 3 files are uploaded, onChange is called back 3 times with 1, 2, and 3 files respectively.

We should instead callback to onChange only once, providing all successfully processed files in the arguments.

I'm pretty sure that this bug was introduced recently, probably during the last month or two. The performance on the demo website is much better. My guess is that the demo site is using an older version of the component that does not include this bug.

Img Extension attribute

Why is this defaulted to ['.jpg', '.gif', '.png', '.gif'] - i.e instead of

['.jpg', '.gif', '.png'] is this an error - I notice the label message also displays this aswell - thanks

Improve style of remove buttons

The buttons for removing an image (the X on a red circular background) are too small. They're very difficult to click on mobile devices.

Demo link has incorrect npm install instructions

The heroku demo link shows instructions for npm install but the package is referencing react-image-upload and not react-images-upload.

SyntaxError: Unexpected token export

C:\server\node_modules\react-images-upload\index.js:313
export default ReactImageUploadComponent;
^^^^^^

SyntaxError: Unexpected token export
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:599:28)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)

Anyone else get this error?

dont convert to FileReader

i want to upload the uploaded image to server, but your component convert it to base 64. can you help me ?

repo URL in package.json is incorrect

It should be https://github.com/jakehartnell/react-images-upload, rather than https://github.com/jakehartnell/react-image-upload.

A consequence of this is that the link to the repo on npmjs.com is broken.

Removing image doesn't trigger onChange

Adding images is great, it adds the preview, displays the image as you would expect.

However, removing an image from the list does not update the onChange prop.

Minified React Error

When trying to deploy this app in production, as soon as I render the image uploader, the app crashes and throws a minified react error. My app does not do this with any other component.

defaultImage problem

Hi,

I tried to use a default image as obviously implemented in the code, but not working for me, since componentWillReceiveProps() is not fired.

I get the behavior I expected, if the initalization of the pictures state is already done in the constructor. However, I don't know if this would lead to undesired behavior.

By modifying this line:

react-images-upload/src/component/index.js

Line 19 in c19e67a

pictures: [],

to:
pictures: this.props.defaultImage ? [this.props.defaultImage] : [],

the defaultImage works for me. Is this a reasonable change and could maybe modified for the component?

Edit: Of course I also had to uncomment the componentWillReceiveProps() function.

Show progress indicator when uploading files to browser

If the user chooses large files to upload, there's a delay of several seconds while the files are processed. During this display there's no indication that the upload is progress.

Ideally, the user should be able to show/hide a message or spinner when uploading starts/stops.

How to restrict to one file?

Is there any attr for single file?

Warning: Definition for rule 'jsx-a11y/href-no-hash' was not found

This is annoying:

./src/index.js
  Line 1:  Definition for rule 'jsx-a11y/href-no-hash' was not found  jsx-a11y/href-no-hash
webpackHotDevClient.js:138
./src/App.js
  Line 1:  Definition for rule 'jsx-a11y/href-no-hash' was not found  jsx-a11y/href-no-hash
webpackHotDevClient.js:138
./src/component/index.js
  Line 1:  Definition for rule 'jsx-a11y/href-no-hash' was not found  jsx-a11y/href-no-hash
webpackHotDevClient.js:138

how to save image in images/

Can't select the same image twice

If you select an image, cancel, and then try to select the image again, the preview will not load.

Can reproduce on sample site: https://ancient-refuge-49866.herokuapp.com/

Tested in Chrome Version 62.0.3202.94 (Official Build) (64-bit)

1. Select choose images
2. Choose an image
3. Remove the image
4. Select choose images, and choose the same image again
5. Observe that the preview does not appear.