Skip to content

Commit

Permalink
Add a file upload plugin
Browse files Browse the repository at this point in the history
Solving #8
Of the 3 proposed solutions in #8, the first is limited by size, and the  third one was complicated to implement inside a React app with shacl-form's shadow DOM.
So, the plugin option was the best answer to this issue.
The goal of this plugin is to pass a lambda as a parameter that handles  the file upload.
E.g., in a React app:
```ts
const [myFile, setMyFile] = useState<File>();
form.registerPlugin(new FileUploadPlugin({datatype: '...'}, (event) => setMyFile(event.target.files?.[0])));
```
Potential issue: if the form has multiple file upload inputs, and the user submits two different files with the same name (like `joe/profile.png` and `jane/profile.png`), the result will be, for both images, the fake path of the browser: `C:\fakepath\profile.png`. This will make it hard to distinguish between them after form submission. Something needs to be implemented here, to be investigated..
  • Loading branch information
thhck committed Apr 3, 2024
1 parent d2adf99 commit 02ccb25
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 1 deletion.
30 changes: 30 additions & 0 deletions src/plugins/file-upload.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { Plugin, PluginOptions } from '../plugin'
import { Term } from '@rdfjs/types'

import { ShaclPropertyTemplate } from '../property-template'
import { InputListEntry } from '../theme'

export class FileUploadPlugin extends Plugin {
onChange: any
constructor(options: PluginOptions, onChange: (event: any) => void, fileType?: string) {
super(options)
this.onChange = onChange
}

createEditor(template: ShaclPropertyTemplate, value?: Term ): HTMLElement {
const required = template.minCount !== undefined && template.minCount > 0
let editor
editor = document.createElement('input')
editor.type = 'file'
if (fileType)
editor.setAttribute('accept', filetype)
editor.addEventListener('change', this.onChange);

return template.config.theme.createDefaultTemplate(
template.label,
value || null,
required,
editor,
template)
}
}
3 changes: 2 additions & 1 deletion webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ module.exports = [
'plugins/mapbox': './src/plugins/mapbox.ts',
'plugins/leaflet': './src/plugins/leaflet.ts',
'plugins/fixed-list': './src/plugins/fixed-list.ts',
'plugins/file-upload': './src/plugins/file-upload.ts',
},
experiments: { outputModule: true },
output: {
Expand All @@ -30,4 +31,4 @@ module.exports = [
},
// devtool: "source-map",
},
];
];

0 comments on commit 02ccb25

Please sign in to comment.