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