flowbite
flowbite copied to clipboard
themesberg
File Input - dropzone not working
Describe the bug I cannot properly use the dropzone functionality on this page:
https://flowbite.com/docs/forms/file-input/#dropzone
I can select a file by clicking on the dropzone, but I cannot select a file by 'dropping' a file into the dropzone. This also doesn't work when I try it locally on my dev environment.
To Reproduce Steps to reproduce the behavior:
- Go to https://flowbite.com/docs/forms/file-input/#dropzone
- Try to drag a file into the dropzone
- Nothing happens (or the image gets opened in a new window)
Expected behavior It should be possible to drop a file in the dropzone.
Desktop (please complete the following information):
- OS: Mac 12.6
- Browser: both Chrome (109.0.5414.119) and Safari (15.6.1)
The Code is functional, if you tweak the class on Line 9 as shown below the uploaded file can been seen.
class="hidden >> class="unhidden"
It's still not working, if I show the normal file input field like you suggest I can drop the file in there. But the whole idea is that the button is hidden and that I can drop the file anywhere in the 'dropzone'.
You'll most likely need to modify it to fit your needs, What framework are you using?
I'm using Laravel, but it seems like the whole Laravel installation guide isn't working properly. I just tried to install it into a new Laravel project using this guide: https://flowbite.com/docs/getting-started/laravel/
Nothing seems to work...
@Loots-it you can get it to work by
- add relative class to the label and input wrapper
- removing hidden class from input
- add the following tailwind classes instead to the input- absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer
I'm sorry for the late reply. Thanks for your help, that seems to do the trick! I assume the example should be updated, but it seems like there are already many open merge requests...
Is there a way to show ProgressBar with it as well ? Can't seem to find that in docs ?
