Almost all websites need to allow uploading files and tracking them. Sometimes you want to associate an image with a specific data row like a user image associated with user. Other times you may want to allow uploading multiple documents and/or images associated with a parent row of data.

Some images uploaded need to be public so they can be used in lists. For example avatars or images associated with users will most likely need to be public so when showing users a list of all users they can see the images associated with everyone.

Other images or files need to be private or secure. For example if your website requires people to upload their driver's license you would not want that to be available to the public.

The Wizard's Toolkit library has a PHP function that works in conjunction with our JS function to make uploading a file easy. The /demo folder has several example files showing exactly how this is done. The PHP code requires pulling the data from the SQL table.

Storing images and documents as blobs in a SQL database is a horrible idea! This makes backups take considerably longer, stresses the SQL DB by pulling the images out every time needed, plus several other reasons. For example a DB backup I managed took 12 hours nightly due to images and documents stored in the DB as blobs. Once it was changed to the Wizard's Toolkit method of storing the location of the file on the server, the nightly backups took less than an hour.

The `FilePath` is stored in a separate data column than the `NewFileName`. The reason it is called NewFileName is because WTK renames the file during the upload process. That way the length of the 'FileName' column only needs to be varchar(12). The name is generated by inserting a row into the wtkGUID data table and taking the auto-incremented GUID value. Then a 'w' is prepended and the original file extension is added. If the file extension is jpeg it will be changed to jpg.

For example an uploaded file may end up with a name like `w1087.png`. Here is an example SQL statement to pull the FirstName and file-associated columns from the wtkUsers table (the FirstName is not relevant for file upload but likely to be needed on the page.

SELECT `FirstName`,`FilePath`,`NewFileName`
 FROM `wtkUsers`
WHERE `UID` = ?

Then the PHP code would simply be:

$pgHtm .= wtkFormFile('wtkUsers','FilePath','/imgs/user/','NewFileName','User Photo','m6 s12');

The parameter options for wtkFormFile are as follows;

function wtkFormFile($fncTable, $fncColPath, $fncFilePath, $fncFileName, $fncLabel = '', $fncColSize = 'm6 s12', $fncRefresh = '', $fncShowOneClickUpload = 'N', $fncAccept = 'accept="image/*"', $fncThumbnail = 'Y')

• $fncTable name of data table
• $fncColPath name of data column to hold path to image/file
• $fncFilePath actual path on webserver
• $fncFileName name of data column to hold new name of file uploaded
• $fncLabel optionally passed to show as label; if not then uses $fncColName
• $fncColSize MaterializeCSS column sizing - defaults to 'm6 s12'
• $fncRefresh defaults to blank; set to image ID you want refreshed upon saving (by JS)
• $fncShowOneClickUpload defaults to 'N' but if set to 'Y' then adds button to upload using AJAX without needing a 'Save' button
• $fncAccept defaults to 'accept=“image/*”'; you can change this to other document filters like accept=“.pdf”
• $fncThumbnail defaults to 'N'; if set to 'Y' then adds an <img id=“imgPreview” …> which will show a preview of images

Files which are not sensitive and should be viewable by anyone on the website should be stored in a web folder that is available to the website. For example a sub-folder named /imgs/ and then you can subcategorize by internal subfolders. Like /imgs/users/ and /imgs/pets/ . The above example PHP code shows an example of public file location.

More technical details will be added soon.