import { Link } from 'react-router-dom'; import { useEffect, useState } from 'react'; import CodeHighlight from '../../components/Highlight'; import ImageUploading, { ImageListType } from 'react-images-uploading'; import { setPageTitle } from '../../store/themeConfigSlice'; import { useDispatch } from 'react-redux'; const FileUploadPreview = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle('File Upload Preview')); }); const [codeArr, setCodeArr] = useState([]); const toggleCode = (name: string) => { if (codeArr.includes(name)) { setCodeArr((value) => value.filter((d) => d !== name)); } else { setCodeArr([...codeArr, name]); } }; const [images, setImages] = useState([]); const [images2, setImages2] = useState([]); const maxNumber = 69; const onChange = (imageList: ImageListType, addUpdateIndex: number[] | undefined) => { setImages(imageList as never[]); }; const onChange2 = (imageList: ImageListType, addUpdateIndex: number[] | undefined) => { setImages2(imageList as never[]); }; return (
  • Forms
  • File Upload
{/* Single File */}
Single File Upload
{({ imageList, onImageUpload, onImageRemoveAll, onImageUpdate, onImageRemove, isDragging, dragProps }) => (
  {imageList.map((image, index) => (
img
))}
)} {images.length === 0 ? : ''}
{codeArr.includes('code1') && ( 
{`import { useEffect, useState } from 'react';
import 'file-upload-with-preview/dist/file-upload-with-preview.min.css';
import ImageUploading, { ImageListType } from 'react-images-uploading';

const [images, setImages] = useState([]);
const maxNumber = 69;

const onChange = (imageList: ImageListType, addUpdateIndex: number[] | undefined) => {
    setImages(imageList as never[]);
};



    

        
        
    

    
    
    
    
        {({ imageList, onImageUpload, onImageRemoveAll, onImageUpdate, onImageRemove, isDragging, dragProps }) => (
            

                
                 
                {imageList.map((image, index) => (
                    

                        img
                    

                ))}
            

        )}
    
    {images.length === 0 ?  : ''}

`}
 )}
{/* Multiple File */}
Multiple File
{({ imageList, onImageUpload, onImageRemoveAll, onImageUpdate, onImageRemove, isDragging, dragProps }) => (
 
{imageList.map((image, index) => (
img
))}
)} {images2.length === 0 ? : ''}
{codeArr.includes('code2') && ( 
{`import { useEffect, useState } from 'react';
import 'file-upload-with-preview/dist/file-upload-with-preview.min.css';
import ImageUploading, { ImageListType } from 'react-images-uploading';

const [images2, setImages2] = useState([]);
const maxNumber = 69;

const onChange2 = (imageList: ImageListType, addUpdateIndex: number[] | undefined) => {
    setImages2(imageList as never[]);
};



    

        
        
    

    
    
    
    
        {({ imageList, onImageUpload, onImageRemoveAll, onImageUpdate, onImageRemove, isDragging, dragProps }) => (
            

                
                 
                

                    {imageList.map((image, index) => (
                        

                            
                            img
                        

                    ))}
                

            

        )}
    
    {images2.length === 0 ?  : ''}

`}
 )}
); }; export default FileUploadPreview;