Laravel - Upload File to Database

Question

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

Donkarnash · Accepted Answer · 2016-12-05 05:11:46Z

3

You need to give the file input field a name like

<form enctype="multipart/form-data">
        <div class="form-group">
            <input id="file-5" name="image" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#">
        </div>
</form>

Then in your controller method you can access the uploaded file and get the various properties

**EDIT**
$destinationPath = storage_path().'/uploads/';
or
$destinationPath = public_path().'/uploads/';

//storage_path will give the fully qualified path to the storage folder
//public_path will give the fully qualified path to the public folder
//uploads - is the folder name where you want to store the user uploaded files, could be any name you prefer.
**EDIT end**

// Retrieving An Uploaded File
$file = Input::file('image');

// Determining If A File Was Uploaded
if (Input::hasFile('image'))
{
    //
}

// Determining If An Uploaded File Is Valid
if (Input::file('image')->isValid())
{
    //
}

// Moving An Uploaded File
Input::file('image')->move($destinationPath);
Input::file('image')->move($destinationPath, $fileName); //$filename is the name by which you want to store the file - change the name if required by by app.

// Getting Requested file path
$path = Input::file('image')->getRealPath();

// Getting Original name of the file
//**Edit** - gives the original filename as on uploading user's system. **Edit end**
$name = Input::file('image')->getClientOriginalName();

// Getting uploaded File extention
$extension = Input::file('image')->getClientOriginalExtension();

// Getting Size of the file
$size = Input::file('image')->getSize();

// Getting MIME Type of uploaded file
$mime = Input::file('image')->getMimeType();

You can then store the properties in your database either through a Model corresponding to the database table in your case lamanInformasi or using query builder directly to the database table with raw queries.

Have a look at laravel documentation:
Database - query builder
Eloquent - model approach

You can use Laravel's filesystem to retrieve the files from a folder and prepare a list view for users to see the files available for download.

Then use can leverage Laravel's Response Download to provide the download functionality for the users.

Hope this helps.

edited Dec 5, 2016 at 5:11

answered Dec 4, 2016 at 14:47

Donkarnash

12.9k5 gold badges30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Grace Michelle Over a year ago

So, I don't need uploadUrl in the <script>? What are the values of $destinationPath and $fileName? What is the difference of $fileName and $name? Do I have to use insert method inside your if statement above? If yes, then maybe like this: DB::table('lamanInformasi')->insert(['isi' => $name]));. Sorry if I asked too many question, I am really confused

Donkarnash Over a year ago

I don't suggest anything about the bootstrap file input plugin. The $destinationPath is the path to the folder where you want to store the uploaded files. $filename is the name by which you want to store the uploaded file. $name is the original file name as on uploading user's system - see EDITs in my answer. Typically I would create a model LamanInformasi corresponding to the database table with atleast the - name,size, mime-type and original-name fields. In the controller method within the if I would get all properties corresponding to the fields and perform db insert here.

Donkarnash Over a year ago

Let me know if you need a step by step tutorial kind of thing, I may not be able to do it immediately but can write up something and flip the link to you.

Grace Michelle Over a year ago

I think step by step tutorial will be better for me to understand

Donkarnash Over a year ago

Okay, give me some time, will write up the steps and flip the link to you.

|

Collectives™ on Stack Overflow

Laravel - Upload File to Database

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related