These are what I have :
Database table named lamanInformasi
, which has field named isi
.
This is what I want :
User can upload multiple document or image files, and the files will be stored to database. The file names will be saved to isi
field, and the files itself will be saved to a folder named propic
. User also can show the file they want on the website and download it.
This is what I have done :
I used bootstrap plugin to input file. I used this source. I just used files inside the js
and css
folder. This is my code:
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../js/fileinput.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container kv-main">
<div class="page-header">
<h1>Upload Files</h1>
</div>
<form enctype="multipart/form-data">
<div class="form-group">
<input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#">
</div>
</form>
</div>
</body>
<script>
$("#file-5").fileinput({
uploadUrl: "{{ url('lamanInformasi') }}",
uploadAsync: false,
previewFileIcon: '<i class="fa fa-file"></i>',
allowedPreviewTypes: 'image',
previewFileIconSettings: {
'doc': '<i class="fa fa-file-word-o text-primary"></i>',
'xls': '<i class="fa fa-file-excel-o text-success"></i>',
'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
'jpg': '<i class="fa fa-file-photo-o text-warning"></i>',
'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
'htm': '<i class="fa fa-file-code-o text-info"></i>',
'txt': '<i class="fa fa-file-text-o text-info"></i>',
'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
'mp3': '<i class="fa fa-file-audio-o text-warning"></i>',
},
previewFileExtSettings: {
'doc': function(ext) {
return ext.match(/(doc|docx)$/i);
},
'xls': function(ext) {
return ext.match(/(xls|xlsx)$/i);
},
'ppt': function(ext) {
return ext.match(/(ppt|pptx)$/i);
},
'zip': function(ext) {
return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
},
'htm': function(ext) {
return ext.match(/(php|js|css|htm|html)$/i);
},
'txt': function(ext) {
return ext.match(/(txt|ini|md)$/i);
},
'mov': function(ext) {
return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
},
'mp3': function(ext) {
return ext.match(/(mp3|wav)$/i);
},
}
});
</script>
This is my question
How to save the files to database? How to show the files on the website? How to make the files become downloadable? Thanks