Integrating both simple uploader and drop zone together about ng2-file-upload

[inzerceubytovani]

I made this easy solution:

`<div class="dropzone" ng2FileDrop [uploader]="uploader" (click)=fileInput.click()>
Drop or Click to select files

`

<input type="file" #fileInput ng2FileSelect [uploader]="uploader" multiple style="display: none;"/>

[bioform]

To implement it right way you just need to replace "div" with "lable" and wrap file input field with it.
Something like:

<label ng2FileDrop [uploader]="uploader" class="my-drop-zone">
    Drag and Drop File Here
    <input type="file" ng2FileSelect [uploader]="uploader" style="display: none" />
</label>

No need to use "click" at all

[vangorra]

+1

[sylvaindumont]

+1

[valorkin]

oh, nice one

[JulianH]

I solved this wrapping the file-select into the file-drop like this:

<div class="dropzone" ng2FileDrop [uploader]="uploader">
    <div>Drop image here...</div>
    <input type="file" ng2FileSelect [uploader]="uploader">
</div>

[fojt]

try this https://github.com/valor-software/ng2-file-upload/tree/development/demo/components/file-upload/zs-file-demo
I think code is more clear then use drop & select at the same time.

[t246246]

@fojt How to use this demo?
As your template include only <input> tag with style="display: none;", so I guess it is intended to use with other tag or component. I tried to use your DemoFileUploadComponent using <demo-file-upload></demo-file-upload> or <div DemoFileUploadComponent ...></div>, but I got error TypeError: Cannot read property 'isSkipSelf' of null.

[t246246]

I understand the error above occurs because, in short, FileUploader is not @Injectable(). So I remove providers: [FileUploader], line and add @Input() public uploader:FileUploader; so as to get existing FIleUploader instance, and check using <demo-file-upload [uploader]="uploader"></demo-file-upload> from other sample-demo.html. Now I see how your component works.

Also it needs little fix for Firefox.

public onChange($event:any):void {
    this.fileUploadService.addToQueue(($event.target || $event.srcElement).files);
}

[hetzbr]

Added the following styles to div to make it cleaner:
.point{
cursor: pointer;
}
.my-drop-zone:hover {
border: dashed 3px green;
}