Uploader

A Laravel library to provide file upload utilities. A Javascript library builds a complete file upload widget with upload button, drag-and-drop zone, progress bar and result builder. A controller is available to manage uploaded files. Current version: 3.0.4. Project on GitHub. Project on Packagist. This demosite sources available here.

On this site, you can only upload files up to 1MB and having extensions png,jpg,jpeg,gif,txt. Files will be destroyed after 10 minutes.

Complete uploader

This uploader uses a result plugin which displays results in a nice list. File name is changed automatically and files cannot be overwritten, i.e. a new file name is generated. All you need to know about file processing available here.

In your controller create an instance of UploaderHelper and pass the variable to the view.


$uploader = UploaderHelper::init(
  'uploaderdiv3', //uploader id
  'Uploader',//label
  route('fileupload2'), // route for file prodessing
  [
    'csrfrefreshroute' => route('refreshcsrf'), // route called if csrf token must be reloaded
    'resultclass' => 'UploaderResult', // class of object containing files list
    'multiple' => true, // multiple files can be uploaded
    'acceptable_mimes' => 'png,jpg,jpeg,gif,txt',  // comma-separated list of valid extensions
  ], [ // additional parameters transmitted to upload script
    'article_title' => "l'ami",
    'article_id' => 40
]);
return view('template', ['uploader' => $uploader]);

Javascript code to be inserted in blade template to process file uploade method results:


<script type="text/javascript">
  /* extends basic result object*/
  UploaderResult = {
    baseurl: null,
    process: function(result){// sends data to second UploaderResult
      if (result.ok){
        var self = this;
        self.baseurl = result.baseurl; //retrieve base url from ajax result
        jQuery.each(result.files, function(i, file) {
          self.preparedisplay(file, i);
        });
      } else { // display error
        this.uploader.notify(
          this.uploader.options.alerterrorclass,
          result.message
        );
      }
    },
    preparedisplay: function(res, i){ //prepares data to diplay in result div
      var url = this.baseurl + res.filename; // builds complete url.
      var thumb = this.dothumbnail(res.ext, url); // build image thumbnail or insert file icpm
      var id = this.uploader.divid;
      if (res.pseudo_file_id !=  undefined){
        id += '_' + res.pseudo_file_id;
      }else{
        id += '_' + i;
      }
      // copy button
      var cpbtn = jQuery('<i></i>')
         .attr('title', 'Copy')
         .addClass('far fa-copy uploaderresultbtn copybtn')
         .attr('id', id + '_copy')
         .attr('data-clipboard-text', url);
      //delete button
      var delbtn = jQuery('<i></i>')
            .attr('title', 'Delete')
            .addClass('far fa-trash-alt uploaderresultbtn')
            .attr('id', id + '_del')
            .on('click', {obj: this}, function(e){
              e.data.obj.uploader.uploaddiv.show();
              //here yiu shoud call an ajax script to delete file
              jQuery(this).parents('div.uploadres').remove();
            });
      var p = jQuery('<p></p>');
      if (res.pseudo_file_id !=  undefined){
        p.html('pseudo file id: ' + res.pseudo_file_id);
      }
      p.append(cpbtn)
          .append(delbtn)
      var content = jQuery('<div></div>')
          .append(jQuery('<h5></h5>').addClass('mt-0 mb-1').html(res.filename))
          .append(p);
      this.addfiletolist(thumb, content); // display file in list
    }
  }
  // extend base result object
  UploaderResult = jQuery.extend({}, UploadresultProcessor, UploaderResult);
  /* adds copy function to buttons that have copybth class */
  new Clipboard('.copybtn', {
      text: function(trigger) {
          return jQuery(trigger).attr('data-clipboard-text');
      }
  });

  jQuery(document).ready(function(){
    // set uploader values in page instead of on init object
    jQuery('#uploaderdiv3').data('uploader').setpath('/uploads');
    jQuery('#uploaderdiv3').data('uploader').setstoragename('public'); // file storage name, see Laravel doc
    jQuery('#uploaderdiv3').data('uploader').setfilepattern('toto'); // file pattern to automatic file name build
    jQuery('#uploaderdiv3').data('uploader').setmaxsize(1024);
    jQuery('#uploaderdiv3').data('uploader').setmimes('jpg,png,gif');
  	jQuery('#uploaderdiv3').data('uploader').setoverwrite(0); // file will note be overwritten if exists but a new
                                       // file name will be generated
  });
</script>

Then just insert the variable in the appropriate section in your view: {!! $element !!}

Demo