Tuesday, August 23, 2016

Select multiple files and upload

Abstract: there are different libraries for browser-uploads from local directories to node.js. Finally multer  has been used. Listviews with scrollbars are displayed to show the update-directories in node.js and the uploaded files.
August 24, 2016, Rolf Eckertz

The following functions are needed:
  • show update-directories that are already existing on the server
    • get directories with fs.readdirSync(dir).sort()
    • the update-directory must not be "read-only", is checked by fs.access - the api-documentation has errors, betterfs.accessSync(dirinfo.fullname, fs.W_OK )
      • BUT: since windows 7 directories are always read-only
      • so the update-directories are checked regarding the progress of work:
        • is there an upd-package.json-file
        • is there an upd-release.json-file
        • is there an upd-transfer.json-file
      • if an upd-release.json-file exists, then the directory is regarded "read-only" - no change to a package is allowed after release
    • the date of creation is got by fs.statSync(dir + "/" + dirs[i]);
    • the highest update-number has to be extracted from the directory-names, it's the default for the working directory, regex-is used
      • var m = dirinfo.name.match(/update(\d*)(.*)/);
      • m[1] is the number, m[2] ist the comment
  • show files in selected directory
    • the selected directory is either the default directory (the "last"), a new directory or a selected directory from the list of update-directories
    • the files of that directory have to be shown recursively with the sub-directory structure where they are located
    • it could be performance-critical, so asynchronous access to the file-information should be done
    • flat recursion is a convenient technology to do that: one central result-array and a control-index for the iterative resolution of subdirectories
  • define update-directory
    • accept default directory
    • select existing update-directory (not "read-only") in order to add new files 
    • define new update-directory (button)
      • a comment is entered - this was planed to be done with a popup, but there is a compatibility problem between jQuer 2.2.3 andiQuery Mobile 1.4.5 which makes popup impossible. I tried various third party plugins for popup, no direct success - so downgraded jQuery to 1.12.4 and it works fine (tried 2.2.4, same problem, tried 3.1.0 - desaster in the UI)
      • an AJAX-Function calculated the new update-number, builds the fullname of the directory and allocates the directory 
      • the user selects and uploads files to the new update-directory
  • select file from the local file-system
    • filter on file-type, not as easy as it should be
  • upload the file to the update-directory that has been selected or defined before
    • check and create sub-directories, if necessary
  • reminder: select multiple files in the browser, here: js-files - is possible, but not very convenient
  • show progress bar for the uploads (not highest priority)
  • give message for finishing the uploads and show listview with the files added
  • "finish and release" update-directory
    • in the server the files are put to the MongoDB, summarizing data about size and number of files are calculated and stored
    • the update-directory is marked "read only" on the server (for Windows)
https://developers.openshift.com/managing-your-applications/filesystem.html - this post shows where files are stored in openshift. The location directory comes with the property OPENSHIFT_DATA_DIR

There are several node.js Tools that support multiple file upload, formidable (https://coligo.io/building-ajax-file-uploader-with-node/) and multer (https://codeforgeek.com/2014/11/file-uploads-using-node-js/) are two of these. A little bit simpler seems https://www.npmjs.com/package/lite-uploader - but the server part is missing in the samples. 
Multer seems to be the favorite. https://www.codementor.io/tips/9172397814/setup-file-uploading-in-an-express-js-application-using-multer-js gives a good tutorial that will be used as starter.
BUT the app and the browser-application are written als SPA-single page app and that means that file data has to be treated by AJAX. http://stackoverflow.com/questions/36092622/file-upload-to-nodejs-using-ajax gives some idea for that approach.
It seems to be standard to have form and submit button and transform it with jQueryForm Plugin from https://github.com/malsup/form and http://malsup.com/jquery/form/#file-upload with additional examples.
https://codeforgeek.com/2014/11/ajax-file-upload-node-js/ finally is the basic approach to the solution based on jQueryForm and Multer https://github.com/expressjs/multer - one file after the other.

For directory- and file-attributes https://www.npmjs.com/package/winattr is used, seems to be the most convenient solution.
The next technical aspect is dynamic loading of js code






No comments:

Post a Comment