Integrating both simple uploader and drop zone together #64

New Issue

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

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 commented

2016-05-12 22:01:46 +00:00

(Migrated from github.com)

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.

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 commented

2016-06-06 02:03:33 +00:00

(Migrated from github.com)

@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.

@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 commented

2016-06-07 11:24:35 +00:00

(Migrated from github.com)

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

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 commented

2016-08-06 07:41:39 +00:00

(Migrated from github.com)

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;"/>

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;"/>`

👍 6 ❤️ 5

hetzbr commented

2016-11-15 19:41:28 +00:00

(Migrated from github.com)

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

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

bioform commented

2017-07-10 14:10:17 +00:00

(Migrated from github.com)

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

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

👍 3 ❤️ 3

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#64