How to make JQuery file upload plugin work with no files selected?

Question

I know this question has been asked before and there is no satisfactory answer given. I'm using sails.js for developing a website.

I have a form with some text fields along with file upload option (for which I have used JQuery file upload plugin). But if no files are chosen and only the text fields are entered, the submit does not proceed further.

This is my main.js submit function:

$(function () {
    'use strict';
var propertyId = document.getElementById("helper").getAttribute("data-name");
var fileCount = 0, fails = 0, successes = 0;
    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        //url: 'server/php/'
        singleFileUploads: false,
        url: '/admin/property/'+propertyId+'/pictures/upload'
    })

And this is my form:

<form id="fileupload" action="/admin/property/<%=propertyId%>/pictures/upload" method="POST" enctype="multipart/form-data">
        <noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
        <div class="row fileupload-buttonbar">
            <div class="col-lg-7">
                <label>Stage Title:</label>
                    <input class="form-control" type="text"  name="stageTitle"/>
                    <br>
                <label>Start Date:</label>
                    <input class="form-control" type="text" name="startDate"/>
                    <br>
                <label>End Date:</label>
                    <input class="form-control" type="text" name="endDate"/>
                    <br>
                <label>Description:</label>
                    <textarea class="form-control" type="text" name="description"> </textarea>
                    <br>
                <label>Pictures:</label><br>
                    <span class="btn btn-success fileinput-button">
                        <span>Add Images...</span>
                        <input type="file" name="files" id="files" multiple>
                    </span>

                    <button type="reset" class="btn btn-warning cancel">
                        <span>Cancel upload</span>
                    </button>

            <span class="fileupload-process"></span>
            </div>
            <div class="col-lg-5 fileupload-progress fade">
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                </div>
                <div class="progress-extended">&nbsp;</div>
            </div>
            <button type="submit" class="btn btn-primary start">
                    <span>Save</span>
        </div>

        <table id="pictureTable" role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

            </button>
    </form>

How to make the library work with no files chosen? Other option is to make two separate submits, one for text fields and one for files. But it will be very messy and I don't prefer that way. Any guidance will be appreciated.

Wait. Why? Do you want to upload a specific file if the person does not select it or just skip the upload? — Mr.Web, Aug 12 '15 at 22:59
If no files are selected, I still want to submit the form with other input fields. So basically, I just want to skip the upload but create the record with other inputs. — A.R.K.S, Aug 12 '15 at 23:02
If it seems like no one can help, give this chat room for Sails.js a try. https://gitter.im/balderdashy/sails — Travis Webb, Aug 14 '15 at 20:52
Possible duplicate of [Optional File Upload with Blueimp jquery file upload plugin](https://stackoverflow.com/questions/15119386/optional-file-upload-with-blueimp-jquery-file-upload-plugin) — fanfavorite, Oct 23 '17 at 17:35
Yes I did read it, but I added an answer and they wouldn’t let me have it on this question too. — fanfavorite, Oct 24 '17 at 02:25

score 1 · Answer 1 · answered Aug 12 '15 at 23:06

Just check if the file is set:

if($('#fileupload').val() != ""){
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        //url: 'server/php/'
        singleFileUploads: false,
        url: '/admin/property/'+propertyId+'/pictures/upload'
    });
}

score 0 · Answer 2 · edited May 23 '17 at 12:06

I tried the above but it messes with the progress bars somehow when files are actually uploaded.

However I found a way out of this.

Setting SingleFileUploads to false didn't help much with JQuery file uploader since there seems to be a bug as discussed here. So I set that thing back to true.

I separated the inputs into two separate forms - one for text fields input and one for files(which goes through JQuery file uploader). For the text fields form, I kept a visible button the user can click. For the other one, I hid the button. So once the user clicks the visible button, I submit only the text input and create a database record in the backend(this is done using an AJAX call) and in the success field of AJAX call, I .click() the hidden button if the file count is more than 0. So that way, it doesn't even enter the main.js in case no files are there to upload.

How to make JQuery file upload plugin work with no files selected?

2 Answers2