The communications platform that puts data protection first.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
Rocket.Chat/client/hooks/useFileInput.js

53 lines
1.3 KiB

import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import { useRef, useEffect } from 'react';
export const useFileInput = (onSetFile, fileType = 'image/*', fileField = 'image') => {
const ref = useRef();
useEffect(() => {
const fileInput = document.createElement('input');
fileInput.setAttribute('type', 'file');
fileInput.setAttribute('style', 'display: none');
document.body.appendChild(fileInput);
ref.current = fileInput;
return () => {
ref.current = null;
fileInput.remove();
};
}, []);
useEffect(() => {
const fileInput = ref.current;
if (!fileInput) {
return;
}
fileInput.setAttribute('accept', fileType);
}, [fileType]);
useEffect(() => {
const fileInput = ref.current;
if (!fileInput) {
return;
}
const handleFiles = () => {
const formData = new FormData();
formData.append(fileField, fileInput.files[0]);
onSetFile(fileInput.files[0], formData);
};
fileInput.addEventListener('change', handleFiles, false);
return () => {
fileInput.removeEventListener('change', handleFiles, false);
};
}, [fileField, fileType, onSetFile]);
const onClick = useMutableCallback(() => ref.current.click());
const reset = useMutableCallback(() => {
ref.current.value = '';
});
return [onClick, reset];
};