After discovering the
ng2-alfresco-documentlist and the
ng2-alfresco-viewer components, in this paragraph we are going to introduce the
ng2-alfresco-upload displaying useful tools to upload files and folders into the repository. In this case we won’t see practical examples of customisations, but we would like to focus on a brief description to make their use more easier and understandable. Honestly, those components are not the hardest one to use (even if they offer a great support for the users) and the customisations can be developed exactly in the same way we saw in all the past examples.
Looking at the files component stored into the
<my-adf>/app/components/files folder, let’s edit the
files.component.html file and find the tags:
file-uploading-dialog. The first two components are used to control uploading of files (documents in Alfresco ECM) and folders. The third component, used in combination with the other two, is used to show the progress during the upload task.
alfresco-upload-drag-area component is used to define an area in the screen, where the user can drag & drop the content to upload files and folders into Alfresco. As you can imagine, the area where the component acts is defined by the HTML source code contained into the
alfresco-upload-drag-area tag. In this example in particular, the area is defined by the breadcrumb (represented by the
alfresco-document-list-breadcrumb tag), the error messages, the Alfresco repository explorer (represented by the
alfresco-document-list tag) and the pagination component (represented by the
Differently from the
alfresco-upload-drag-area component, the
alfresco-upload-button is used to define a button on the screen, where the user can click and select the content to be upload directly into Alfresco.
As well described into the
ng2-alfresco-upload documentation, the
alfresco-upload-drag-area and the
alfresco-upload-button components can be controlled using attributes, eventing and custom functions, in the same way it is described in the various examples of the current and past tutorials. What we would like to share here, is that both the components are strictly related to the
file-uploading-dialog, showing the progress during the upload.
Below the picture showing how the
file-uploading-dialog looks like, after a file upload using the
alfresco-upload-drag-area component (in any case, using the
alfresco-upload-button component would be exactly the same user experience).
file-uploading-dialog component in the