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

show uploaded image in react/nextjs

Add Answer

Hitesh answered on November 22, 2021 Popularity 1/10 Helpfulness 1/10

answer show uploaded image in react/nextjs

related next js react image upload

related upload image to server react next

related show uploaded image in react/nextjs

show uploaded image in react/nextjs

Comment

const handleFile = (e) => {
        setMessage("");
        let file = e.target.files;
        
        for (let i = 0; i < file.length; i++) {
            const fileType = file[i]['type'];
            const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
            if (validImageTypes.includes(fileType)) {
                setFile([...files,file[i]]);
            } else {
                setMessage("only images accepted");
            }
            
        }
    
    };

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: bbbootstrap.com

Tags: image javascript show

Link to this answer
Share Copy Link

Contributed on Jun 17 2022

Hitesh

0 Answers Avg Quality 2/10

Closely Related Answers

next js react image upload

Comment

import { useState } from "react";

/**
 * # MY ACCOUNT GOOGLE PLAY:
 * @see {@link https://play.google.com/store/apps/developer?id=dzino Google Play}
 */

export default function PrivatePage(props) {
  const [image, setImage] = useState(null);
  const [createObjectURL, setCreateObjectURL] = useState(null);

  const uploadToClient = (event) => {
    if (event.target.files && event.target.files[0]) {
      const i = event.target.files[0];

      setImage(i);
      setCreateObjectURL(URL.createObjectURL(i));
    }
  };

  const uploadToServer = async (event) => {
    const body = new FormData();
    body.append("file", image);
    const response = await fetch("/api/file", {
      method: "POST",
      body
    });
  };

  return (
    <div>
      <div>
        <img src={createObjectURL} />
        <h4>Select Image</h4>
        <input type="file" name="myImage" onChange={uploadToClient} />
        <button
          className="btn btn-primary"
          type="submit"
          onClick={uploadToServer}
        >
          Send to server
        </button>
      </div>
    </div>
  );
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: codesandbox.io

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Mar 29 2022

Nabila

0 Answers Avg Quality 2/10

upload image to server react next

Comment

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
// Uploader component
  public path: object = {
    removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',
    saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save'
  }
public render(): JSX.Element{
    return (
        <UploaderComponent asyncSettings = {this.path} minFileSize = {10000} maxFileSize= {28400000}
        />
        )
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

Popularity 7/10 Helpfulness 1/10 Language javascript

Source: ej2.syncfusion.com

Tags: image javascript next

Link to this answer
Share Copy Link

Contributed on Mar 29 2022

Nabila

0 Answers Avg Quality 2/10

show uploaded image in react/nextjs

Comment

useEffect(() => {
   // create the preview
   const objectUrl = URL.createObjectURL(selectedFile)
   setPreview(objectUrl)

   // free memory when ever this component is unmounted
   return () => URL.revokeObjectURL(objectUrl)
}, [selectedFile])

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: image imag

Link to this answer
Share Copy Link

Contributed on Nov 22 2021

Grieving Gharial

0 Answers Avg Quality 2/10

show uploaded image in react/nextjs

Contents

More Related Answers

show uploaded image in react/nextjs

Closely Related Answers

next js react image upload

upload image to server react next

show uploaded image in react/nextjs

Grepper

Documentation

Social

Legal

Contact

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