ULB-Darmstadt / shacl-form

HTML5 web component for editing/viewing RDF data that conform to SHACL shapes
https://ulb-darmstadt.github.io/shacl-form/
MIT License
24 stars 4 forks source link

Add a file upload plugin #11

Closed thhck closed 4 months ago

thhck commented 5 months ago

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:

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..

s-tittel commented 4 months ago

Hi, thanks for your plugin fork. I have refactored the code a little since it was not compiling. The new usage pattern would be:

form.registerPlugin(new FileUploadPlugin({datatype: '...'}, (event) => {
     console.log('--- files', event.target.querySelector('input[type="file"]').files)
}, 'image/png'))

When you create a new PR, I will accept.

thhck commented 4 months ago

have refactored the code a little since it was not compiling.

Strange, I didn't get compilation error on my machine and was able to use the plugin like this.

Thanks for the refactoring, I have created a new PR #12

I'm not sure to understand the need for a new PR, are you expecting my to do further improvement to the feature ?