File upload formatter

[zewa666]

Hey there @ghiscoding

one of the recent features is to build a workflow based grid, where certain steps are to be confirmed based on other conditions. A row represents one workflow in that case. Along with that, it will be necessary to upload files for each individual workflow (one or more).

So I was thinking to achieve this in such a way to have a string based column, which would have a custom formatter, showing a button and uploading the files. Alternatively it would open a popup with a dropzone (like seen here https://www.dropzone.dev/). Already uploaded files would be shown as tags/pills using tooltips for detail information.

Where I'm not sure actually is whether an editor is needed at all in this case. Sure one could split the "showing existing files" and showing the upload button as custom editor, but I feel like this is going to make the ui more complicated that necessary.

Additionally, I wanted to ask whether you already have used any existing file upload components you could recommend (not necessarily related to projects with the Grid), which you think could fit in nicely in a slickgrid.

[ghiscoding]

hmm I'm using Vue Quasar lately and barely programmed in Angular recently. The Example 29 has a drop zone using SlickGrid internal interaction classes that I wrote in plain JS in the slick.interactions.ts file

slickgrid-universal/packages/common/src/core/slickInteractions.ts

Lines 12 to 29 in c242b38

	/**
	* Draggable Class, enables dragging functionality for any element for example cell & row selections.
	* Note that mouse/touch start is on the specified container element but all other events are on the document body.
	* code refs:
	* https://betterprogramming.pub/perfecting-drag-and-drop-in-pure-vanilla-javascript-a761184b797a
	* available optional options:
	* - containerElement: container DOM element, defaults to "document"
	* - allowDragFrom: when defined, only allow dragging from an element that matches a specific query selector
	* - allowDragFromClosest: when defined, only allow dragging from an element or its parent matching a specific .closest() query selector
	* - onDragInit: drag initialized callback
	* - onDragStart: drag started callback
	* - onDrag: drag callback
	* - onDragEnd: drag ended callback
	* @param {Object} options
	* @returns - Draggable instance which includes destroy method
	* @class Draggable
	*/
	export function Draggable(options: DraggableOption): {

but these interactions implementations are not related to file upload at all. It probably doesn't matter what library you use, does it? As long as you prepare the columnDefinitions/gridOptions before passing the actual data, I think you're fine to use any library you want to upload and read the data. The only other library that we use is SortableJS, which has drop zone too, but I'm thinking of eventually giving a try to this new lib from FormKit team @formkit/drag-and-drop (I found it since they are the ones who created Tempo that I use)... but again I don't think it matters which lib you use!?

[zewa666]

yeah true, just wanted to know whether you had experiences with any of these. I guess I'// give dropzonejs a try.

what do you think about the formatter only approach I mentioned above?

[ghiscoding]

ah yeah I read it quickly and didn't notice the Formatter, not a bad idea but you should probably code your Formatter with native HTML to remain CSP compliant and avoid XSS attack on that one in particular (it's probably ok with DOMPurify as well but native code has better perf since there's nothing to parse). The tooltip for more info sounds like a good alternative to show detailed info in restrained space, I like it (and the tooltip plugin I made should handle that well with a tooltip formatter).