Base64, input file, onError

1) ⚡Изменение аватарки

Пятница - 1. Разбор эндпоинтов. PUT-authme

Скрин из своего приложения

• смотрим network

• берем payload value и вставляем в браузер

• что такое формат base 64 и как с ним работать https://www.base64-image.de/

❗base 64 использовать с картинками маленького веса, иначе будут долго грузиться

• сервисы для работы с изображениями 🔗 https://www.iloveimg.com/ 🔗 https://tinypng.com/

2) ⚡Прежде чем говорить про base64 более подробно. Давайте поговорим про загрузку файлов. Про input type file

• запускаем отдельный проект

• accept (jpg, png, ...) https://stackoverflow.com/a/6225815

• multiple

• стилизация (display none для инпута, используем useRef)

Вариант с useRef

InputTypeFile.tsx

import React, { ChangeEvent, useRef } from 'react';

export const InputTypeFile = () => {

    const inputRef = useRef<HTMLInputElement>(null)

    const selectFileHandler = () => {
        inputRef && inputRef.current?.click();
    };

    const uploadHandler = (e: ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files.length) {
            const file = e.target.files[0]
            console.log('file: ', file)
        }
    };

    return (
        <div>
            <button onClick={selectFileHandler}>upload file</button>
            <input
                style={{display: 'none'}}
                ref={inputRef}
                type="file"
                onChange={uploadHandler}
            />
        </div>
    )
}

Mui. Вариант с кнопкой

🤔 Магия происходит из-за component="span"

InputTypeFile.tsx

import React, { ChangeEvent } from 'react';
import { Button } from '@mui/material';

export const InputTypeFile = () => {

    const uploadHandler = (e: ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files.length) {
            const file = e.target.files[0]
            console.log('file: ', file)
        }
    };

    return (
        <label>
            <input type="file"
                   onChange={uploadHandler}
                   style={{display: 'none'}}
            />
            <Button variant="contained" component="span">
                Upload button
            </Button>
        </label>
    )
}
    

Mui. Вариант с иконкой

InputTypeFile.tsx

import React, { ChangeEvent } from 'react';
import { IconButton } from '@mui/material';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';

export const InputTypeFile = () => {

    const uploadHandler = (e: ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files.length) {
            const file = e.target.files[0]
            console.log('file: ', file)
        }
    };

    return (
        <label>
            <input type="file"
                   onChange={uploadHandler}
                   style={{display: 'none'}}
            />
            <IconButton component="span">
                <CloudUploadIcon/>
            </IconButton>
        </label>
    )
    
    
    // Альтернативный вариант
    return (
        <IconButton component="label">
            <CloudUploadIcon/>
             <input type="file" 
                    onChange={uploadHandler}
                    style={{display: 'none'}}
            />
        </IconButton>
    )
    
}

3) ⚡Как перекодировать картинку в base64

https://stackoverflow.com/a/20285053 js
https://stackoverflow.com/a/47177899 react

InputTypeFile.tsx

import React, { ChangeEvent } from 'react';
import { IconButton } from '@mui/material';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';

export const InputTypeFile = () => {
    
    const uploadHandler = (e: ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files.length) {
            const file = e.target.files[0]
            console.log('file: ', file)

            if (file.size < 4000000) {
                // https://developer.mozilla.org/ru/docs/Web/API/FileReader/FileReader
                const reader = new FileReader();

                reader.onloadend = () => {
                    const file64 = reader.result as string
                    console.log('file64: ', file64)
                }
                // https://developer.mozilla.org/ru/docs/Web/API/FileReader/readAsDataURL
                reader.readAsDataURL(file)
            } else {
                console.error('Error: ', 'Файл слишком большого размера')
            }
        }
    }

    return (
        <label>
            <input type="file"
                   onChange={uploadHandler}
                   style={{display: 'none'}}
            />
            <IconButton component="span">
                <CloudUploadIcon/>
            </IconButton>
        </label>
    )
}

3.1) ⚡Пишем универсальную функцию для конвертации в base64

InputTypeFile.tsx

import React, { ChangeEvent } from 'react';
import { IconButton } from '@mui/material';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';

export const InputTypeFile = () => {

    const uploadHandler = (e: ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files.length) {
            const file = e.target.files[0]
            console.log('file: ', file)
            
            if (file.size < 4000000) {
                convertFileToBase64(file, (file64: string) => {
                    console.log('file64: ', file64)
                })
            } else {
                console.error('Error: ', 'Файл слишком большого размера')
            }
        }
    }

    const convertFileToBase64 = (file: File, callBack: (value: string) => void) => {
        const reader = new FileReader();
        reader.onloadend = () => {
            const file64 = reader.result as string
            callBack(file64)
        }
        reader.readAsDataURL(file)
    }

    return (
        <label>
            <input type="file"
                   onChange={uploadHandler}
                   style={{display: 'none'}}
            />
            <IconButton component="span">
                <CloudUploadIcon/>
            </IconButton>
        </label>
    )
}

4) ⚡onError https://thewebdev.info/2022/05/10/how-to-replace-img-src-onerror-with-react/

Изменяем аватар

• пробуем менять аватарку и видим, что меняется

InputTypeFile.tsx

import React, { ChangeEvent, useState } from 'react';
import { IconButton } from '@mui/material';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
import defaultAva from '../assets/defaultAva.png'

export const InputTypeFile = () => {

    const [ava, setAva] = useState(defaultAva)

    const uploadHandler = (e: ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files.length) {
            const file = e.target.files[0]
            if (file.size < 4000000) {
                convertFileToBase64(file, (file64: string) => {
                    setAva(file64)
                })
            } else {
                console.error('Error: ', 'Файл слишком большого размера')
            }
        }
    }


    const convertFileToBase64 = (
        file: File,
        callBack: (value: string) => void
    ) => {
        const reader = new FileReader();
        reader.onloadend = () => {
            const file64 = reader.result as string
            callBack(file64)
        }
        reader.readAsDataURL(file)
    }


    return (
        <div>
            <img
                src={ava || defaultAva}
                style={{width: '100px'}}
                alt="ava"
            />
            <label>
                <input type="file"
                       onChange={uploadHandler}
                       style={{display: 'none'}}
                />
                <IconButton component="span">
                    <CloudUploadIcon/>
                </IconButton>
            </label>
        </div>
    )
}

🤔 А теперь вместо нормальной картинки передадим строку 111 (В 15 строке пропишите setAva('111'))

Увидим битую картинку

• Теперь давайте обработаем данный кейс и не допустим такого варианта onError 💪

InputTypeFile.tsx

import React, { ChangeEvent, useState } from 'react';
import { IconButton } from '@mui/material';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
import defaultAva from '../assets/defaultAva.png'

export const InputTypeFile = () => {

    const [ava, setAva] = useState(defaultAva)
    const [isAvaBroken, setIsAvaBroken] = useState(false)

    const uploadHandler = (e: ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files.length) {
            const file = e.target.files[0]
            if (file.size < 4000000) {
                convertFileToBase64(file, (file64: string) => {
                    // setAva(file64)
                    setAva('111')
                })
            } else {
                console.error('Error: ', 'Файл слишком большого размера')
            }
        }
    }

    const convertFileToBase64 = (file: File, callBack: (value: string) => void) => {
        const reader = new FileReader();
        reader.onloadend = () => {
            const file64 = reader.result as string
            callBack(file64)
        }
        reader.readAsDataURL(file)
    }

    const errorHandler = () => {
        setIsAvaBroken(true)
        alert('Кривая картинка')
    }

    return (
        <div>
            <img
                src={isAvaBroken ? defaultAva : ava}
                style={{width: '100px'}}
                onError={errorHandler}
                alt="ava"
            />
            <label>
                <input type="file"
                       onChange={uploadHandler}
                       style={{display: 'none'}}
                />
                <IconButton component="span">
                    <CloudUploadIcon/>
                </IconButton>
            </label>
        </div>
    )
}
   

5) ⚡Добавить в таблице колод колонку для обложки cover

6) ⚡Добавление вопросов в виде карточек