Upload multiple files using Laravel 5.4

Screen-Shot-2017-06-22-at-17.09.51

Here is a recipe how to upload multiple files using Laravel 5.4. Both the random filename, and the original file name are stored in the database. In this example we are making a new directory to every contact.

 File upload and download controller

public function store(ContactFileStore $request, Contact $contactid) {

        $files = $request->file('files');

        foreach ($files as $file) {

            $filename = $file->store('contactfiles/' . $contactid->id);
            Contactfile::create([
                'contact_id' => $contactid->id,
                'filename' => $filename,
                'name' => $file->getClientOriginalName(),

            ]);

        }
        flash('Filer ble lastet opp til kontakt')->success();
        return back();

    }

    public function download(Request $request, Contact $contactid) {

        $orginalFileName = Contactfile::where('id', $request->id)->get()->implode('name', '');

        return response()->download(storage_path('app/' . $request->filename), $orginalFileName);
    } 

Request validation 

public function rules()
    {
        {
            $rules = [
                'files'          => 'required|max:255',
            ];

            $nbr = count($this->input('files')) - 1;
            foreach(range(0, $nbr) as $index) {
                $rules['files.' . $index] = 'mimes:jpeg,bmp,png,pdf,doc,docx,xls,xlsx,zip,mpeg,mp4,cvs|max:10000';
            }

            return $rules;
        }
    } 

​Blade

 <form method="post" action="/contact/file/{{ $file->id }}">
                                <a href="/contact/{{$contact->id}}/download?filename={{ $file->filename }}&id={{ $file->id }}" class="btn btn-blue">Last ned</a>
                               (add crfs and post metodh here)
                                <a class="btn btn-red" type="button" data-toggle="modal" data-target="#confirmDelete">Slett</a>
                            </form> 

 Style bootstrap button and avoid submitting empty file

<script>
    $(function() {

        // We can attach the `fileselect` event to all file inputs on the page
        $(document).on('change', ':file', function() {
            let input = $(this),
                numFiles = input.get(0).files ? input.get(0).files.length : 1,
                label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
                input.trigger('fileselect', [numFiles, label]);
        });

        // We can watch for our custom `fileselect` event like this
        $(document).ready( function() {
            $(':file').on('fileselect', function(event, numFiles, label) {

                let input = $(this).parents('.input-group').find(':text'),
                    log = numFiles > 1 ? numFiles + ' filer er valgt' : label;

                if( input.length ) {
                    input.val(log);
                } else {
                    if( log ) alert(log);
                }

            });
        });

    });

    $('div.alert').not('.alert-important').delay(3000).fadeOut(350);

    $("#btnUploadx").click(function (e) {

        let file = $("#fileupload").val();  //Fetch the filename of the submitted file

        if (file == '') {    //Check if a file was selected
            //Place warning text below the upload control
            $(".errorDiv").html("Vennligst velg en fil først.");
            e.preventDefault();
        }
    });
</script> 
Tips til Praha og hva du bør unngå
Aksjeselskap får et enklere regelverk

Relaterte artikler

 

Kommentarer

Ingen kommentarer
Eksisterende bruker? Log inn her
Besøkende
lørdag 16. februar 2019
For å opprette bruker, vennligst fyll inn brukernavn, passord og navn.