Built Twitter Like App - 20

Add Image Upload Function

1. Install dropzone
2. Add component ImageUpload
3. Modify EditModal

Install Dropzone

npm install react-dropzone

Add component ImageUpload

Add file component/ImageUpload.tsx

import Image from 'next/image';
import { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';

interface ImageUploadProps {
  onChange: (base64: string) => void;
  label: string;
  value?: string;
  disabled?: boolean;
}

const ImageUpload: React.FC<ImageUploadProps> = ({
  onChange,
  label,
  value,
  disabled
}) => {
  const [base64, setBase64] = useState(value);
  const handleChange = useCallback( (base64: string) => {
    onChange(base64);
  }, [onChange]);

  const handleDrop = useCallback((files: any) => {
    const file = files[0];
    const reader = new FileReader();

    reader.onload = (event: any) => {
      setBase64(event.target.result);
      handleChange(event.target.result);
    }

    reader.readAsDataURL(file);
  }, [handleChange]);

  const { getRootProps, getInputProps } = useDropzone({
    maxFiles: 1,
    onDrop: handleDrop,
    disabled,
    accept: {
      'image/jpeg': [],
      'image/png': []
    }
  });

  return ( 
    <div
      { ...getRootProps({
        className: "w-full p-4 text-white text-center border-2 border-dotted rounded-md border-neutral-700"
      })}
    >
      <input {...getInputProps()} />
      {
        base64 ? (
          <div className='flex items-center justify-center'>
            <Image 
              src ={base64}
              height = '100'
              width = "100"
              alt = "Uploaded image"
            />
          </div>
        ) : (
          <p className='text-white'>{label}</p>
        )
      }
    </div>
  );
}

export default ImageUpload

ModifyEditModal

Modify file components/modals/EditModal.tsx

...
			<ImageUpload
        value={profileImage}
        disabled={isLoading}
        onChange={(image)=>setProfileImage(image)}
        label="Upload profile image" 
      />
      <ImageUpload
        value={coverImage}
        disabled={isLoading}
        onChange={(image)=>setCoverImage(image)}
        label="Upload cover image" 
      />
      <Input 
        placeholder="Name"
        onChange={(e)=> setName(e.target.value)}
        value={ name }
        disabled={isLoading}
      />
...
      

Demo

Click Edit Button:

Click Save Button: