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.

Hidden uploader

This last example shows an uploader which uploads a single file. When a file has been uploaded, uploader is hidden. In this example, we show a file already uploaded into website. This file could be retrieved from database by an Ajax script. Then you can delete file - the uploader is shown again - and upload a new file. 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(
  'uploaderdiv4', //uploader id
  'Uploader',//label
  route('fileupload'), // route for file prodessing
  [
    'csrfrefreshroute' => route('refreshcsrf'), // route called if csrf token must be reloaded
    'hidden' => true, // uploader is invisible when inited
    'resultclass' => 'UploaderResult',
    'acceptable_mimes' => $acceptable,  // comma-separated list of valid extensions
    'maxfilesizek' => 1024, // max file size
    'multiple' => true, // multiple files can be uploaded
    'path' => '/uploads', // folder in storage where files must be uploaded
    'storagename' => 'public', // file storage name, see Laravel doc
]);
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(){
    // insert an exampla file in hidden uploader result div
      var proc = jQuery('#uploaderdiv4').data('uploader').getresultprocessor();
      proc.baseurl = 'http://sebastien.lhaire.org/img/';
      proc.preparedisplay({filename: "seb.jpg", ext: "jpg"}, 1);
  });
</script>

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

Demo