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> 


<img class="img-circle" id="avatar" src="/avatar.png" />

/** Button trigger modal **/
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Edit Image
</button>

/** Modal **/
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">My Media Manager</h4>
      </div>
      <div class="modal-body">
      
            /** Include laradrop in the modal body **/
            <div class="laradrop" laradrop-csrf-token="8Jp4Wfn72fRYhbh1OqVRpEBA9Ys9s2DuOY4t4mP3" ></div>
            <div class="clearfix"></div>
            
      </div>
    </div>
  </div>
</div>  

$(document).ready(function(){		
jQuery(document).ready(function(){
		
    jQuery('.laradrop').laradrop({
        onInsertCallback: function (src){
          jQuery('#avatar').attr('src', src);
          $('#myModal').modal('toggle');
        },
        onErrorCallback: function(jqXHR,textStatus,errorThrown){
            // if you need an error status indicator, implement here
            alert('An error occured: '+ errorThrown);
        },
        onSuccessCallback: function(serverData){
            // if you need a success status indicator, implement here
        }
    }); 
});
    
  }); 

                           
.modal-dialog {
    width:95%;
}

.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>