Prashant Baldha on WordPress

Tag: DropzoneJS

  • Change colourful Image to black and white Image using CSS

    During My Professional web development, I need a black and white image of a colorful image. At that time, I have decided that I would not use Adobe Photoshop or Any Other Photo Editor Software, but I would like to use CSS.

    I have got many solutions from google, but There was no cross-browser compatibility. Finally, after googling, I got cross-browser compatible CSS to make the image black and white and remove that effect.

    To make the Image black and white, I have used the below CSS :

    .black-white-img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ }


    And to remove the effect of black and white, I have used the below CSS:

    .colorful-img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); -webkit-filter: grayscale(0%); }

  • Implement DropzoneJS with PHP

    What is DropzoneJS?

    DropzoneJS is a javascript library that helps to upload multiple files using AJAX. DropZoneJs gives Drag and Drop File Upload Functionality. There are common questions to us as web-developer how we allow users to allow upload multiple files. DropZoneJs is also previewing images thumbnail in the upload preview area. DropZoneJs is compatible with Bootstrap upload file UI. We can additionally restrict uploading only a single file upload to specific numbers of file upload.

    DopzoneJS is easy to implement for a newbie PHP developer.

    Benefits of DopzoneJs:

    • Easy to implement
    • Highly Customizable
    • Easy to custom configuration
    • Not Depend on JQuery
    • Lightweight
    • Drag and Drop File Upload

    Integrate or Implement DropzoneJS in Php:

    • To implement dropzone we need dropzone js file and css files
    • First, you should download the dropzone project from https://github.com/enyo/dropzone.
    • Copy download folder from that DropZoneJs project folder DropZoneJs and paste it into our project folder. In our case this our project folder is upload_demo.
    • Rename that download folder as DropZoneJs in our project folder.
    • Now we have to include javascript and CSS in our webpage file:
    <script src="DropzoneJS/dropzone.min.js"></script>
<link rel="stylesheet" type="text/css" href="DropzoneJS/css/dropzone.css" />
<link rel="stylesheet" type="text/css" href="DropZoneJs/css/basic.css" />
    • Copy and paste below HTML code in the web-page where you want to put drag and drop UI:
    <form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
</form>
    • Copy below code in upload.php file:
    <?php
$ds = DIRECTORY_SEPARATOR;
$upload_path = "uploads"; 
if($_FILE["file"]) {
    move_uploaded_file($_FILES["file"]["tmp_name"], $upload_path .$ds. $_FILES["file"]["name"]);
}