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 !!}