I. Customización del layout.
Para hacer lo que vos querés hay que reemplazar el ng-template
que muestra el botón por uno customizado.
Si bien hay un indicio de que el componente lo permite porque está escrito literalmente, me parece que se olvidaron de documentar como se hace.
Para ver como se hace hay que recurir al github del mismo.
En el ngx-file-drop.component.html:
...
<ng-template #defaultContentTemplate>
<div *ngIf="dropZoneLabel" class="ngx-file-drop__drop-zone-label">{{dropZoneLabel}}</div>
<div *ngIf="showBrowseBtn">
<input type="button" [className]="browseBtnClassName" value="{{browseBtnLabel}}" (click)="openFileSelector($event)" />
</div>
</ng-template>
<ng-template
[ngTemplateOutlet]="contentTemplate || defaultContentTemplate"
[ngTemplateOutletContext]="{ openFileSelector: openFileSelector }">
</ng-template>
...
Vemos que si existe un contentTemplate
se usará éste antes que defaultContentTemplate
que forma parte del componente y que muestra el boton.
Y en ngx-file-drop.component.ts vemos que contentTemplate
se setea usando la directiva NgxFileDropContentTemplateDirective
sobre el template customizado, que a su vez forma parte del contenido del componente.
// custom templates
@ContentChild(NgxFileDropContentTemplateDirective, { read: TemplateRef, static: false }) contentTemplate: TemplateRef<any>;
Entonces el ng-template
redefinido para que sea asignado a contentTemplate
queda como:
<ng-template ngx-file-drop-content-tmp>
<span>Arrastrar archivos aquí o </span>
<a href="#" class="btnNavega" (click)="openFileSelector($event)">NAVEGA</a>
<span> para subirlos.</span>
</ng-template>
Nota: En la solución original usando el Button
se invocaba la función para abrir el selector de archivos usando un let-<variable>="funcion"
. Esto no anduvo cuando reemplacé el botón con un <a>
.
Para solucionarlo setié el ngx-file-drop
como un @childView
del componente y de esta forma poder llamar a la función desde Typescript.
<ngx-file-drop #fileDrop (onFileDrop)="dropped($event)"
(onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
<ng-template ngx-file-drop-content-tmp>
<span>Arrastrar archivos aquí o </span> <a href="#" class="btnNavega" (click)="openFileSelector($event)">NAVEGA</a> <span> para subirlos.</span>
</ng-template>
</ngx-file-drop>
Y en el .ts del componente:
@ViewChild('fileDrop') fileDrop: NgxFileDropComponent;
...
openFileSelector($event){
this.fileDrop.openFileSelector($event);
}
CSS para el botón:
.btnNavega{
font-weight: bold;
text-decoration: none;
color: #0782d0;
}
.btnNavega:hover{
cursor: pointer;
}
II. Código comentado para el envío de los archivos.
El código comentado corresponde al envío del archivo usando la api de FormData. FormData permite agregar el archivo como parte de un Request multipart (Similar a un e-mial que tiene texto, y archivos adjuntos).
En el ejemplo logo
es el nombre del parámetro (en un formulario sería el "name"), file es el objeto File que describe al archivo y que se obtiene del elemento <input type="file">
a través del ngx-file-drop
, y relativepath
es el nombre con el que viaja archivo.
Luego el ejemplo asume que necesitas enviar un token de autorización en un header, presumiblemente para mantener la sisión o para validar permisos otorgados con anterioridad.
El POST
enviado de esta forma va a efectuarse con Content-Type
multipart/form-data
.
Vale aclarar que en el ejemplo se envían de a un archivo a la vez. Pero al ser el Request un multipart, bien se podría hacer un solo Request con todos los archivos juntos.
Para esto, todos los archivos deberían appendearse al mismo objeto FormData antes de hacer el post.