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

upload image to server next js

Nabila answered on March 29, 2022 Popularity 10/10 Helpfulness 3/10

answer upload image to server next js

related upload image to server react next

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

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

upload image to server next js

Contents

More Related Answers

upload image to server next js

Closely Related Answers

upload image to server react next

Grepper

Documentation

Social

Legal

Contact

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