1

Before updating profile picture, I want to preview it. So, here I use function to preview and submit it. But, this two of task can't be do in one fuction. If you know how to do it. Please help me.

<div class="mb-3">
                <label for="formFile" class="form-label">
                  {" "}
                  <strong> Profile Picture</strong>{" "}
                </label>

                <div className="row">
                  <div className="col-sm-4">
                    <img className="img shadow" src={file} alt="select image" />
                  </div>

                  <div className="col-sm-8">
                    <input
                      class="form-control"
                      type="file"
                      id="file"
                      filename="file"
                      onChange={onChangeFile}
                      required
                    />
                  </div>
                </div>
              </div>

this is the function i used

const onChangeFile = (e) => {
    setfile(e.target.files[0]);

    const [file] = e.target.files;
    setfile(URL.createObjectURL(file));

    // if (e.target.files && e.target.files[0]) {
    //   setfile(URL.createObjectURL(e.target.files[0]));
    //   setfile(e.target.files[0]);
    // }
  };
Dilshan
  • 11
  • 1
  • Try to have a look on this topic: https://stackoverflow.com/questions/38049966/get-image-preview-before-uploading-in-react it seems to do what you want. – JStw Oct 06 '22 at 07:33
  • you can use a react bootstrap modal in which you can implement your image to preview first and then inside the modal you can add a button "close" to close the modal . and thats it . modal means a container or box. you can search google "https://react-bootstrap.netlify.app/components/modal/#rb-docs-content" and find best suited for your application – Rahul Mohanty Oct 06 '22 at 07:41

1 Answers1

0

https://jakub-kozak.medium.com/how-to-open-the-native-camera-in-mobile-browsers-327820fa669a

This article explains how to do preview a photo you have uploaded / taken!

Jan Arend
  • 284
  • 2
  • 17