In my previous article Jquery cloud storage file picker i have explained how we can add a file attachment from cloud service like dropbox and google drive . Now i have added another option which is file upload . So that user can also attach files from their local system as well as from Dropbox and google drive . To implement this i have used blueimp file uploader . More information about this file uploader is here .

To this first of all we need to add jquery files

<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="jquery.js"></script>

now we need to add some html part into the code to enable file upload .

<div id="attachments-wrapper" class="text-placeholder border-none">
	<div id="progress" class="progress">
		<div class="progress-bar progress-bar-success"></div>
	</div>
	<input style="display:none" id="fileupload" type="file" name="files[]" multiple> 
   <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="1" class="link" onclick="Attachlocal()" id="pick">From Local Computer</a></li>
         <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>

Now create a function Attachlocal to trigger the file selector and handle the upload event and submit the ajax request to upload the file .

function Attachlocal() {

    $('#fileupload').trigger('click');
}

$(function() {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = 'fileupload.php';
    $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            done: function(e, data) {
                $.each(data.result.files, function(index, file) {
                    var file = "<div class='attach'><i class='ico-delete link removeattach'></i><a target='_blank' href='" + file.url+ "'>" + file.name + "</a></div>"
                    $('#attachments').append(file);
                    $('#progress').hide();
                    $('.prgresscounter').html('');
                    $('#progress .progress-bar').css('width', '0%');
                });
            },
            progressall: function(e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress').show();
                $('#progress .progress-bar').html(progress + '%');
                $('#progress .progress-bar').css('width', progress + '%');
            }
        }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});

this request will send file data to fileupload.php.Now we need to handle the upload request so that we can upload the file . So i have used blueimp UploadHandler.php to upload the file .

<?php 
include_once('UploadHandler.php');
$upload_handler = new UploadHandler();
$options=array('print_response'=>false,'upload_dir'=>'files/uploads/','upload_url'=>'files/uploads/');
$upload_handler = new UploadHandler($options);

your file will save to the specified folder . i’ll create thumbs automatically with full image and it’ll attach the image into div .

http://codingbin.com/wp-content/uploads/2015/12/codingbin.com-demos-cloudattachment-.pnghttp://codingbin.com/wp-content/uploads/2015/12/codingbin.com-demos-cloudattachment--150x150.pngdevidjQueryphpfilepicker,fileuploadIn my previous article Jquery cloud storage file picker i have explained how we can add a file attachment from cloud service like dropbox and google drive . Now i have added another option which is file upload . So that user can also attach files from their local...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