Cloud storage is a place where you can place your files . And now days every user is connected to internet so it can be more convenient and user friendly if user will have an option to pick the file from their Cloud storage. Here are a couple of examples of cloud storage like Google Drive   Dropbox  One drive and many more. So we can simply use there API’s to create a user interface by which user can pick files from there account anytime and anywhere.

  1. To use the google File picker you need to set your application here Google api console
  2. To use Dropbox file picker you need to set your application here Dropbox developer console

To integrate the cloud file picker we need to include following jquery in our file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="Your Api key"></script>
<script src="https://www.google.com/jsapi?key=your Api Key"></script>
<script src="https://apis.google.com/js/client.js?onload=initPicker"></script>

Now will will include some html so that user can click and select files . here is the html code

<div id="attachments-wrapper" class="text-placeholder border-none" data-text="attach files to notes">
   <div class="attach-file dropdown" style="display: block;">
      <a class="btn btn-primary" aria-expanded="true" data-toggle="dropdown" href="javascript:;">
      <span class="icon-ts-files"></span><span class="ts-files link">Select files</span></a>
      <ul class="subattachFile popup dropdown-menu dm-icon pull-left">
         <li><a data-id="2" class="link" id="googlepicker">From google drive</a></li>
         <li><a id="uDropBoxLink" class="link" onclick="noteAttachdb()">From dropbox</a></li>
      </ul>
   </div>
   <div id="attachments"></div>
</div>

Jquery code to init DropBox picker


function noteAttachdb() {
var options = {

// Required. Called when a user selects an item in the Chooser.
success: function(files) {
$.each(files, function(index, file) {

var file = "&lt;div class='attach'&gt;&lt;a target='_blank' href='" + file.link + "'&gt;" + file.name + "&lt;/a&gt;&lt;/div&gt;"
$('#attachments').append(file);
});
},
cancel: function() {

},
linkType: "preview", // or "direct"
multiselect: true, // or true
};
Dropbox.choose(options);
}

 

Google picker javascript code

function initPicker() {
    var picker = new FilePicker({
        apiKey: 'Your Api Key Here',
        clientId: 'Your Client Id here',
        buttonEl: document.getElementById('googlepicker'),
        onSelect: function(file) {
            console.log(file);
            alert('Selected ' + file.title);
        }
    });
}

(function() {
    var FilePicker = window.FilePicker = function(options) {
        this.apiKey = options.apiKey;
        this.clientId = options.clientId;
        this.buttonEl = options.buttonEl;
        this.onSelect = options.onSelect;
        this.buttonEl.addEventListener('click', this.open.bind(this));
        this.buttonEl.disabled = true;
        gapi.client.setApiKey(this.apiKey);
        gapi.client.load('drive', 'v2', this._driveApiLoaded.bind(this));
        google.load('picker', '1', {
            callback: this._pickerApiLoaded.bind(this)
        });
    }

    FilePicker.prototype = {
        open: function() {
            var token = gapi.auth.getToken();
            if (token) {
                this._showPicker();
            } else {
                this._doAuth(false, function() {
                    this._showPicker();
                }.bind(this));
            }
        },

        _showPicker: function() {
            var accessToken = gapi.auth.getToken().access_token;
            this.picker = new google.picker.PickerBuilder().
            addView(google.picker.ViewId.DOCUMENTS).
            setAppId(this.clientId).
            setOAuthToken(accessToken).
            setCallback(this._pickerCallback.bind(this)).
            build().
            setVisible(true);
        },

        _pickerCallback: function(data) {
            if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
                var file = data[google.picker.Response.DOCUMENTS][0],
                    id = file[google.picker.Document.ID],
                    request = gapi.client.drive.files.get({
                        fileId: id
                    });

                request.execute(this._fileGetCallback.bind(this));
            }
        },

        _fileGetCallback: function(file) {
            if (this.onSelect) {
                this.onSelect(file);
            }
        },

        _pickerApiLoaded: function() {
            this.buttonEl.disabled = false;
        },

        _driveApiLoaded: function() {
            this._doAuth(true);
        },

        _doAuth: function(immediate, callback) {
            gapi.auth.authorize({
                client_id: this.clientId + '.apps.googleusercontent.com',
                scope: 'https://www.googleapis.com/auth/drive.readonly',
                immediate: immediate
            }, callback);
        }
    };
}());
http://codingbin.com/wp-content/uploads/2015/11/18s26kg5l8da3jpg.jpghttp://codingbin.com/wp-content/uploads/2015/11/18s26kg5l8da3jpg-150x150.jpgdevidjavascriptjQuerydropbox googledrive filepickerCloud storage is a place where you can place your files . And now days every user is connected to internet so it can be more convenient and user friendly if user will have an option to pick the file from their Cloud storage. Here are a couple of...coding, php, wordpress, yii, cakephp, and  jquery

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request