Breaking News: Grepper is joining You.com. Read the official announcement!

upload and preview image and data

Mureed Hussain answered on July 3, 2023 Popularity 8/10 Helpfulness 2/10

answer upload and preview image and data

upload and preview image and data

Comment

import React, { useState } from 'react';
import axios from 'axios';

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

    const uploadSingleFile = (e) => {
        setFile(URL.createObjectURL(e.target.files[0]));
    };

    const upload = () => {
        const formData = new FormData();
        formData.append('image', file);

        let url = "http://localhost:8000/upload.php";
        axios.post(url, formData)
            .then(res => {
                console.warn(res.data);
            });
    };

    let imgPreview;
    if (file) {
        imgPreview = <img src={file} alt='' />;
    }

    return (
        <form>
            <div className="form-group preview">
                {imgPreview}
            </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 ImageUploadPreviewComponent;

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: chat.openai.com

Tags: image javascript preview upload

Link to this answer
Share Copy Link

Contributed on Jul 03 2023

Mureed Hussain

0 Answers Avg Quality 2/10

upload and preview image and data

Contents

More Related Answers

upload and preview image and data

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.