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: 4.3.0. 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, doc, rtf, docx, doc, pdf, txt, htm, html, odt, ogg, mp3, aac, raw, flac, au, zip, gz, xls, ods, csv, ppt, odp, avi, mov, mpg, mpeg, mpa, asf, wma, mp2. Files will be destroyed after 10 minutes.

Display file on uploader init

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
  route('fileupload'), // route for file prodessing
    'filecontainer' => 'UploadedFileContainerExt',
    '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
    'delurl' => route('filedelete'), // route to file delete method that will be sent to result processor
    'afteruploadfn' => 'writeinupres',  //callback after file upload success (here it puts results in above text area)
$uploader2 = UploaderHelper::init(
  'uploaderdiv5', //uploader id
  'Uploader 2',//label
  route('fileupload'), // route for file prodessing
    ... no mupliple => true parameter
return view('template', ['uploader' => $uploader]);

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

<script type="text/javascript">
    // insert an example file in hidden uploader result div
      var proc = jQuery('#uploaderdiv4').data('uploader').getresultprocessor();
      // this has been printed by function {!! $uploader->getresultprocessor() !!}
      proc.baseurl = 'https://sebastien.lhaire.org/img/';
      proc.process({ok: true, files:[{filename: "seb.png", file_id: 83667, ext: "png"}]});

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


First example diplays file on init and hides uploader label.

Second example diplays file on init and keeps label visible.

Uploader results