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

upload image to server react next

Add Answer

Nabila answered on November 22, 2021 Popularity 7/10 Helpfulness 1/10

answer upload image to server react next

related next js react image upload

related upload image to server next js

related show uploaded image in react/nextjs

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 server upload

Link to this answer
Share Copy Link

Contributed on Mar 29 2022

Nabila

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 next js

Comment

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
    });
  };


 <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>

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: image imag

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

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

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

upload image to server react next

Contents

More Related Answers

upload image to server react next

Closely Related Answers

next js react image upload

upload image to server next js

show uploaded image in react/nextjs

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.