Integrating both simple uploader and drop zone together

[anikets43]

Using drop zone uploader, is it possible that whenever i click inside drop zone it opens the window to select file and shows the uploaded file name?

[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);
}

[inzerceubytovani]

I made this easy solution:

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

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

[hetzbr]

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

[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