Laradrop

A Larvel 5 and Dropzone.js File Manager

Github Packagist

/** Include all necessary dependencies. **/
<link  href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" >
<link href="//fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">                                
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/vendor/jasekz/laradrop/js/enyo.dropzone.js"></script>
<script src="/vendor/jasekz/laradrop/js/laradrop.js"></script> 

/** Simple as one line of code. **/
<div class="laradrop" laradrop-csrf-token="{{ csrf_token() }}" ></div>   

$(document).ready(function(){		

  $('.laradrop').laradrop({
  
    onInsertCallback: function (src){
      alert('File '+src+' selected.  Please implement onInsertCallback().');
    },
    
    onErrorCallback: function(jqXHR,textStatus,errorThrown){
      alert('An error occured: '+ errorThrown);
    },
    
    onSuccessCallback: function(serverData){
      // if you need a success status indicator, implement here
    }
}); 

                           
.thumbnail { 
     position:relative; 
     overflow:hidden; 
     background:none; 
     border-top:none; 
     border-bottom: none; 
     border-left: 15px solid #fff; 
     border-right: 15px solid #fff; 
} 
 
.well {
    background-color:#fff;
}

.progress {
    height:5px;
}
 
.laradrop-folder{
    background:#999;
}

.laradrop-folder img{
    cursor:pointer;
}

.laradrop-droppable-highlight {
    background:#F7ED9C;
}

.laradrop-droppable-hover {
    background:#73A268;
}

.laradrop-thumbnail .move {
    cursor:move;
}

.laradrop .text-info, .laradrop h4 {
    font-size:10px;
}

.laradrop-breadcrumbs-container {
    position: relative;
    top: 10px;
}

.laradrop-breadcrumbs {
    padding:5px;
    font-size:18px;
}

.laradrop-breadcrumbs .arrow {
    padding: 0 10px 0 15px;
}

.laradrop-thumbnail .well {
    background-color:#FFFCFC;
    height:300px;
 }
 
 .laradrop-container button {
    padding:10px;
    font-size:18px;
 }
 
 .laradrop-previews .dz-image-preview {
    margin-bottom:15px;
 }


  
/** NOTE:  This is the default template and nothing needs to be done to use it out-of-the-box.
However, if you'd like to make modifications, template files can be easily overridden by placing them
in your 'views' directory. (https://laravel.com/docs/5.2/packages#views) **/
                                
                                
//-- resources/views/vendor/laradrop/fileContainer.blade.php --//                       

<div class="laradrop-thumbnail thumbnail laradrop-droppable col-md-2 laradrop-draggable "  file-id="[[id]]">
    <div class=" well" >
        <h4 class="laradrop-filealias" >[[alias]]</h4>
        <p class="text-info">[[type]] / [[updated_at]]</p>
        <p>
            <a href="#" onclick="return false;" class="label label-success laradrop-file-insert" rel="tooltip" title="{{ trans('laradrop::app.select') }}">{{ trans('laradrop::app.select') }}</a>
            <a href="{{ route('laradrop.index') }}" class="label label-danger laradrop-file-delete" rel="tooltip" title="{{ trans('laradrop::app.delete') }}">{{ trans('laradrop::app.delete') }}</a>
            <a href="#" onclick="return false;" class="label label-warning move" rel="tooltip" title="{{ trans('laradrop::app.move') }}">{{ trans('laradrop::app.move') }}</a>
        </p>
        <img src="[[fileSrc]]" alt="[[alias]]" >
    </div>
</div>


  
//-- resources/views/vendor/laradrop/mainContainer.blade.php --//                       

<div class="laradrop-container" id="laradrop-container-[[uid]]" >
    
    <button type="button" class="btn btn-default btn-add-folder">{!! trans('laradrop::app.addFolder') !!}</button>
    <button type="button" class="btn btn-default btn-add-files">{!! trans('laradrop::app.uploadFiles') !!}</button>
    <button type="button" class="btn btn-success start" style="display:none;" >{!! trans('laradrop::app.startUpload') !!}</button>
       
    <div class="laradrop-breadcrumbs-container"></div><hr>
    <div class="laradrop-previews" ></div>
    <div class="laradrop-body" ></div>
</div>


  
//-- resources/views/vendor/laradrop/previewContainer.blade.php --//                       

<div class="files">
    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" >
        <div class="progress-bar progress-bar-success"  data-dz-uploadprogress></div>
	</div>
	<div id="template" class="file-row">
        <div>
            <p class="name" data-dz-name></p>
            <strong class="error text-danger" data-dz-errormessage></strong>
        </div>
        <div>
            <p class="size" data-dz-size></p>
        </div>        
        <button data-dz-remove class="btn btn-danger btn-xs cancel">Cancel</button>
    </div>
</div>