HAI-2065 Implement file upload component

[markohaarni]

Description

File upload component uses HDS FileInput internally to handle user adding files from their machine and immediately sends added files to backend and shows a loading spinner and loading text while upload is in process.

Listing of files and deleting them as well as displaying error messages are done in separate tasks.

Jira Issue: https://helsinkisolutionoffice.atlassian.net/browse/HAI-2065

Type of change

• Bug fix
• New feature
• Other

Instructions for testing

Only way to manually test this is to replace FileInput component locally in src/domain/johtoselvitys/Attachments.tsx with this new component, for example:

function handleFileUpload(uploading: boolean) {
  if (!uploading) {
    queryClient.invalidateQueries('attachments');
  }
}

<FileUpload
  id="cable-report-file-upload"
  accept=".pdf,.jpg,.jpeg,.png,.dgn,.dwg,.docx,.txt,.gt"
  maxSize={104857600}
  dragAndDrop
  multiple
  existingAttachments={existingAttachments}
  uploadFunction={(file) =>
    uploadAttachment({
      applicationId: getValues('id')!,
      attachmentType: 'MUU',
      file,
    })
  }
  onUpload={handleFileUpload}
/>

Checklist:

• I have written new tests (if applicable)
• I have ran the tests myself (if applicable)
• I have made necessary changes to the documentation, link to confluence
  or other location:

Other relevant info

Please describe here if there is e.g. some requirements for this change or
other info that the tester/user needs to know.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

87.5% Coverage
0.0% Duplication