nodejs, html and ajax - uploading a file - [solved]

[kaotkbliss]

I've just started learning nodejs for work and I've been tasked with making a webform that will send the form information to our GMC Inspire application to automatically fill out US postal forms and return the completed pdf.

Everything is working great except now they want to be able to upload a partially filled out pdf and just fill in the rest.

I can get the file to upload and use it, but after the upload, the html waits for a response from the server and if they wait too long to fill out the rest of the form and generate their pdf, the site will time-out. If I have the server send a response, then the site navigates away from the current page, losing all the other information filled out in the form.

I have a bootstrap alert box I use to return errors from the server and wanted to use that to send the response to so the page doesn't refresh and gets a response so it doesn't time-out. Problem is, when I add the ajax script, it breaks the information needed to process the uploaded pdf.

HTML where the  upload is defined

<button 
                            type="submit" 
                            name="8125" 
                            id="8125" 
                            class="btn btn-primary">Generate</button>
                        <div 
                            class="alert alert-danger" 
                            role="alert" 
                            id="8125box" 
                            onclick="$('.alert').hide()">
                            <div id="8125text" style="word-break: break-all"></div>
                        </div>
                    </div>          
                </form>
                <form action="/upload" method="post" enctype="multipart/form-data" id="lithoform" name="lithoform">
                    <input type="file" name="litho" id="litho" />
                    <input type="submit" value="Upload" id="lithobtn" name="lithobtn" />
                </form>
            </div>

HTML script that's supposed to upload the pdf so I can return a response to the alert box (the top script is the working script for the form, the bottom script is one of the many attempts to do the same with the pdf upload)

expandcollapse popup

<script>
                    $(document).ready(function() {
                        $("#8125").click(function(e) {
                            e.preventDefault();
                            
                            $("body").css("cursor", "progress");
                            $("#8125").prop("disabled", true);
                            
                            $('#3606box').hide();
                            $('#8125box').hide();
                            
                            $.ajax({
                                type     : 'POST',
                                url      : '/8125',
                                data     : $("#form8125").serialize(),
                                dataType : 'json',
                                success  : function(data) {
                                    console.log(data);
                                    // data: { err: NULL, results: { filePath: ... } }
            
                                    window.open(data.results.filePath, '_blank');
                                    $("#8125").prop("disabled", false);
                                    $("body").css("cursor", "default");
                                },
                                error    : function (jqXHR, textStatus, errorThrown) {
                                    // jqXHR.responseJSON: { err: err, results: NULL }
            
                                    // Bootstrap Alert:    
                                    //$("#8125text").html(jqXHR.responseJSON.err);
                                    $("#8125text").html('ERROR   ' + jqXHR.responseText);
                                    $("#8125box").show();
                                    $("#8125").prop("disabled", false);
                                    $("body").css("cursor", "default");
                                }
                            });
                        });
                    });
                </script>
                
                <script>
                    $(document).ready(function() {
                        var options = {
                            beforeSubmit: showRequest, 
                            // pre-submit callback 
                            success: showResponse 
                            // post-submit callback 
                        }; 
                        console.log('did it make it here?');
                        // bind to the form's submit event 
                        $("#lithoform").submit(function () { 
                            $(this).ajaxSubmit(options); 
                            // always return false to prevent standard browser submit and page navigation 
                                return false; 
                        }); 
                    }); 
                    // pre-submit callback function 
                    showRequest(formData, jqForm, options) { 
                        alert('Uploading is starting.'); 
                        return true; 
                    } 
                    // post-submit callback function 
                    showResponse(responseText, statusText, xhr, $form) { 
                        alert('status: ' + statusText + '\n\nresponseText: \n' + responseText ); 
                    }
                </script>

The nodejs server parts of the code to handle the upload

var express       = require('express');
var app           = express();
var path          = require('path');
var fs            = require('fs');
var bodyParser    = require('body-parser');
var child_process = require('child_process')
const homedir     = require('os').homedir();
const openurl     = require('openurl');
const util        = require('util');
var multer        = require('multer')

outPut = 'public/srv';
lithoLoc = path.join(outPut,'uploads');
var litho = null;

var storage = multer.diskStorage({
    destination: function(req, file, callback) {
        callback(null, lithoLoc)
    },
    filename: function(req, file, callback) {
        callback(null, file.originalname)
    }
});
var upload = multer({storage: storage});

app.post('/upload', upload.single('litho'), function (req, res, next) {
    res.end("File is uploaded");
    litho = req.file.filename;
  // req.file is the `litho` file
  // req.body will hold the text fields, if there were any
});

 

Edited September 10, 2018 by kaotkbliss
solved

[kaotkbliss]

Just to add,

The first thing I tried was to copy the first HTML script and just change the # tags to the appropriate form, but then the server side gave me an error like "filename is not a known property of unknown file" or something along those lines. So all the object's properties are either moved or removed (I can't tell which because using util.inspect(req) or util.inspect(req.body) returns so much information I can't find where the information might have been stored. Which it probably never made it over.

Also to add,

I've googled variations of multer + ajax and tried pretty much every variation of the code I could find but it either broke the upload like above or the response loaded a new page, clearing any of the form that might have already been filled out.

[kaotkbliss]

update,

got a fix from my manager. I was close when I tried to use the first ajax call (the top script) I just needed to change 

data     : $("#form8125").serialize(),

to

data: new FormData($('#lithoform')[0]),

contentType: false,

and

processData: false

 

so close at one point.