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

Upload result processing

The uploader class sends results either to a result processor or to an error function which displays the error message. The default error function displays messages in an alert div. You can write your own error display function and set value errorfn in config file. The error function must have only one parameter which contains the error message.

The result processor is a class which can be extended and defined in uploader parameter resultprocessor. Class UploadresultProcessor in file upload.js processes uploader files and build one or more file containers.

  • init(uploader) inits the result processor and links it with the uploader instance in the class property uploader.
  • buildresdiv(id, myclass) builds a <div> to contain file list.
  • process(res) takes result of the upload function and builds instance(s) of file container class (see above); it also stores a file list in class property filelist.
  • countFiles() counts files in class property filelist. This information can be used by form validation.
  • removefile(pos) removes files from list in pos position.

Files are displayed in <div> instances which are built by UploadedFileContainer or other similar classes. The class name is defined in uploader parameter filecontainer. File container classes must have 2 methods:

  • init(processor) inits the file container and links it with the result processor instance in the class property processor (and therefore to the uploader); property idx contains index of file position in result processor file list, used when you delete files.
  • build(file, info) builds a <div> to contain file. Parameter file contains file information returned by file upload route; parameter info contains general information returned by file processor.

In above mentionned class, we also provide the useful method buildurl(file, info), which returns complete file URL and can be used in another class that extends that basic class. Rules are following:

  • If the file object returned by file upload route contains a parameter url, we return this value.
  • If general information in parameter info contains a baseurl value, we build the file url with this value..
  • If property baseurl is defined in file processor instance, we build the file url with this value..
  • If option baseurl is defined in uploader parameters, we build the file url with this value..

Next to this very basic class, we also provide class UploadedFileContainerExt in file uploaderResult.js which builds a <div> with a thumbnail describing file type (file icon or image thumbnail), file information and two buttons, one to copy file url and the other to delete file by calling route defined in uploader parameter delurl and removing file in file result container filelist.