How to insert new image for new nested JSON data in angular2 with formBuilder?
what i trying to do is create a JSON data with image in it with formBuilder to save into firebase database, but first i need to create nested array data inside the main JSON data which is contain image for each array, i need each array data inserted with new image
My JSON data with nested formArray in it :
{
"nomor_transaksi": "",
"returDetails": [
{
"kd_brg": "",
"qty": "",
"pengaduan": "",
"kd_lokasi": "",
"picture": ""
},
{
"kd_brg": "",
"qty": "",
"pengaduan": "",
"kd_lokasi": "",
"picture": ""
}
]
}
Here is my html code :
<form [formGroup]="datareturForm" (ngSubmit)="submitForm()">
<div class="form-group">
<label for="nomor_transaksi">Nomor Transaksi</label>
<input #notrans type="text" placeholder="nomor transaksi" formControlName="nomor_transaksi"/>
<p *ngIf="datareturForm.controls.nomor_transaksi.errors">Pelan2 bro, max 10 char ya</p>
</div><br/>
<!-- details mulai disini-->
<div class="form-group">
<div formArrayName="returDetails">
<p>List Barang : </p>
<div *ngFor="let retur of returDetails.controls; let i=index" [formGroupName]="i">
<label for="kd_brg">Kode Barang</label>
<input type="text" placeholder="Kode Barang" formControlName="kd_brg"/>
<!--<p *ngIf="returDetails.controls.kd_brg.errors">Pelan2 bro, max 10 char ya</p>-->
<label for="qty">Qty</label>
<input type="text" placeholder="Qty" formControlName="qty"/>
<!--<p *ngIf="returDetails.controls.kd_brg.errors">Pelan2 bro, max 10 char ya</p>-->
<label for="pengaduan">Pengaduan</label>
<input type="text" placeholder="Pengaduan" formControlName="pengaduan"/>
<!--<p *ngIf="returDetails.controls.kd_brg.errors">Pelan2 bro, max 10 char ya</p>-->
<label for="kd_lokasi">Kode Lokasi</label>
<input type="text" placeholder="Kode Barang" formControlName="kd_lokasi"/>
<!--<p *ngIf="returDetails.controls.kd_brg.errors">Pelan2 bro, max 10 char ya</p>-->
<label for="gambar">Gambar</label>
<input type="file" (change)="onChange($event)" />
<label for="preview">Preview</label>
<img [src]="fileupload">
</div>
</div>
</div><br/>
<button type="submit">Save Contact</button>
<button type="button" (click)="deleteRetur(notrans.value)">Delete</button>
<br/>
</form>
<button (click)="add()">Add Detail</button>
each i click "Add Detail" button, it will create new Array JSON for the new row data, i put the "add detail" button outside the form because if i put it in the form, it the form will think i click and do submit.
Here is my typescript code :
datareturForm: FormGroup;
returDetails: FormArray;
items: FirebaseListObservable<any[]>;
fileupload: any;
ngOnInit(){
this.datareturForm = this.formBuilder.group({
nomor_transaksi: ['', Validators.maxLength(20)],
returDetails: this.bikinArray()
})
}
bikinArray(): FormArray {
this.returDetails = this.formBuilder.array([
this.buildGroup()
]);
return this.returDetails;
}
buildGroup(): FormGroup {
return this.formBuilder.group({
kd_brg:'',
qty:'',
pengaduan:'',
kd_lokasi:'',
gambar:''
});
}
add() {
this.returDetails.push(this.buildGroup());
}
onChange(input): void {
// Create an img element and add the image file data to it
var img = document.createElement("img");
// var img:any = new Image();
img.src = window.URL.createObjectURL(input.target.files[0]);
// Create a FileReader
var reader: any, target: EventTarget;
reader = new FileReader();
// var that = this;
// Add an event listener to deal with the file when the reader is complete
reader.addEventListener("load", (event) => {
// Get the event.target.result from the reader (base64 of the image)
img.src = event.target.result;
// Resize the image
var resized_img = this.resize(img,input.target.files[0].type);
// that.cropper.setImage(img);
// Push the img src (base64 string) into our array that we display in our html template
this.fileupload=resized_img;
// this.file=dataUrl;
// var imgBlob = this.dataURItoBlob(this.file);
// this.fileupload = imgBlob
}, false);
reader.readAsDataURL(input.target.files[0]);
}
resize (img, type, MAX_WIDTH:number = 700, MAX_HEIGHT:number = 700){
var canvas = document.createElement("canvas");
// console.log("Size Before: " + img.src.length + " bytes");
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataUrl = canvas.toDataURL(type);
// IMPORTANT: 'jpeg' NOT 'jpg'
// console.log("Size After: " + dataUrl.length + " bytes");
return dataUrl
}
and each i click the add detail button it will create new nested array but the image keep looping the same image, i want to add new image:
see it's loop the same image and when i replace one of the array image, the others keep changing the same image too. I need each row is different image, how do i do this?
=============================================
UPDATE
I just updated my code just like @Fabio Antunes answer, what i got is this error :
error_handler.js:45 EXCEPTION: Cannot set property 'picture' of undefinedErrorHandler.handleError @ error_handler.js:45next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runTask @ zone.js:139ZoneTask.invoke @ zone.js:304 error_handler.js:50 ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runTask @ zone.js:139ZoneTask.invoke @ zone.js:304 error_handler.js:51 TypeError: Cannot set property 'picture' of undefined at FileReader. (app.component.ts:115) at ZoneDelegate.invokeTask (zone.js:236) at Object.onInvokeTask (ng_zone_impl.js:34) at ZoneDelegate.invokeTask (zone.js:235) at Zone.runTask (zone.js:136) at FileReader.ZoneTask.invoke (zone.js:304)ErrorHandler.handleError @ error_handler.js:51next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runTask @ zone.js:139ZoneTask.invoke @ zone.js:304 app.component.ts:115 Uncaught TypeError: Cannot set property 'picture' of undefined(…)
Here is the looks :
i think it doesn't bind to my json tree right? how to bind it? i do add my html code like this :
<label for="gambar">Gambar</label>
<input type="file" (change)="onChange($event,i)" formControlName="picture"/>
<label for="preview">Preview</label>
<img [src]="retur.picture">
but nothing happened, still i got the same error, i trying to google about formBuilder/reactive form handling it doens't show a result, need help here, dunno what to search anymore
since i don't think there is any bind function in formBuilder / reactive form for like formControlName="" in i did inject the JSON manual from my app.component.ts here is what i did :
in my app.component.html i add
<label for="gambar">Gambar</label>
<input type="file" (change)="onChange($event,i)" />
<label for="preview">Preview</label>
<img [src]="retur.value.picture">
notice the i can't access the json value with just dunno why, i do try and error alot with help from my friend lol
then below is my app.component.ts :
ngOnInit(){
this.datareturForm = this.formBuilder.group({
nomor_transaksi: ['', Validators.maxLength(20)],
returDetails: this.bikinArray()
})
}
bikinArray(): FormArray {
this.returDetails = this.formBuilder.array([
this.buildGroup()
]);
return this.returDetails;
}
buildGroup(): FormGroup {
return this.formBuilder.group({
kd_brg:'',
qty:'',
pengaduan:'',
kd_lokasi:'',
namafile:'',
picture: '',
hasilImgBlob: ''
});
}
add() {
this.returDetails.push(this.buildGroup());
}
onChange(input, index): void {
// Create an img element and add the image file data to it
var img = document.createElement("img");
// var img:any = new Image();
img.src = window.URL.createObjectURL(input.target.files[0]);
//ambil nama file
this.returDetails.controls[index].value.namafile=input.target.files[0].name;
// console.log(this.namafile);
// Create a FileReader
var reader: any, target: EventTarget;
reader = new FileReader();
// var that = this;
// Add an event listener to deal with the file when the reader is complete
reader.addEventListener("load", (event) => {
// Get the event.target.result from the reader (base64 of the image)
img.src = event.target.result;
// Resize the image
var resized_img = this.resize(img,input.target.files[0].type);
// that.cropper.setImage(img);
// Push the img src (base64 string) into our array that we display in our html template
this.fileupload=resized_img;
this.returDetails.controls[index].value.picture=resized_img;
var imgBlob = this.dataURItoBlob(this.fileupload);
this.returDetails.controls[index].value.hasilImgBlob=imgBlob
//ini kasi nama baru aja, terus nanti yg ini yg di save
// this.hasilImgBlob[] = imgBlob
//indexing gambar
// this.returDetails[index].picture = resized_img;
// console.info(index);
// this.file=dataUrl;
}, false);
reader.readAsDataURL(input.target.files[0]);
}
//you need this function to convert the dataURI
dataURItoBlob(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var array = [];
for (var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {
type: mimeString
});
}
resize (img, type, MAX_WIDTH:number = 700, MAX_HEIGHT:number = 700){
var canvas = document.createElement("canvas");
// console.log("Size Before: " + img.src.length + " bytes");
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataUrl = canvas.toDataURL(type);
// IMPORTANT: 'jpeg' NOT 'jpg'
// console.log("Size After: " + dataUrl.length + " bytes");
return dataUrl
}
save():void{
if(this.fileupload==undefined){
//ini bagian, save tanpa image ke storage
//this.items.push(this.profileData);
}else{
event.preventDefault();
//loop si retur.control
for(var i = 0; i < this.returDetails.length ; i++){
// ini dapetin nama file image
let namaFileEdited:string= new Date().getTime()+'-'+this.returDetails.controls[i].value.namafile;
let storageRef: any = firebase.storage().ref();
//ini lokasi storage u folder n nama nya apa
let path: string = 'images/' + namaFileEdited;
//ini fungsi, save ke storage, (image nya)
let uploadTask: any = storageRef.child(path).put(this.returDetails.controls[i].value.hasilImgBlob);
//ini progress nya
uploadTask.on('state_changed', (snapshot)=> {
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
switch (snapshot.state) {
case firebase.storage.TaskState.PAUSED: // or 'paused'
console.log('Upload is paused');
break;
case firebase.storage.TaskState.RUNNING: // or 'running'
console.log('Upload is running');
break;
}
}, (error) => {
//ini klo error
console.info('dafuq error bro');
}, () =>{
//ini completed
//ini ambil nama file, masukin ke json profiledata
this.datareturForm['namafile']=namaFileEdited;
//ini ambil link gambar di storage, masukin ke json profile data
this.datareturForm['picture']=uploadTask.snapshot.downloadURL;
//save ke database
this.items.push(this.datareturForm.value)
});
}
}
}
sorry for many comment in indonesia language, don't mind it, it's my own notes for my self. as you guys can see in there i add returDetails.picture in onChange function, look at this line this.returDetails.controls[index].value.picture=resized_img;
there i add the resized_img into json variable, so here is the json gonna be like this :
as you can see before the image i choose is not added to the json variable, but now i added it, and if you have question in your mind about "hasilImgBlob" its a image data BLOB that i add into JSON variable, but the result just {} still i dunno why, but when i push it into firebase, it saved hola! i can't see whats in {} i just can debug the object, hope this little code can help the other. and don't mind the JSON variable that i skipped, it's not i don't wanna write it, but it's the same variable just like the first one "nomor_transaksi". i skipped it becuase it's too many
note : this code i use to push into firebase database and the image is saved into firebase storage. this code still haven't met my satisfaction since the BLOB data is saved in json database file, but this topic is not about this. it's better saved the url for the firebase storage since i already saved it into firebase storage
- 2D NumPy array + 1D array →?
- How do I print bytes as hexadecimal?
- Naturally sort an associative subarray by its keys in a descending direction
- Group rows by one column and populate subarray within group with another column's value
- Group row data of a 2d array by a column and push another column as subarray items per group
- Group 2d array data by one column and create a subarray in each group from another column
- Group row data from a 2d array by one column and populate the group's subarray with another column
- Dynamic array using xlwings causing formula to be wrapped with {}
- Grouping data while looping by one value and push another value into the group as a subarray value
- Check array in JS - is list sorted?
- HackerRank: New Year Chaos alternative answer Java
- When is array allocated on stack in C#?
- Group 2d array data by a column and only create a subarray if more than one item in group
- How to perform grouping in php
- Difference between using Array.isArray and instanceof Array
- Order of operations - using two assignment operators in a single line
- Is there a way in array.map() method to access / iterate the keys of multiple key/value-pairs per index (not the index)
- Sort columns in an associative array of indexed arrays by multiple criteria
- Sort a 2d array by another flat array of priority values
- Sort a 2d array by a column's values
- Sort a 2d array by a column and preserve first level keys
- Sorting a 2d array by numeric column value
- PHP Sort Array By SubArray Value
- How to stop the results repeating and keep updated record from the cart array?
- Sorting a 2D array by a column
- Sort a 2d array containing only one column and preserve first level keys
- Sort a 2d array by a column then print and remove rows
- Sorting a 2d array by one column then another column
- Sorting a 2d array by multiple columns
- Sort a flat subarray of numbers and preserve the keys