2

Tenía un par de dudas con el plugin ngx-file-drop el problema que tengo es que yo quiero poner un texto que se llama navega y al hacer click abrir la ventana de navegación de archivos para buscar los archivos que deseo subir. En la documentación hay una cosa parecida pero es para poner un botón

[showBrowseBtn]="true"

Pero claro a mi eso no me sirve yo quiero ponerlo así

introducir la descripción de la imagen aquí

Luego también vienen estas líneas de código comentadas que es para programar la subida de los archivos pero no las entiendo bien, a ver si alguien puede echarme una mano

public files: UploadFile[] = [];
public dropped(event: UploadEvent) {
this.files = event.files;
for (const droppedFile of event.files) {

  // Is it a file?
  if (droppedFile.fileEntry.isFile) {
    const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
    fileEntry.file((file: File) => {

      // Here you can access the real file
      console.log(droppedFile.relativePath, file);

      /**
      // You could upload it like this:
      const formData = new FormData()
      formData.append('logo', file, relativePath)

      // Headers
      const headers = new HttpHeaders({
        'security-token': 'mytoken'
      })

      this.http.post('https://mybackend.com/api/upload/sanitize-and-save-logo', formData, { headers: headers, responseType: 'blob' })
      .subscribe(data => {
        // Sanitized logo returned from backend
      })
      **/

    });
  } else {
    // It was a directory (empty directories are added, otherwise only files)
    const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
    console.log(droppedFile.relativePath, fileEntry);
  }
}

Muchas gracias!

2
  • Creo que con ngx-file-drop lo único que puedes usar es [showBrowseBtn]="true", lo que si puedes es darle estilo al botón y poner el texto que quieras en el con las propiedades: browseBtnClassName y browseBtnLabel el 29 may. 2019 a las 11:39
  • Para ponerlo así como en tu imagen tienes que usar la api drag and drop de html5 aunque no se como combinarlo con angular.
    – abrahamhs
    el 12 jun. 2019 a las 15:46

1 respuesta 1

1
+50

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&iacute; o&nbsp;</span>
    <a href="#" class="btnNavega" (click)="openFileSelector($event)">NAVEGA</a>&nbsp;
    <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&iacute; o&nbsp;</span>  <a href="#" class="btnNavega" (click)="openFileSelector($event)">NAVEGA</a>&nbsp;<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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.