Nextjs Core Upload

We’ve created two special components to make it easier for you to create a picture/image upload on your form.

We’ve created this component especially for Timeline Page.

Style

You will find the styles for this component in assets/scss/nextjs-material-dashboard-pro/_fileupload.scss.

ImageUpload

This component was made to look like jasny’s image uploads with a preview image after the user selects an image, a button for changing the image and one for removing it.

If you want to submit the image (to save it on your server after it has been uploaded) you have to change the handleSubmit function in components/CustomUpload/ImageUpload.js at line 35.

Example

Select image Change Remove

Add Photo Change
Remove

import React from 'react';
// core components
import ImageUpload from 'components/CustomUpload/ImageUpload.js';

export default function Upload(){
//  const { } = props;
  return (
    <div>
      <ImageUpload />
      <ImageUpload avatar/>
    </div>
  );
}

Props

ImageUpload.propTypes = {
  avatar: PropTypes.bool,
  addButtonProps: PropTypes.object,
  changeButtonProps: PropTypes.object,
  removeButtonProps: PropTypes.object,
};

PictureUpload

This component looks like the ImageUpload component but without the upload, remove and change buttons. The upload is made by clicking on the image itself.

If you want to submit the picture (to save it on your server after it has been uploaded) ,like with the ImageUpload component, you have to change the handleSubmit function in components/CustomUpload/PictureUpload.js at line 27.

Example

Choose Picture

import React from 'react';
// core components
import PictureUpload from 'components/CustomUpload/PictureUpload.js';

export default function Upload(){
  return (
    <PictureUpload />
  );
}