feat: Pass error label to component

[siyavash4812]

Summary

At the moment a hard coded value is being used if there is a type or size error. This PR will add a prop to the library which will allow users to pass in a custom message.

Key Changes

• src/FileUploader.tsx => drawDescription
• README

Check List

• [x] The changes to the "Readme" file(if needed)
• [x] The changes not breaking any old rule of the library or usage

[thanosd]

@siyavash4812 Are you able to fix the lint issue here so maybe we can get this merged? Was hitting the same issue, and since you have done all the good work to fix this, did not want to create a duplicate. Thanks!

[wccbuck]

While we wait for the ability to add a custom error message to override the not-so-great default one, I thought I'd share the clumsy way I'm editing this component by brute force in my application. I'm also including my fix for the incorrect tooltip (it says the file must be greater than or equal to the upper limit, but it should say less than or equal to).

const fileUploaderRef = useRef<HTMLDivElement | null>(null);
const fixText = () => {
    const spans = fileUploaderRef.current?.querySelectorAll('span');
    spans?.forEach(span => {
        if (span.textContent === "File type/size error, Hovered on types!") {
            span.textContent = "File type/size error.";
        }
        if (span.title.includes(", types:") && !span.title.includes(" MB, types:")) {
            span.title = span.title.replace(", types:", " MB, types:");
            span.title = span.title.replace(">=", "<=");
        }
    })
}
useEffect(() => {
    fixText();
    const observer = new MutationObserver(fixText);
    if (fileUploaderRef.current) {
        observer.observe(fileUploaderRef.current, {
            childList: true,
            subtree: true
        });
    }
    return () => observer.disconnect();
}, [fileUploaderRef, fixText]);

return (
    <div ref={fileUploaderRef}>
        <FileUploader
            handleChange={handleUpload}
            maxSize={2}
        />
    </div>
)