Use Dropzone.js to create an image upload form

A. What Will I Learn

What is a Dropzone.js
How to use Dropzone.js function
Understand about the code needed to use the a Dropzone.js function

B. Requirements

Applications for web editing programming like Notpad, Notpad++, etc.
You already Dropzone.js function.
Get function click her

C. Difficulty

Basic

D. Tutorial Contents

1. Image Upload

The upload process is a process to input an anau data information on a web display. One of the most important uploading process is the process of uploading images, almost all web have this feature even web e-comerce and web gallery desperately need this because almost 90 percent data that is input into the web.

In addition, Uploading images is a very frequent activity with interesting websites of course have interesting images as well. Because through images, things that can not be released through words can be distributed with an explanation of the image. Like your example is a person who likes to travel, and want to return to the articles and pictures as decorate our articles on the website. Therefore the process of uploading images can not be from a web.

2.Drop Zone.js

Speaking of image uploads, there is a jquery function that can help you better upload an image with, the name of the jequeri function is Dropzone. Js. Dropzone.js is a function that helps users to upload images,This function changes the input "type" type "file" will look more dynamic.The first two ways are by clicking on the dropzone area and navigating to the saved file location and the second by
dragging the image to be uploaded to the dropzone area location.

Dropzone.js has some advantages such as,

Given customization of CSS and display
Make Thumbnails on the images we upload later
Upload Multiple files, so we can upload as much as possible into the folder
Have a Callback event so we know which files we managed to upload later

To use DropZone.js we need two files, ie css file and html file, secabagi example i will create css file that i named style.css and html file that i named index.html.

Style.css
Style.css function is a css function that we create to create a view of the Dropzone.js look more interesting, DropZone.js view is very influential from the style.css result that we make. code for style.css is as follows:

*{
    margin: 0;
    padding: 0;
}
body {
    text-align:center;
    background-color:#FA8072;
    font-family:Arial, Helvetica, sans-serif;
    font-size:100%;
    color:#666;
    font-style:italic;
  }
 .wrap{
    background: #FFE4C4;
    width:760px;
    margin:30px auto;
    border: 4px dashed #D2691E;
    border-radius:4px;
    padding: 20px 5px;
 }
 h1 {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:170%;
    color:#DC143C;
    font-style:italic;
    text-decoration:none;
    font-weight:100;
    padding: 10px;
 }

b. index.html
In addition to the style.css function for creating image input using Dropzone.js we also need the index.html file, the index.html file is used to combine the css function and java script functions required by Dropzone.js. other than that html file also works for media or place where we will write text from dropzone which will be displayed in browser screen. Examples of required index.html file to write Dropzone.js are as follows.

<html>
<head><title>Drop Zone.Js<title></head>
    <script src="dropzone-master/dist/dropzone.js"></script>
    <link rel="stylesheet" href="dropzone-master/dist/dropzone.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
<body>
<div class="wrap">
    <h1> dropzone-master </h1>
    <form action="/file-upload" class="dropzone" id="my-awesome-dropzone">
        <div class="fallback">
            <input name="file" type="file" multiple />
        </div>
    </form>
</div>
</body>
</html>

3. Explanation of the code

<script src="dropzone-master/dist/dropzone.js"></script>

The function of the src script is to call the library provided by the dropzone.js function, this function is the upload image function where the image upload process can be done by duacara by clicking the image or by dragging the drawing area of the dropzone.js.

<link rel="stylesheet" href="dropzone-master/dist/dropzone.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />

link This function is intended to call the file style.css and dropzone.css, style.css function to beautify the appearance of the main web, beautiful or bad web depends on the style.css we create. whereas this dropzone.css is a function provided by this dropzone function Aimed to declare the dropzone display, so that the appearance of the dropone input form looks more interesting.

<div class="fallback">

This function aims to display the location to insert an image

4.Running DropZone.Js
After the page style.css and index.html in one file with Dropzone.js function we can access it using web browser. Users will not see script code run by web browaser,
Users will only see the location where the user enters the image to use it user can click on the area of inserting the image or dragging the image to that location.

E. Curriculum

To know more about dropzone.js-master you can visit:
To demo of this tutorial you can dropzone.js
Dropzone.js function github

Posted on Utopian.io - Rewarding Open Source Contributors