Search code examples
jquery-file-uploadblueimp

Blue Imps jQuery file upload send files with form like normal field


Is it possible to send file with form as normal file upload? When I check a file field it is always empty, and I need to send it with form data in one call. IS that possible?


Solution

  • There might be better answers out there, but I ended up solving this by following steps.

    1. Having 2 forms on the page. One for file upload and one for other form data.
    2. Format both forms using CSS so that user gets look and feel of one form.
    3. Have only one div (which looks like button) to submit. Hide the actual form's submit button, if you are using them (I don't. Because I preprocess data and then send by ajax)
    4. Once user submits forms (by clicking the dummy button), Using JS programatically click the file upload button.
    5. Optional Once that call is finished, if there are no errors only then continue.
    6. Submit the form with other form data.

    The advantage I had in this approach was that I could have more control over user's form data as well as my file upload's settings. Because I had some settings (like max number of files and max file size) were dependent on user's form entry.