uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: add file upload component (#655)

Browse Source 
The component allow upload the same file multiple times
This commit is contained in:
Róbert Kiss
2018-05-26 22:46:41 +02:00
committed by László Monda
parent 65ea786358
commit 8e20c85e07
8 changed files with 62 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/uhk-web/src/app/components/device/configuration/device-configuration.component.html
View File

@@ -14,11 +14,9 @@
</button>
</li>
<li>
<label class="btn btn-default btn-file">
Import device configuration
<input type="file"
(change)="changeFile($event)">
</label>
<file-upload (fileChanged)="changeFile($event)"
label="Import device configuration">
</file-upload>
</li>
<li>
<button class="btn btn-danger"

14
packages/uhk-web/src/app/components/device/configuration/device-configuration.component.ts
View File

@@ -8,6 +8,7 @@ import {
SaveUserConfigInBinaryFileAction,
SaveUserConfigInJsonFileAction
} from '../../../store/actions/user-config';
import { UploadFileData } from '../../../models/upload-file-data';
@Component({
selector: 'device-settings',
@@ -42,16 +43,7 @@ export class DeviceConfigurationComponent {
}
}
changeFile(event): void {
const files = event.srcElement.files;
const fileReader = new FileReader();
fileReader.onloadend = function () {
const arrayBuffer = new Uint8Array(fileReader.result);
this.store.dispatch(new LoadUserConfigurationFromFileAction({
filename: event.srcElement.value,
data: Array.from(arrayBuffer)
}));
}.bind(this);
fileReader.readAsArrayBuffer(files[0]);
changeFile(data: UploadFileData): void {
this.store.dispatch(new LoadUserConfigurationFromFileAction(data));
}
}

11
packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html
View File

@@ -30,15 +30,10 @@
(click)="onUpdateFirmware()">
Flash firmware {{ (getAgentVersionInfo$ | async).firmwareVersion }} (bundled with Agent)
</button>
<label class="btn btn-primary btn-file"
[class.disabled]="flashFirmwareButtonDisbabled$ | async">
Choose firmware file and flash it
<input id="firmware-file-select"
type="file"
<file-upload [disabled]="flashFirmwareButtonDisbabled$ | async"
(fileChanged)="changeFile($event)"
accept=".tar.bz2"
[disabled]="flashFirmwareButtonDisbabled$ | async"
(change)="changeFile($event)">
</label>
label="Choose firmware file and flash it"></file-upload>
</p>
</div>

16
packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts
View File

@@ -15,6 +15,7 @@ import {
} from '../../../store';
import { UpdateFirmwareAction, UpdateFirmwareWithAction } from '../../../store/actions/device';
import { XtermLog } from '../../../models/xterm-log';
import { UploadFileData } from '../../../models/upload-file-data';
@Component({
selector: 'device-firmware',
@@ -48,19 +49,8 @@ export class DeviceFirmwareComponent implements OnDestroy {
this.store.dispatch(new UpdateFirmwareAction());
}
changeFile(event): void {
const files = event.srcElement.files;
if (files.length === 0) {
return;
}
const fileReader = new FileReader();
fileReader.onloadend = function () {
const arrayBuffer = new Uint8Array(fileReader.result);
this.store.dispatch(new UpdateFirmwareWithAction(Array.prototype.slice.call(arrayBuffer)));
}.bind(this);
fileReader.readAsArrayBuffer(files[0]);
changeFile(data: UploadFileData): void {
this.store.dispatch(new UpdateFirmwareWithAction(data.data));
}
openFirmwareGitHubIssuePage(event): void {

9
packages/uhk-web/src/app/components/file-upload/file-upload.component.html Normal file
View File

@@ -0,0 +1,9 @@
<label class="btn btn-primary btn-file"
[class.disabled]="disabled">
{{ label }}
<input #inputControl
type="file"
[accept]="accept"
[disabled]="disabled"
(change)="changeFile($event)">
</label>

36
packages/uhk-web/src/app/components/file-upload/file-upload.component.ts Normal file
View File

@@ -0,0 +1,36 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { UploadFileData } from '../../models/upload-file-data';
@Component({
selector: 'file-upload',
templateUrl: './file-upload.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FileUploadComponent {
@Input() label = 'Select file';
@Input() disabled: boolean;
@Input() accept: string;
@Output() fileChanged = new EventEmitter<UploadFileData>();
changeFile(event): void {
const files = event.srcElement.files;
if (files.length === 0) {
return;
}
const fileReader = new FileReader();
fileReader.onloadend = function () {
const arrayBuffer = new Uint8Array(fileReader.result);
const target = event.target || event.srcElement || event.currentTarget;
target.value = null;
this.fileChanged.emit({
filename: event.srcElement.value,
data: Array.from(arrayBuffer)
});
}.bind(this);
fileReader.readAsArrayBuffer(files[0]);
}
}

1
packages/uhk-web/src/app/components/file-upload/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './file-upload.component';

4
packages/uhk-web/src/app/shared.module.ts
View File

@@ -107,6 +107,7 @@ import { SliderWrapperComponent } from './components/slider-wrapper/slider-wrapp
import { EditableTextComponent } from './components/editable-text/editable-text.component';
import { Autofocus } from './directives/autofocus/autofocus.directive';
import { UhkDeviceBootloaderNotActiveGuard } from './services/uhk-device-bootloader-not-active.guard';
import { FileUploadComponent } from './components/file-upload';
@NgModule({
declarations: [
@@ -179,7 +180,8 @@ import { UhkDeviceBootloaderNotActiveGuard } from './services/uhk-device-bootloa
EditableTextComponent,
Autofocus,
RestoreConfigurationComponent,
RecoveryModeComponent
RecoveryModeComponent,
FileUploadComponent
],
imports: [
CommonModule,