See the wiki on how to implement your own custom preview components. The ngx-dropzone-image-preview and ngx-dropzone-video-preview components inherit from this component but expand the preview functionality to display either images or videos directly in the component. Returns the file from the Input property.
It returns a NgxDropzoneChangeEvent with the properties source: NgxDropzoneComponent, addedFiles: File and rejectedFiles: RejectedFile. (change): Emitted when any files were added or rejected.: Enable extracting files from dropped directories., ,, : Forward the accessibility properties to the file input element.: Prevent the file selector from opening when clicking the dropzone.Defaults to false which means that it will allow for horizontal scrolling. : Allow the dropzone container to expand vertically as the number of previewed files increases.: Disable any user interaction with the component.: Set the maximum size a single file may have, in bytes.Example: accept="image/jpeg,image/jpg,image/png,image/gif" accept: Set the accepted file types (as for a native file element).: Allow the selection of multiple files at once.This component has the following Input properties: You could override the styling of these effects if you like to. It will add the classes ngx-dz-hovered and ngx-dz-disabled to its host element if necessary. Use it as a stand-alone component or by adding it as an attribute to a custom div ( ).
It has an event listener for file drops and you can also click it to open the native file explorer for selection. It contains the label and any file previews. This component is the actual dropzone container. Usage // in import ) Component documentation ngx-dropzone A lightweight and highly customizable Angular dropzone component for file uploads.įor a demo see DEMO.