ImageUploading showing <input type="file" accept="image/*" style="display: none;"> in LIVE site

[jeynergil]

Hi, This is an awesome package.

I am using but it is only showing in local environment.

In livesite, it is only showing this:

<input type="file" accept="image/*" style="display: none;">

I couldn't find this:

<div className="upload__image-wrapper">

What could be the reason?

Thanks.

[vutoan266]

Hi @jeynergil, Could you give me a short of your code that you implement our lib?

About <div className="upload__image-wrapper">, the classname upload__image-wrapper may make you confuse cause it is just my own example classname, you could style by your own CSS.. Or you can refer the example style in: https://codesandbox.io/s/react-images-uploading-demo-u0khz?file=/src/styles.css

Hope it help you

[jeynergil]

Hi, @vutoan266 , here's the code, for some reason, nothing gets rendered on the Live site, but only on the local environment.

  <ImageUploading
                          value={imagepost}
                          onChange={this.onChange}
                          dataURLKey="data_url"
                        >
                          {({
                            imageList,
                            onImageUpload,
                            onImageRemoveAll,
                            onImageUpdate,
                            onImageRemove,
                            isDragging,
                            dragProps,
                          }) => (
//this is not rendered on Live Site, but rendered in my local environment
                            <div className="upload__image-wrapper">
                                <div
                                  className="text-muted"
                                  onClick={onImageUpload}
                                  {...dragProps}
                                >
                                  <InsertPhotoOutlinedIcon
                                    className="text-success"

                                  />
                                </div>
                              {imageList.map((image, index) => (
                                <div key={index} className="image-item">
                                  <div className="image-item__btn-wrapper float-right">
                                    <div
                                      className="float-right"
                                      onClick={() =>
                                        this.handleRemovePhoto(
                                          index,
                                          onImageRemove
                                        )
                                      }
                                    >
                                      <CloseOutlinedIcon
                                        className="text-dark"
                                      />
                                    </div>
                                  </div>
                                  <img
                                    src={image.data_url}
                                    alt=""
                                    width="100%"
                                    className="roundcornernocolor"
                                  />
                                </div>
                              ))}
                            </div>
                          )}
                        </ImageUploading>
                      </div>

[vutoan266]

Look your code seems likes normal, it's may not the cause of your issue. You should check CSS, or the rendering of the parent component. If you don't mind, give me your public website URL through email for joinning debug.