Laravel 5: Check Image Type Validation Only If Uploaded

Question

I'm creating a form in Laravel 5 which has a product name, product main image and secondary image. Both the image field and secondary field are optional.

<div class="form-group {{ ($errors->has('title')) ? 'has-error' : '' }}">
    <label>Title *</label>
    <input class="form-control validate[required]" name="title" type="text" value="{{ Input::old('title') }}">
    {{ ($errors->has('title') ? $errors->first('title') : '') }}
</div>
<div class="form-group">
    <label for="featured_image">Cover Image
        <small>(optional)</small>
    </label>
    <input type="file" placeholder="" id="featured_image" name="featured_image">
    <small class="description"> Maximum file size: 2 MB.</small>
    {{ ($errors->has('title') ? $errors->first('featured_image') : '') }}
</div>
<div class="form-group">
    <label for="gallery_images">Gallery Images
        <small>(optional)</small>
    </label>
    <input type="file" placeholder="" id="gallery_images" name="gallery_images[]" multiple="">
    <small class="description">Maximum file size: 2 MB.</small>
    {{ ($errors->has('title') ? $errors->first('gallery_images') : '') }}
</div>

My validation in the request file is:

public function rules()
{
    return [
        'title' => 'required|min:5',
        'featured_image' => 'mimes:jpeg,png,jpg|max:2048',
        'gallery_images' => 'mimes:jpeg,png,jpg|max:2048'
    ];
}

But it always checks for the image upload whether it is uploaded or not. Which is incorrect, the image type was checked only when images were upload else not.

Thank you.

Because the server has no information about the image till it's uploaded, the script can not do the checks you want. The best way to approach this is using javascript as that runs on the client to do the check before upload. — Alvin Bakker
Alvin I want server side validation also that must check the image type only if anything is uploaded. — HKumar
Either do it client side or upload to /tmp , do the checks and if fails remove from /tmp. But to be honest, what if a visitor uploads a very big file and after the upload he/she gets to hear it's the wrong format. So it's better to do the check client side instead of going through the whole upload process. See answer how to do this easily... — Alvin Bakker

Alvin Bakker Alvin Bakker · Accepted Answer · 2015-10-31T15:04:55

You should do these checks before upload to get best result. Below example uses the ajax form jquery plugin

$(document).ready(function() {
    var options = {
        target: '#output',
        beforeSubmit: beforeSubmit,
        uploadProgress: OnProgress,
        success: afterSuccess,
        resetForm: true
    };
    $('#my-upload-form').submit(function() {
        $(this).ajaxSubmit(options);
        return false;
    });
});

function OnProgress(event, position, total, percentComplete) {
    // Some in progress thingy
}

function afterSuccess() {
    // OK msg
}

function beforeSubmit() {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        if( !$('#image').val()) {
            return false
        }

        var fsize = $('#image')[0].files[0].size;
        var ftype = $('#image')[0].files[0].type;
        switch(ftype) {
            case 'image/jpeg': case 'image/pjpeg':
            break;
            default:
                // Input not supported
                return false
        }

        if(fsize>10485760) {
            // Input too large
            return false
        }
    } else {
        // Upgrade browser msg
        return false;
    }
}

function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    if (bytes == 0) return '0 Bytes';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}

Laravel 5: Check Image Type Validation Only If Uploaded

1 Answers