File Picker: Ready for Production use?

[bsandeepan]

I am using the paste library for a twilio internal migration project. I am interested in this component for production usage. I want to know:

1. Can we apply file format and size restrictions?
2. Does it work well with React Hook Form library?
3. Can I start using it for production release 18th Oct onwards?

The alternative is I have to reinvent the wheel, consuming more time and effort. I need to finish this within October, so please help me get better insight on the usability of this component.

[nkrantz]

Hi @bsandeepan

1. You can apply client-side file format restrictions using the accept prop (read more about it here), but it's still recommended that you use server-side validation as well, because it's possible to circumvent the accept prop. There's no prop for size restrictions, but you can implement your own validation using the size info that you get back from the HTML element's .file property (read more about what info you can read on uploaded files here). Feel free to take a look at this CodeSandbox that demonstrates an option for how to grab that file size.
2. Yes (our File Picker is the native HTML input type="file" with some additions for styling and accessibility)
3. Yes (it's production status in our system so you're good to go!)

[bsandeepan]

Thanks @nkrantz . I tried out the example in react environment for the last few days, and it is working well with a few points:

1. The Picket input does not have a name attribute. This would really help to integrate this with react hook form. Right now we are writing some unicorn magic typescript to resolve this. ref={inputConstraints as unknown as Ref<HTMLButtonElement>}
2. the "change" event can cause bugs when uploading a file. Listening to the "input" event is a better option. Here's the CodeSandbox example.

[TheSisb]

Hi @bsandeepan,

1. Good point about the name attribute. I'll try to add that in by mid next week.
2. The codesandbox you shared may also contain bugs in a real environment because of how you're binding the input event. document.addEventListener is the native JS approach, which means you have to carefully handle removing the event listener too. As it is now, every re-render of App will add a new binding. Not sure if that was left as is intentionally since it's an example, but I just wanted to call it out. Our FilePicker component should be used with an onChange prop but it's currently broken. We will add it in shortly.

[nkrantz]

Hi @bsandeepan - here's the PR, feel free to follow along

[nkrantz]

PR is merged in - let us know if you're still having issues but marking this thread as resolved for now.

[bsandeepan]

I reviewed the PR now. Thanks @nkrantz for your help. When will we release this patch? I will update the version in console repo.

[SiTaggart]

This was released in V16 of Paste, which I believe is already in a Pull Request to Console https://paste.twilio.design/core/changelog#16-0-0