Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15269 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
15267 stevensc 1 
/* eslint-disable no-mixed-spaces-and-tabs */
2 
import React, { useState, useCallback, useEffect } from 'react'
3 
import { useDropzone } from 'react-dropzone'
4 
import { baseStyle, imgStyle, thumbsContainerStyle } from '../../assets/styles/js-styles/Dropzone'
5 
import FilePreview from './FilePreview'
7386 stevensc 6 
 
15267 stevensc 7 
const DropzoneComponent = ({
8 
	modalType,
9 
	onUploaded,
10 
	settedFile,
11 
	recomendationText
7386 stevensc 12 
}) => {
13 
 
15267 stevensc 14 
	const [errors, setErrors] = useState([])
15 
	const [files, setFiles] = useState([])
7386 stevensc 16 
 
15267 stevensc 17 
	const onDropRejected = useCallback((rejectedFiles) => {
18 
		rejectedFiles.map((fileRejection) => {
19 
			switch (fileRejection.errors[0].code) {
20 
			case 'too-many-files':
21 
				setErrors([...errors, 'solo puedes agregar 1 archivo'])
22 
				break
23 
			case 'file-invalid-type':
24 
				setErrors([...errors, 'por favor seleccione un archivo valido'])
25 
				break
26 
			default:
27 
				setErrors(errors)
28 
				break
29 
			}
30 
		})
31 
	}, [])
7386 stevensc 32 
 
15267 stevensc 33 
	useEffect(() => {
34 
		if (settedFile) setFiles([settedFile])
35 
	}, [settedFile])
7386 stevensc 36 
 
15267 stevensc 37 
	const acceptedMimeTypes = {
38 
		IMAGE: 'image/jpeg, image/png, image/jpg',
39 
		FILE: 'application/pdf',
40 
		VIDEO: 'video/mp4, video/mpeg, video/webm',
41 
		CHAT: 'video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg'
42 
	}
7386 stevensc 43 
 
15267 stevensc 44 
	const { getRootProps, getInputProps } = useDropzone({
45 
		accept: acceptedMimeTypes[modalType],
46 
		multiple: false,
47 
		onDrop: (accepted) => {
48 
			onUploaded(accepted[0])
49 
			setFiles(accepted[0])
50 
		},
51 
		onDropRejected,
52 
		onDropAccepted: () => {
53 
			setErrors([])
54 
		},
55 
		maxFiles: 1,
56 
	})
7386 stevensc 57 
 
7419 stevensc 58 
 
15267 stevensc 59 
	const onDeleteFileHandler = (id) => {
60 
		onUploaded('')
61 
		setFiles(files.filter(file => file !== id))
62 
	}
7386 stevensc 63 
 
15267 stevensc 64 
	const filePreviewOptions = (modalType, file) => {
65 
		const options = {
15270 stevensc 66 
			IMAGE: <img src={URL.createObjectURL(file)} style={imgStyle} />,
15267 stevensc 67 
			FILE: <object data={URL.createObjectURL(file)} type="application/pdf" width="400" height="200" />,
68 
			VIDEO: <video src={URL.createObjectURL(file)} width="400" height="300" controls autoPlay muted />
69 
		}
7386 stevensc 70 
 
15267 stevensc 71 
		return options[modalType]
72 
	}
7386 stevensc 73 
 
15267 stevensc 74 
	return (
75 
		<div>
76 
			{!files.length &&
15269 stevensc 77 
				<div {...getRootProps({ className: 'dropzone', style: baseStyle })}>
78 
					<input {...getInputProps()} />
79 
					<p>Arrastra el archivo aqui, o haga click para seleccionar</p>
80 
					{recomendationText}
81 
				</div>
15267 stevensc 82 
			}
83 
			<aside>
84 
				<div style={thumbsContainerStyle}>
85 
					{files.map((file, index) =>
86 
						<FilePreview
87 
							onDeleteFileHandler={() => onDeleteFileHandler(file)}
88 
							key={index}
89 
						>
90 
							{filePreviewOptions(modalType, file)}
91 
						</FilePreview>
92 
					)}
93 
				</div>
94 
			</aside>
95 
		</div>
96 
	)
97 
}
7386 stevensc 98 
 
15267 stevensc 99 
export default React.memo(DropzoneComponent)