Skip to content

update: extend file input component #610

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
jonasbrunvoll merged 1 commit into from
Aug 5, 2025
Merged

update: extend file input component #610

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
25 changes: 18 additions & 7 deletions src/page-modules/contact/components/form/file-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
import { ChangeEvent, DragEvent, useId, useState } from 'react';
import { ChangeEvent, DragEvent, useState } from 'react';
import style from './form.module.css';
import { Typo } from '@atb/components/typography';
import { Button } from '@atb/components/button';
import { MonoIcon } from '@atb/components/icon';
import { PageText, TranslatedString, useTranslation } from '@atb/translations';
import { PageText, useTranslation } from '@atb/translations';
import { useTheme } from '@atb/modules/theme';
import { ErrorMessage } from '@atb/components/error-message';
import FormComponentLabel from './form-component-label';

export type FileInputProps = {
id: string;
label: string;
errorMessage?: TranslatedString;
iconLabel: string;
label?: string;
isRequired?: boolean;
errorMessage?: string;
onChange?: (files: File[]) => void;
} & Omit<JSX.IntrinsicElements['input'], 'onChange'>;

Expand All @@ -19,7 +22,9 @@ const MAX_ALLOWED_FILE_SIZE = 10 * 1024 * 1024; // 10MB
export default function FileInput({
id,
onChange,
iconLabel,
label,
isRequired = false,
name,
errorMessage,
}: FileInputProps) {
Expand Down Expand Up @@ -93,7 +98,13 @@ export default function FileInput({
multiple
accept="image/*,.pdf,.doc,docx,.txt"
/>

{label && (
<FormComponentLabel
label={label}
htmlFor={label}
isRequired={isRequired}
/>
)}
<label
htmlFor={`file_input__${id}`}
className={style.label__file}
Expand All @@ -106,7 +117,7 @@ export default function FileInput({
}}
>
<FileIcon color={background.neutral[0].foreground.primary} />
<Typo.span textType="body__primary">{label}</Typo.span>
<Typo.span textType="body__primary">{iconLabel}</Typo.span>
</label>

{files.length > 0 && (
Expand All @@ -125,7 +136,7 @@ export default function FileInput({
))}
</div>
)}
{errorMessage && <ErrorMessage message={t(errorMessage)} />}
{errorMessage && <ErrorMessage message={errorMessage} />}
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/means-of-transport/forms/delayForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ export const DelayForm = ({ state, send }: DelayFormProps) => {
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.feedback.attachment),
iconLabel: t(PageText.Contact.input.feedback.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/means-of-transport/forms/driverForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ export const DriverForm = ({ state, send }: DriverFormProps) => {
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.feedback.attachment),
iconLabel: t(PageText.Contact.input.feedback.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/means-of-transport/forms/injuryForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export const InjuryForm = ({ state, send }: InjuryFormProps) => {
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.feedback.attachment),
iconLabel: t(PageText.Contact.input.feedback.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/means-of-transport/forms/serviceOfferingForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export const ServiceOfferingForm = ({
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.feedback.attachment),
iconLabel: t(PageText.Contact.input.feedback.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/means-of-transport/forms/stopForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ export const StopForm = ({ state, send }: StopFormProps) => {
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.feedback.attachment),
iconLabel: t(PageText.Contact.input.feedback.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/means-of-transport/forms/transportationForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export const TransportationForm = ({
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.feedback.attachment),
iconLabel: t(PageText.Contact.input.feedback.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/refund/forms/refund-and-travel-guarantee/refundCarForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ export const RefundCarForm = ({ state, send }: RefundCarFormProps) => {
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.feedback.attachment),
iconLabel: t(PageText.Contact.input.feedback.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
6 changes: 3 additions & 3 deletions src/page-modules/contact/refund/forms/refund-and-travel-guarantee/refundTaxiForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const RefundTaxiForm = ({ state, send }: RefundTaxiFormProps) => {

<FileInput
id="attachments"
label={t(PageText.Contact.input.feedback.attachment)}
iconLabel={t(PageText.Contact.input.feedback.attachment)}
name="attachments"
onChange={(files) => {
send({
Expand All @@ -46,7 +46,7 @@ export const RefundTaxiForm = ({ state, send }: RefundTaxiFormProps) => {
value: files,
});
}}
errorMessage={state.context?.errorMessages['attachments']?.[0]}
errorMessage={t(state.context?.errorMessages['attachments']?.[0])}
/>
<Input
id="amount"
Expand Down Expand Up @@ -241,7 +241,7 @@ export const RefundTaxiForm = ({ state, send }: RefundTaxiFormProps) => {
}
fileInputProps={{
id: 'attachments',
label: t(PageText.Contact.input.feedback.attachment),
iconLabel: t(PageText.Contact.input.feedback.attachment),
name: 'attachments',
onChange: (files) => {
send({
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/refund/forms/refund-ticket/appTicketRefund.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export const AppTicketRefund = ({ state, send }: AppTicketRefundProps) => {
}
fileInputProps={{
id: 'attachments',
label: t(PageText.Contact.input.feedback.attachment),
iconLabel: t(PageText.Contact.input.feedback.attachment),
name: 'attachments',
onChange: (files) => {
send({
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/refund/forms/refund-ticket/otherTicketRefund.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ const RefundSection = ({ state, send }: RefundSectionProps) => {
<FileInput
id="attachments"
name="attachments"
label={t(PageText.Contact.input.question.attachment)}
iconLabel={t(PageText.Contact.input.question.attachment)}
onChange={(files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/ticket-control/forms/feeComplaintForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ const FormContent = ({ state, send }: FormProps) => {
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.feedback.attachment),
iconLabel: t(PageText.Contact.input.feedback.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/ticket-control/forms/feedbackForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ export const FeedbackForm = ({ state, send }: FeedbackFormProps) => {
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.feedback.attachment),
iconLabel: t(PageText.Contact.input.feedback.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/ticketing/forms/app/appAccountForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const AppAccountForm = ({ state, send }: AppAccountFormProps) => {
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.question.attachment),
iconLabel: t(PageText.Contact.input.question.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/ticketing/forms/app/appTicketingForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export const AppTicketingForm = ({ state, send }: AppTicketingFormProps) => {
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.question.attachment),
iconLabel: t(PageText.Contact.input.question.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/ticketing/forms/app/appTravelSuggestionForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const AppTravelSuggestionForm = ({
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.question.attachment),
iconLabel: t(PageText.Contact.input.question.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/ticketing/forms/priceAndTicketTypesForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const PriceAndTicketTypesForm = ({
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.question.attachment),
iconLabel: t(PageText.Contact.input.question.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/ticketing/forms/travel-card/travelCardQuestionForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export const TravelCardQuestionForm = ({
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.question.attachment),
iconLabel: t(PageText.Contact.input.question.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/ticketing/forms/webshop/webshopAccountForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const WebshopAccountForm = ({
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.question.attachment),
iconLabel: t(PageText.Contact.input.question.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down
2 changes: 1 addition & 1 deletion src/page-modules/contact/ticketing/forms/webshop/webshopTicketingForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const WebshopTicketingForm = ({
fileInputProps={{
id: 'attachments',
name: 'attachments',
label: t(PageText.Contact.input.question.attachment),
iconLabel: t(PageText.Contact.input.question.attachment),
onChange: (files) => {
send({
type: 'ON_INPUT_CHANGE',
Expand Down