JQuery UI Datepicker Disable Future Dates Example

Jqury UI

Nicesnippets

150

19-03-2020


Hello Developer,

Many times we required photo preview before uploading. In this example we are use bootstrap thumbnail image preview. using FileReader you can get file path. also display any file preview using this url. you can simple create image preview component.

When you create register form at that image preview is required. if you have to crop image before upload at that time image preview is help to user.

src/ImageUploadPreview.js

import React from 'react'

import { Image,Container,Row,Col } from 'react-bootstrap'

class ImageUploadPreview extends React.Component{

constructor(props) {

super(props);

this.state = {file: '',imagePreviewUrl: ''};

}

handleImageChange(e) {

e.preventDefault();

let reader = new FileReader();

let file = e.target.files[0];

reader.onloadend = () => {

this.setState({

file: file,

imagePreviewUrl: reader.result

});

}

reader.readAsDataURL(file)

}

render() {

let {imagePreviewUrl} = this.state;

let $imagePreview = null;

if (imagePreviewUrl) {

$imagePreview = (<Image src={imagePreviewUrl} thumbnail />);

} else {

$imagePreview = (<div className="previewText">Please select an Image for Preview</div>);

}

return (

<Container>

<Row>

<Col xs={12} md={12}>

<form>

<label>Please Select Image</label>

<input type="file"

onChange={(e)=>this.handleImageChange(e)} />

</form>

</Col>

<Col xs={12} md={12}>

{$imagePreview}

</Col>

</Row>

</Container>

)

}

}

export default ImageUploadPreview;

I hope it can help you...


Recommended Posts