Twitter બુટસ્ટ્રેપ સાથે ડ્રોપબોક્સ ફાઇલ અપલોડર Dropbox File Uploader With Twitter Bootstrap

Jul 01, 2020

A few weeks ago, Dropbox introduced a neat new feature – the Dropbox Chooser. By embedding it into your website, you give users a button with which they can attach files from their online storage.

Today we are going to use this feature to create a simple application that allows people to attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result. Additionally, we will make use of Twitter Bootstrap to show dialog windows, and PHP on the backend for the actual photo cropping.

The HTML

To start, here is the HTML document we will be working with. In the head, I am including the stylesheets for bootstrap, the Jcrop plugin and our custom CSS file. In the footer, we have the Dropbox JavaScript library, jQuery, Bootstrap, Jcrop and script.js, which we will be writing in the next section.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Dropbox File Uploader With Twitter Bootstrap | Tutorialzine </title>

        <!-- The stylesheets -->
        <link rel="stylesheet" href="assets/css/bootstrap.min.css"  />
        <link rel="stylesheet" href="assets/Jcrop/jquery.Jcrop.min.css" />
        <link rel="stylesheet" href="assets/css/styles.css"  />
    </head>
    <body>

        <div id="main">

            <input type="dropbox-chooser" name="selected-file" id="db-chooser"
                        data-link-type="direct" class="hide" />
            <div id="content"></div>
            <button class="btn btn-inverse hide" type="button"
                        id="cropButton">Crop Image</button>

            <!-- Bootstrap Modal Dialogs -->

            <div id="cropModal" class="modal hide fade" role="dialog"
                        aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×</button>
                    <h4>Your cropped image</h4>
                </div>
                <div class="modal-body center"></div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>

            <div id="errorModal" class="modal hide fade" role="dialog" aria-hidden="true">
                <div class="modal-header">
                    <h4></h4>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-danger" data-dismiss="modal"
                        aria-hidden="true">OK</button>
                </div>
            </div>

            <div id="progressModal" class="modal hide fade" role="dialog" aria-hidden="true">
                <div class="progress progress-striped active">
                    <div class="bar" style="width: 100%;"></div>
                </div>
            </div>

        </div>

        <!-- JavaScript Includes -->
        <script src="https://www.dropbox.com/static/api/1/dropbox.js"
            id="dropboxjs" data-app-key="z4ylr6z1qlivll4"></script>
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/Jcrop/jquery.Jcrop.min.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

In the body of the document, we also have the markup which Twitter Bootstrap will use to display the modal dialogs. We have three modals with unique IDs: #cropModal#errorModal and #progressModal. They are displayed with simple jQuery function calls (more on that in a moment).

Familiarize yourself with the markup as it is standard for Bootstrap. Modals may have optional headers, bodies and footers, which are styled appropriately. You can put whatever HTML you want in them. By specifying classes, you can alter the behavior of the dialogs. The aria-hidden attributes are there to hide the content from screenreaders. Buttons have the data-dismiss="modal" attribute, which tells bootstrap that it should bind an event listener on them and close the modal window when they are clicked.

0 0 votes
Article Rating
guest
0 Comments
Inline Feedbacks
View all comments