for a new project I wanted to improve the upload of single files and add upload of multiple files.
Many web-apps provide a nice drag & drop upload for example the Media-Manager in WordPress. There are couple of JavaScript libraries out there. I have chosen dropzone.js https://www.dropzonejs.com/ which is quite popular nowadays. There is a lot of good documentation on their homepage and a lot of answers for example on StackOverflow.
First of all, let me show you the result "as is".
This is my Details view:
There is a children-tab showing attached files. The list of children is empty, yet.
Below the tab there is a dropzone.
I have a couple of sample PDF files
Now I am going to drag 5 PDF files into my details view and drop them into the dropzone:
As you can see, the files have been uploaded immediately and attached (as children) to the selected record. They are listed and you can click the file-link to download or open each.
There are several things to prepare:
- Integrate Dropzone.js by Including the css and js file. You can download the files from their downloadpage or use a content delivery netnork (CDN)
- Add a dropzone to your detail view. This can be done in TABLENAME_dv function of your hooks/TABKENAME.php file. Just append a <form> or <div> according to their specs to your $html variable.
There are two ways to do:
You can create a form with class="dropzone" and the lib will do the rest.
Or you can use Javascript/JQuery for converting your <div> into a dropzone. - Create a new php-file on your server in which you...
- Move the uploaded file to your upload-directory
- Create a new record and store the new filename there
- Set the owner of the new record
Find PrepareUploadedFile() function in your AppGini code. There you will see all necessary steps for getting the upload-directory name, checking against allowed filetypes, checking size-limits etc.
After the upload queue has been uploaded completely, I'm refreshing the tab-list by calling the javascript-method bound to the refresh-button.
As this dropzone.js is really helpful and not too hard to integrate, I am going to integrate it in other projects, too. Hope my post give you a good starting point for your own integration of dropzone.js!
Best regards,
Jan