I need a redux-form render field where I can upload image with a preview thumbnail and get base-64 value.
Form
<form className="AddProductForm" onSubmit={handleSubmit(this.addProduct.bind(this))}>
<div className="form-group clearfix">
<img className="addProductImg pull-left" src="" height="200" alt="Image preview..." />
<input className="pull-right addProductImgBtn" type="file" onChange={previewFile} />
</div>
<div className="form-group">
<Field name="name" component={this.renderField} type="text" placeholder="Product name" />
</div>
<Button onClick={close}>Cancel</Button>
<button className='btn btn-primary addProductSave' type="submit" value="CONFIRM">Save</button>
</form>
File upload
function previewFile() {
var preview = document.querySelector('.addProductImg');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
let upImage = preview.src;
this.imageUrl = preview.src; // Base-64 value
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
I can get the base-64 value here, but I am unable to add this value into the existing field set.
Submit function
addProduct = (values) => {
console.log("Field values", values);
console.log("image base64 value", this.imageUrl);
}
Here inside addProduct function I want to get the image value with base64 encoding.
Related
I'm stuck in the image array where I can patch image array value in my edit form there can I upload other images or push images that array or delete.
I have a product model where I can have a sub-array where I can trigger edit query or patch value.
onSelectFile(event: any) {
if (event.target.files && event.target.files[0]) {
var filesAmount = event.target.files.length;
for (let i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = (event: any) => {
console.log("image1",event.target.result);
this.urls.push(event.target.result);
};
reader.readAsDataURL(event.target.files[i]);
}
}
}
<div class="fileupload-wrapper">
<div>
<button class="file-upload-button" type="button" for="custom-fileupload">
<img src="assets/images/icons/file-upload.svg"
alt="file-upload"><span>Upload</span>
<input type="file" accept="image/*;base64," id="file" #file
(change)="onSelectFile($event)" id="custom-fileupload" class="custom-fileupload" multiple />
</button>
</div>
<span class="file-info">
<div *ngFor='let url of urls; let i = index' class="category-wrapper">
<img [src]="sanitizeImageUrl(url)" *ngIf="url" class="categroy-images">
<span (click)="resetCoverValue(i)" class="cross-icon">{{ this.documentName ?
"close" : null }}
<img src="assets/images/icons/blue-cross.svg">
</span>
</div>
</span>
</div>
I want to create a simple form using react. So I though I go with the onSubmit function of the form element, but as it turns out I don't get the form data. data of my handleSubmit function is empty. Why is that?
There is a fiddle that works: https://jsfiddle.net/everdimension/5ry2wdaa/ I don't see the difference.
export default function App() {
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
const data = new FormData(e.target);
console.log('do the submitting', data)
}
return (
<div className="App">
<form onSubmit={handleSubmit}>
<label>
Media Plan
<input type="text" name="media-plan" placeholder="Media Plan" required />
</label>
<fieldset>
<legend>Time span selection</legend>
<label>
Start date
<input type="date" name="start-date" required />
</label>
<label>
End date
<input type="date" name="end-date" required />
</label>
</fieldset>
<fieldset id="submit">
<legend>Send options</legend>
<button type="submit" name="copy">
Copy plan
</button>
<button type="submit" name="save">
Save plan
</button>
</fieldset>
</form>
</div>
)
}
I had to read them this way, the formData object only appears empty.
const formData = new FormData(e.target)
for (var value of formData.values()) {
console.log(value);
}
This question already has answers here:
File Upload using AngularJS
(29 answers)
Closed 5 years ago.
I have an angular controller that is supposed to update person data. With text and date fields, that works just fine, I have
<ul>
<li ng-repeat="person in $ctrl.persons | filter:$ctrl.query">
...
<div ng-show="person.edit">
<label>Full Name*:</label><input class="edit-person" ng-model="person.fullname" /><br />
<label>Birthdate:</label><input class="edit-person" type="date" ng-model="person.birthdate" /><br />
<label>Deathdate:</label><input class="edit-person" type="date" ng-model="person.deathdate" /><br />
<label>Description: </label><input class="edit-person" type="text" ng-model="person.description" /><br />
<img ng-src="{{person.picture}}" width="100px" height="100px" /><br />
<label>Picture: </label>
<input class="edit-person" type="file" accept="image/*"
ng-file-select="handleEditPersonFiles(this.files);" /><br />
<button ng-click="$ctrl.submitEdit(person); person.edit = false;">submit</button>
<button ng-click="$ctrl.cancelEdit(); person.edit = false;">cancel</button>
</div>
</li>
</ul>
and the component code:
var self = this;
this.submitEdit = function(person){
$http.post('/edit_person', {
id: person.id,
fullname: person.fullname,
birthdate: person.birthdate,
deathdate: person.deathdate,
description: person.description,
picture: person.picture
}).then(loadPersons);
};
and
handleEditPersonFiles = function(files){
var reader = new FileReader();
var that = this;
reader.onload = function(){
? = reader.result;
};
reader.readAsDataURL(files[0]);
};
I have no problem reading and uploading the pictures in the new-person function, since there I have a single variable, and can just self.new_person_picture = reader.result, but with the edit function, I don't know where to assign the reader result since I don't have access to the person.picture variable through angular. The onchange event correctly submits the file list. But ng-change seems to require a model, and doesn't fire when a file is selected. I also tried ng-file-select, but no event seems to be firing when I select a file to upload. Any help would be greatly appreciated.
It's easier than you think, you just have to pass the person model to the handleEditPersonFiles model too.
html:
<li ng-repeat="person in $ctrl.persons ...
...
<label>Picture: </label><input class="edit-person" type="file" accept="image/*" ng-file-select="handleEditPersonFiles(person, this.files);" />
js:
handleEditPersonFiles = function(person, files){
var reader = new FileReader();
reader.onload = function(){
person.picture = reader.result;
};
reader.readAsDataURL(files[0]);
};
is there any way to get value of checkbox using ref in React. Normal way return always value "on" to me.
var MyForm = React.createClass({
save: function(){
console.log(this.refs.check_me.value);
},
render: function(){
return <div><h1>MyForm</h1>
<div className="checkbox">
<label>
<input type="checkbox" ref="check_me" /> Check me out
</label>
</div>
<button className="btn btn-default" onClick={this.save}>Submit</button>
</div>
}
});
For checkbox, use "checked" instead of "value":
var MyForm = React.createClass({
save: function () {
console.log(this.refs.check_me.checked);
},
render: function () {
return <div><h1>MyForm</h1>
<div className="checkbox">
<label>
<input type="checkbox" ref="check_me" /> Check me out
</label>
</div>
<button className="btn btn-default" onClick={this.save}>Submit</button>
</div>
}
});
As a result:
There is a classic way to catch the event and corresponding values with the help of:
event.target.checked, event.target.name
You can see an example:
class MyForm extends React.Component {
onChangeFavorite(event){
console.log(event.target.checked, event.target.name);
};
render(){
return (<div><h1>MyForm</h1>
<div className="checkbox">
<label>
<input type="checkbox" name="myCheckBox1"
onChange={this.onChangeFavorite}
defaultChecked={false} />
Check me out
</label>
</div>
<button className="btn btn-default" onClick={this.save}>Submit</button>
</div>)
};
};
You can make the checkbox a controlled element by listening to onChange and giving it a state value. Try the following:
var MyForm = React.createClass({
save: function(){
console.log(this.refs.check_me.value);
},
toggleCheckboxValue: () => {
this.setState({checkBoxValue: !this.state.checkboxValue});
},
render: function(){
return <div><h1>MyForm</h1>
<div className="checkbox">
<label>
<input type="checkbox" ref="check_me" value={this.state.checkboxValue} onChange={this.toggleCheckboxValue} /> Check me out
</label>
</div>
<button className="btn btn-default" onClick={this.save}>Submit</button>
</div>
}
});
whenever the checkbox is clicked it will run the toggleCheckboxValue function, which will toggle the value of this.state.checkboxValue.
Just don't forget to initialize the this.state.checkboxValue function in your code.
Note: As ivarni pointed out, you may want to control the checked value specifically for checkboxes rather than value. Though both solutions will work.
I'm not sure why you want it using ref specifically, but it can be done nativily:
import React from 'react';
function CheckBox() {
const [isSave, setIsSave] = React.useState(false);
const handler = (value) => {
console.log(value);
setIsSave(value);
};
return (
<div>
<input type="checkbox" onChange={(ev) => handler(ev.target.checked)} />
<label> Save me..</label>
</div>
);
}
export default CheckBox;
Using HTML5 code, I'm unable to delete from the database even though the onsuccess event is triggered.My delete code is as below:
btnDelete.addEventListener("click", function(){
//alert("At Delete function");
var AadharNumber = document.getElementById("AadharNumber").value;
var transaction = db.transaction("CustDetails",IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore("CustDetails");
var request = objectStore.delete(AadharNumber);
request.onsuccess = function(event){
alert( "Aadhar Number: "+ AadharNumber + " deleted from the database");
};
},false);
Then when i click the print button after the delete, i still get to see the same records.Below is my print function.
btnPrint.addEventListener("click", function () {
var output = document.getElementById("printOutput");
output.textContent = "";
var transaction = db.transaction("CustDetails", IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore("CustDetails");
var request = objectStore.openCursor();
request.onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
output.textContent += "<li>""Aadhar Number: " + cursor.key + " is " + cursor.value.name + "</li>";
cursor.continue();
}
else {
console.log("No more entries!");
}
};
}, false);
My html code is as below:
<body><center>
<div id="container">
<label for="txtName">
Name:
</label>
<input type="text" id="txtName" name="txtName" />
<br />
<label for="txtEmail">
Email:
</label>
<input type="text" id="txtEmail" name="txtEmail" />
<br />
<input type="button" id="btnAdd" value="Add Record" />
<br />
<label for="AadharNumber">
ID:
</label>
<input type="text" id="AadharNumber" name="txtAadharNumber" />
<input type="button" id="btnDelete" value="Delete Record" />
<br />
<input type="button" id="btnPrint" value="Print Records" />
<br />
<output id="printOutput" > </output>
</div>
</center>
</body>
What is wrong with my delete? Thanks.
The code seems fine however you could check if converting the string key to integer value helps deleting the object from the object store.
var AadharNumber = parseInt(document.getElementById("AadharNumber").value);