File Upload/Selection

[joepavitt]

Story

No response

Description

In need of a file selection/upload component that is consistent in style with the rest of Flowforge. First requirement for this came from FlowFuse/flowfuse#835.

For now, the solution was to use the standard HTML file upload input styling, but something more visually coherent would be preferable.

[hardillb]

From my experiments in FlowFuse/flowfuse#1056 this component will need the following:

• be able to pass the list of allowed file extensions (e.g. https://github.com/flowforge/flowforge/blob/import-project/frontend/src/pages/project/components/ImportProjectComponents.vue#L6)
• an on change event that returns both the underlying input dom object (needed to use the FileReader pattern) and the value of the input (used to check when the selected file changes), this can then be used with the watch function. (e.g. https://github.com/flowforge/flowforge/blob/import-project/frontend/src/components/FormRow.vue#L47 and https://github.com/flowforge/flowforge/blob/import-project/frontend/src/pages/project/components/ImportProjectComponents.vue#L45)
• may be add a clear function to the FormRow object to save having to know how to clear it in the using component (https://github.com/flowforge/flowforge/blob/import-project/frontend/src/pages/project/components/ImportProjectComponents.vue#L106)

[joepavitt]

Properties:

• File Types
• "Type" of file upload, e.g. dragndrop or just single line "Choose File"

[hardillb]

Also optional multi-file select

[joepavitt]

@sumitshinde-84 can't seem to assign you to this for some reason, but you're welcome to start the work on the forge-ui-components repo.

You can run npm run serve to get some interactive documentation (/docs) too which will give you some grounds on which to test the widgets works as expected.

[sumitshinde-84]

@sumitshinde-84 can't seem to assign you to this for some reason, but you're welcome to start the work on the forge-ui-components repo.

You can run npm run serve to get some interactive documentation (/docs) too which will give you some grounds on which to test the widgets works as expected.

Thank you for the information! I will start working on the forge-ui-components repo

[joepavitt]

As a starting point take a look at the Vuetify File Upload component: https://vuetifyjs.com/en/components/file-inputs/ offers some good property examples. We'd ideally want drag & drop (and there are plenty of examples out there for that too)

[sumitshinde-84]

@joepavitt can you please review this Pr #2348 so i can freely move on this issue .

[joepavitt]

can you please review this Pr #2348 so i can freely move on this issue .

I can see that @Pezmc is handling that already, so will let him cover. That wouldn't be a blocker though, since forge-ui-components is a completely separate repository.