File Upload/Selection - Githubissues

FlowFuse / forge-ui-components

Set of FlowForge-themed VueJS components that can be used in any FlowForge web applications.

Apache License 2.0

3 stars 1 forks source link

File Upload/Selection #56

Open joepavitt opened 2 years ago

joepavitt commented 2 years ago

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 https://github.com/flowforge/flowforge/issues/835.

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

hardillb commented 2 years ago

From my experiments in https://github.com/flowforge/flowforge/pull/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 commented 2 years ago

Properties:

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

hardillb commented 2 years ago

Also optional multi-file select

joepavitt commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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

joepavitt commented 1 year ago

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.