class component to default export function

Question

hi i need help migrating this class component to the default export function as my code is in the default export function and i need help to pass it to that format as i cant

import React, { Component } from "react";

export default class SingleImageUploadComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      file: null
    };
    this.uploadSingleFile = this.uploadSingleFile.bind(this);
    this.upload = this.upload.bind(this);
  }

  uploadSingleFile(e) {
    this.setState({
      file: URL.createObjectURL(e.target.files[0])
    });
  }

  upload(e) {
    e.preventDefault();
    console.log(this.state.file);
  }

  render() {
    let imgPreview;
    if (this.state.file) {
      imgPreview = <img src={this.state.file} alt="" />;
    }
    return (
      <form>
        <div className="form-group preview">{imgPreview}</div>

        <div className="form-group">
          <input
            type="file"
            className="form-control"
            onChange={this.uploadSingleFile}
          />
        </div>
        <button
          type="button"
          className="btn btn-primary btn-block"
          onClick={this.upload}
        >
          Upload
        </button>
      </form>
    );
  }
}

https://codesandbox.io/s/pedantic-brattain-irypt?file=/src/App.js

Ketan Ramteke · Accepted Answer · 2020-11-30 21:35:15Z

3

import React, { useState } from "react";

const SingleImageUploadComponent = () => {
  const [file, setFile] = useState(null);

  function uploadSingleFile(e) {
    setFile(URL.createObjectURL(e.target.files[0]));
    console.log("file", file);
  }

  function upload(e) {
    e.preventDefault();
    console.log(file);
  }

  return (
    <form>
      <div className="form-group preview">
        {file && <img src={file} alt="" />}
      </div>

      <div className="form-group">
        <input
          type="file"
          className="form-control"
          onChange={uploadSingleFile}
        />
      </div>
      <button
        type="button"
        className="btn btn-primary btn-block"
        onClick={upload}
      >
        Upload
      </button>
    </form>
  );
};

export default SingleImageUploadComponent;

CodeSandbox Link

edited Nov 30, 2020 at 21:35

answered Nov 30, 2020 at 20:50

Ketan Ramteke

10.7k2 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DGomez Over a year ago

Thank you very much, just one more query, the image is not displayed when uploading it

Ketan Ramteke Over a year ago

but as you can see, the image data is being fetched and is being displayed in the console.

Ketan Ramteke Over a year ago

Daniel, I forgot to parse the image URL in the previous example, that's why the Image was not being previewed. I hope you already figured it out, if not then do check out the updated code :)

Collectives™ on Stack Overflow

class component to default export function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related