Updating example
This commit is contained in:
@@ -115,4 +115,16 @@
|
||||
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Response</div>
|
||||
<div class="panel-body">
|
||||
{{ response }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,9 +9,36 @@ const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
|
||||
templateUrl: './simple-demo.html'
|
||||
})
|
||||
export class SimpleDemoComponent {
|
||||
public uploader:FileUploader = new FileUploader({url: URL});
|
||||
public hasBaseDropZoneOver:boolean = false;
|
||||
public hasAnotherDropZoneOver:boolean = false;
|
||||
|
||||
uploader:FileUploader;
|
||||
hasBaseDropZoneOver:boolean;
|
||||
hasAnotherDropZoneOver:boolean;
|
||||
response:string;
|
||||
|
||||
constructor (){
|
||||
this.uploader = new FileUploader({
|
||||
url: URL,
|
||||
disableMultipart: true, // 'DisableMultipart' must be 'true' for formatDataFunction to be called.
|
||||
formatDataFunctionIsAsync: true,
|
||||
formatDataFunction: async (item) => {
|
||||
return new Promise( (resolve, reject) => {
|
||||
resolve({
|
||||
name: item._file.name,
|
||||
length: item._file.size,
|
||||
contentType: item._file.type,
|
||||
date: new Date()
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.hasBaseDropZoneOver = false;
|
||||
this.hasAnotherDropZoneOver = false;
|
||||
|
||||
this.response = '';
|
||||
|
||||
this.uploader.response.subscribe( res => this.response = res );
|
||||
}
|
||||
|
||||
public fileOverBase(e:any):void {
|
||||
this.hasBaseDropZoneOver = e;
|
||||
|
||||
@@ -25,6 +25,9 @@ import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-u
|
||||
1. `url` - URL of File Uploader's route
|
||||
2. `authToken` - auth token that will be applied as 'Authorization' header during file send.
|
||||
3. `disableMultipart` - If 'true', disable using a multipart form for file upload and instead stream the file. Some APIs (e.g. Amazon S3) may expect the file to be streamed rather than sent via a form. Defaults to false.
|
||||
4. `itemAlias` - item alias (form name redefenition)
|
||||
5. `formatDataFunction` - Function to modify the request body. 'DisableMultipart' must be 'true' for this function to be called.
|
||||
6. `formatDataFunctionIsAsync` - Informs if the function sent in 'formatDataFunction' is asynchronous. Defaults to false.
|
||||
|
||||
## FileDrop API
|
||||
|
||||
@@ -37,3 +40,4 @@ import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-u
|
||||
- `fileOver` - it fires during 'over' and 'out' events for Drop Area; returns `boolean`: `true` if file is over Drop Area, `false` in case of out.
|
||||
See using in [ts demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) and
|
||||
[html demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.html)
|
||||
- `onFileDrop` - it fires after a file has been dropped on a Drop Area; you can pass in `$event` to get the list of files that were dropped. i.e. `(onFileDrop)="dropped($event)"`
|
||||
@@ -3,7 +3,7 @@
|
||||
"declaration": false,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"noEmitHelpers" :true,
|
||||
"noEmitHelpers": false,
|
||||
"lib": ["es6", "dom"],
|
||||
"types": [
|
||||
"jasmine",
|
||||
|
||||
Reference in New Issue
Block a user