Skip to content

feat: Label added for FileInput dropzone #304

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Mar 11, 2025
+23 −17
Merged

feat: Label added for FileInput dropzone #304

Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0ee8e66
feat: Label added for FileInput dropzone
ogzcode Jul 24, 2024
78ac82d
chore: Refactor FwbFileInput component lint
ogzcode Aug 2, 2024
08ca958
chore: Refactor FwbFileInput component lint
ogzcode Aug 2, 2024
971a2fa
fix: typo in fileInput documentation
Sqrcz Mar 10, 2025
ef7c501
fix: formatting of FileInput component
Sqrcz Mar 10, 2025
a72e3cc
Merge branch 'main' into fileinput-dropzone-label
Sqrcz Mar 11, 2025
3c8fd8b
Merge pull request #1 from themesberg/fileinput-dropzone-label
ogzcode Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 8 additions & 36 deletions src/components/FwbFileInput/FwbFileInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,15 @@
<div v-if="!dropzone">
<label>
<span :class="labelClasses">{{ label }}</span>
<input
:class="fileInpClasses"
:multiple="multiple"
type="file"
:accept="accept"
@change="handleChange"
>
<input :class="fileInpClasses" :multiple="multiple" type="file" :accept="accept" @change="handleChange" />
</label>
<slot />
</div>
<div
v-else
class="flex items-center justify-center"
@change="handleChange"
@dragover="dragOverHandler"
@drop="dropFileHandler"
>
<div v-else class="flex flex-col items-start justify-center" @change="handleChange" @dragover="dragOverHandler" @drop="dropFileHandler">
<span v-if="label !== ''" :class="labelClasses">{{ label }}</span>
<label :class="dropzoneLabelClasses">
<div :class="dropzoneWrapClasses">
<svg
aria-hidden="true"
class="w-8 h-8 text-gray-500 dark:text-gray-400"
fill="none"
viewBox="0 0 20 16"
xmlns="http://www.w3.org/2000/svg"
>
<svg aria-hidden="true" class="w-8 h-8 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
stroke-linecap="round"
Expand All @@ -46,12 +29,7 @@
</div>
<p v-else>File: {{ dropZoneText }}</p>
</div>
<input
:multiple="multiple"
type="file"
:accept="accept"
class="hidden"
>
<input :multiple="multiple" type="file" :accept="accept" class="hidden" />
</label>
</div>
</div>
Expand All @@ -67,8 +45,8 @@ interface FileInputProps {
label?: string
modelValue?: File | File[] | null
multiple?: boolean
size?: string,
accept?:string,
size?: string
accept?: string
}

const props = withDefaults(defineProps<FileInputProps>(), {
Expand Down Expand Up @@ -138,11 +116,5 @@ const dragOverHandler = (event: Event) => {
event.preventDefault()
}

const {
fileInpClasses,
labelClasses,
dropzoneLabelClasses,
dropzoneWrapClasses,
dropzoneTextClasses,
} = useFileInputClasses(props.size)
const { fileInpClasses, labelClasses, dropzoneLabelClasses, dropzoneWrapClasses, dropzoneTextClasses } = useFileInputClasses(props.size)
</script>