Uploading images using FancyFileUpload and regular form submit without using Ajax

I like the interface of FancyFileUpload that's why I'm try to implement it on my already existing form submit. The existing form submit works just fine and can save data into database and upload files to the server. (I'm using laravel by the way).

So here's what I'm trying to accomplish. I want users to select files using FancyFileUpload, but I want to submit the form data in a normal way without using ajax or js. The problem is, no files are being uploaded in the server. When FancyFileUpload initialized, it seems the form could not detect any files added by the user, that's why file input shows null. But if I remove FancyFileUpload, the form works just fine.

Here's my form.

<form id="postForm" class="row" action="" method="POST" enctype="multipart/form-data">
@csrf
    <div class="mb-4">
        <div class="mt-3">
            <textarea class="form-control" rows="7" name="body" placeholder="Write something..."></textarea>
        </div>
        
        <div class="mt-3">
            <label class="mb-2">Upload Photos</label>
            <input class="fileUp fileup-sm" type="file" name="photo_list[]" accept="image/png, image/gif, image/jpg, image/jpeg" multiple>
        </div>
    </div>
    <div class="col-sm-12">
        <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
    </div>
</form>

Javascript:

 $(document).ready(function() {
        // Initialize FancyFileUpload
        $('.fileUp').FancyFileUpload();

        // Before form submission, reinitialize FancyFileUpload
        $('#postForm').submit(function() {
            $('.fileUp').FancyFileUpload();
        });
    });

No issues on server side because is working just fine if FancyFileUpload is disabled. Thanks a lot in advance.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/oHXehka
via IFTTT