{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет друг! В этой статье попробуем реализовать компонент - индикатор загрузки для отправленного документа с клиента.","type":"unstyled","key":"92sk7"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":3,"offset":24}],"inlineStyleRanges":[],"text":"Чего мы хотим добиться? тут \uD83E\uDD78.","type":"unstyled","key":"9ngg8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"И так - поехали !\uD83D\uDEFC","type":"unstyled","key":"9jgo6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Создаём компоненту FileUpload.tsx.","type":"header-three","key":"4lf3t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":41,"style":"ITALIC"},{"length":16,"offset":91,"style":"ITALIC"}],"text":"Накидаем сходу немного стилей. И спрячем input type=\"file\", отрисовав вместо него кнопку - 'Выбрать файл'. Подготовим состояние для сохранения файла.","type":"unstyled","key":"7g39p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":58,"style":"ITALIC"}],"text":"import {ChangeEvent, FC, useRef, useState} from 'react';\n\nexport const FileUpload = () => {\n const [selectedFile, setSelectedFile] = useState(null);\n const inputRef = useRef(null);\n\n const handleFileChange = (event: ChangeEvent) => {\n if (event.target.files && event.target.files.length > 0) {\n setSelectedFile(event.target.files[0]);\n }\n };\n\n const handleUpload = async () => {\n if (!selectedFile) {\n alert('Please select a file to upload!');\n return;\n }\n };\n\n const handleButtonClick = () => {","type":"blockquote","key":"3jfdo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"ITALIC"}],"text":"// Триггерим клик по скрытому input","type":"blockquote","key":"ljrm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"inputRef.current?.click(); \n };\n\n return (\n

\n \n \n Выбрать файл\n \n {selectedFile &&

Выбран файл: {selectedFile.name}

}\n \n Загрузить\n \n

\n );\n};","type":"blockquote","key":"fta0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Дополняем состояния \"полосы загрузки\", флажок загружен или нет. А так же пишем фейковый запрос.\n","type":"header-three","key":"96mga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Доп состояния:","type":"unordered-list-item","key":"79a4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const [uploadProgress, setUploadProgress] = useState(null);\nconst [isUploading, setIsUploading] = useState(false);","type":"blockquote","key":"5aqin"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7shcj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пишем фейковый запрос:","type":"unordered-list-item","key":"6l3eb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":367,"style":"ITALIC"},{"length":4,"offset":568,"style":"ITALIC"}],"text":"const fakeUploadRequest = async (file: File) => {\n const fileSizeInMB = file.size / (1024 * 1024); // Размер файла в мегабайтах\n const uploadSpeed = 1; // Условная скорость \"загрузки\" (МБ/с)\n const totalUploadTime = fileSizeInMB / uploadSpeed; // Общее время загрузки в секундах\n\n const interval = 100; // Интервал обновления прогресса (мс)\n const totalSteps = Math.ceil((totalUploadTime * 1000) / interval);\n let currentStep = 0;\n\n return new Promise((resolve) => {\n const intervalId = setInterval(() => {\n currentStep++;\n const progress = Math.min((currentStep / totalSteps) * 100, 100);\n setUploadProgress(progress);\n\n if (progress === 100) {\n clearInterval(intervalId);\n resolve();\n }\n }, interval);\n });\n};","type":"blockquote","key":"ash1f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bmvgl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":32,"style":"ITALIC"},{"length":13,"offset":51,"style":"ITALIC"}],"text":"Дописываем существующие функции handleFileChange и handleUpload:","type":"unordered-list-item","key":"7aq1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const handleFileChange = (event: ChangeEvent) => {\n if (event.target.files && event.target.files.length > 0) {\n setSelectedFile(event.target.files[0]);\n setUploadProgress(null); // Сбрасываем прогресс при выборе нового файла\n }\n};","type":"blockquote","key":"dmnon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":262,"style":"ITALIC"}],"text":"const handleUpload = async () => {\n if (!selectedFile) {\n alert('Please select a file to upload!');\n return;\n }\n\n setIsUploading(true);\n try {\n await fakeUploadRequest(selectedFile);\n alert('File uploaded successfully!');\n } catch (error) {\n console.error('Error during upload simulation:', error);\n alert('Failed to upload file!');\n } finally {\n setIsUploading(false);\n setSelectedFile(null);\n }\n};","type":"blockquote","key":"5frd8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Как может выглядеть реальный запрос:","type":"header-three","key":"1pvlb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":99,"style":"ITALIC"}],"text":"Можем использовать отца всех современных инструментов для взаимодействия с серверной частью апки - XMLHttpRequest():","type":"unstyled","key":"8iq1h"},{"data":{"image":{"id":"6793a58674ebf44919643e62"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"eoui4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const uploadFileToServer = async (\n file: File,\n onProgress: (progress: number) => void,\n ) => {\n return new Promise((resolve, reject) => {\n const formData = new FormData();\n formData.append('file', file);\n\n const xhr = new XMLHttpRequest();\n\n xhr.open('POST', 'https://your-server-url.com/upload', true);\n\n // Отслеживание прогресса загрузки\n xhr.upload.onprogress = (event) => {\n if (event.lengthComputable) {\n const progress = Math.round((event.loaded / event.total) * 100);\n onProgress(progress); // Обновляем прогресс через callback\n }\n };\n\n xhr.onload = () => {\n if (xhr.status >= 200 && xhr.status < 300) {\n resolve();\n } else {\n reject(new Error(`Upload failed: ${xhr.statusText}`));\n }\n };\n\n xhr.onerror = () => reject(new Error('Network error'));\n xhr.send(formData);\n });\n };\n const handleUploadRequest = async (file: File) => {\n await uploadFileToServer(file, setUploadProgress);\n };","type":"blockquote","key":"91ldn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну или axios:","type":"unstyled","key":"c9u1o"},{"data":{"image":{"id":"6793a634e4e01640895b0a58"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2neab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":420,"style":"ITALIC"}],"text":"import axios from 'axios';\n\nconst uploadFileWithAxios = async (\n file: File,\n onProgress: (progress: number) => void\n) => {\n const formData = new FormData();\n formData.append('file', file);\n\n await axios.post('https://your-server-url.com/upload', formData, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n onUploadProgress: (event) => {\n if (event.total) {\n const progress = Math.round((event.loaded / event.total) * 100);\n onProgress(progress); // Обновляем прогресс\n }\n },\n });\n};","type":"blockquote","key":"5e90b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":65,"style":"ITALIC"},{"length":1,"offset":83,"style":"ITALIC"},{"length":6,"offset":183,"style":"ITALIC"},{"length":19,"offset":206,"style":"ITALIC"}],"text":"Ну или еще чего нибудь\uD83D\uDE0E Если совсем отчаянный можно использовать fetch. Но fetch не предоставляет прямой возможности отслеживания прогресса загрузки файла. Однако можно комбинировать fetch с низкоуровневым API ReadableStream для реализации аналогичного функционала. Ну и в таком случаем каждый чанк будет отправлять запрос, да и сервер придётся подготовить для подобных танцев с бубнами \uD83D\uDE42 Короч - разберёшься.","type":"unstyled","key":"fmqi7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Дописываем оставшуюся разметку для полосочки загрузки и для цифровой индикации той самой загрузки:","type":"header-three","key":"dgj3h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4ed0b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{uploadProgress !== null && (\n

\n \n \n

{uploadProgress.toFixed(2)}%

\n \n)}","type":"blockquote","key":"a14sg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Собираем всё вместе. Итоговый код:","type":"header-three","key":"8dtfh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":862,"style":"ITALIC"},{"length":4,"offset":1073,"style":"ITALIC"},{"length":7,"offset":1578,"style":"ITALIC"}],"text":"import {ChangeEvent, useRef, useState} from 'react';\n\ntype Nullable = null | T;\n\nexport const FileUpload = () => {\n const [selectedFile, setSelectedFile] = useState>(null);\n const [uploadProgress, setUploadProgress] = useState>(null);\n const [isUploading, setIsUploading] = useState(false);\n\n const inputRef = useRef>(null);\n\n const handleFileChange = (event: ChangeEvent) => {\n if (event.target.files && event.target.files.length > 0) {\n setSelectedFile(event.target.files[0]);\n setUploadProgress(null);\n }\n };\n\n const fakeUploadRequest = async (file: File) => {\n const fileSizeInMB = file.size / (1024 * 1024);\n const uploadSpeed = 1;\n const totalUploadTime = fileSizeInMB / uploadSpeed;\n\n const interval = 100;\n const totalSteps = Math.ceil((totalUploadTime * 1000) / interval);\n let currentStep = 0;\n\n return new Promise((resolve) => {\n const intervalId = setInterval(() => {\n currentStep++;\n const progress = Math.min((currentStep / totalSteps) * 100, 100);\n setUploadProgress(progress);\n\n if (progress === 100) {\n clearInterval(intervalId);\n resolve();\n }\n }, interval);\n });\n };\n\n const handleUpload = async () => {\n if (!selectedFile) {\n alert('Please select a file to upload!');\n return;\n }\n\n setIsUploading(true);\n try {\n await fakeUploadRequest(selectedFile);\n alert('File uploaded successfully!');\n } catch (error) {\n console.error('Error during upload simulation:', error);\n alert('Failed to upload file!');\n } finally {\n setIsUploading(false);\n setSelectedFile(null);\n }\n };\n\n const handleButtonClick = () => {\n inputRef.current?.click();\n };\n\n return (\n

\n \n (e.currentTarget.style.backgroundColor = '#45a049')}\n onMouseOut={(e) => (e.currentTarget.style.backgroundColor = '#4CAF50')}\n >\n Выбрать файл\n \n {selectedFile &&

Выбран файл: {selectedFile.name}

}\n \n {isUploading ? 'Загрузка...' : 'Загружен'}\n \n

\n\n {uploadProgress !== null && (\n

\n \n \n

{uploadProgress.toFixed(2)}%

\n )}\n \n );\n};","type":"blockquote","key":"1q3s6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":181,"style":"ITALIC"}],"text":"Понятное дело, логику лучше вынести из компоненты, ну и в принципе для вариативности (использовании в нескольких местах - ну мало ли ≽^•༚• ྀི≼ ) пропсами закидывать асинк функшн, и uploadProgress со всеми вытекающими! Да и вообще мы молодцы \uD83E\uDDF8!","type":"unstyled","key":"ba6hb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Спасибо за внимание! До Новых Встреч!\uD83E\uDD17\uD83E\uDD17\uD83E\uDD17","type":"unstyled","key":"6jr90"},{"data":{"image":{"id":"6793ad546a26875c0ec9fe50"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"d1nph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"HnmbLsqzeZfTWfasCSLu"}],"entityMap":{"0":{"data":{"badSeoLink":"true","url":"https://dzen.ru/video/watch/6793a95af3365e34eadb726b"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}