(Multiple) File upload using dropzone.js

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 135
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

(Multiple) File upload using dropzone.js

Post by jsetzer » 2019-02-27 10:32

Hi @all,

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:
chrome_2019-02-27_11-05-03.png
chrome_2019-02-27_11-05-03.png (34.76 KiB) Viewed 411 times
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
explorer_2019-02-27_11-03-35.png
explorer_2019-02-27_11-03-35.png (3.08 KiB) Viewed 411 times

Now I am going to drag 5 PDF files into my details view and drop them into the dropzone:
2019-02-27_11-09-19.gif
2019-02-27_11-09-19.gif (174.75 KiB) Viewed 411 times

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:
  1. 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)
  2. 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.
  3. 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
As a starting point:
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

User avatar
a.gneady
Site Admin
Posts: 996
Joined: 2012-09-27 14:46
Contact:

Re: (Multiple) File upload using dropzone.js

Post by a.gneady » 2019-02-28 16:06

Looks amazing, Jan. Thanks for sharing :)
:idea: Learn all the tips and tricks of customizing AppGini apps through our online course.

:arrow: Summary Reports plugin enables you to build powerful reports and charts inside your AppGini application through a few simple steps. See the big picture and discover trends in your data that empower you to take the right decisions confidently.

:arrow: Search Page Maker enables you to build user-friendly yet powerful search pages for your AppGini application by simply dragging and dropping the fields you want to include in search.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 135
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: (Multiple) File upload using dropzone.js

Post by jsetzer » 2019-02-28 16:47

This afternoon I went one step further:
In this project users are allowed to upload PDF-files only. I have embedded a PDF-Viewer right into the detail view of AppGini which is loading and showing the uploaded attachments automatically.

Here is how it looks like:
pdf-viewer-embedded-res.png
pdf-viewer-embedded-res.png (253.19 KiB) Viewed 390 times

I am using a great library called pdf.js which can be found here:
https://mozilla.github.io/pdf.js/

The fun-part is:
There is a complete pdf-viewer in their download-package (subdirectory 'web') which has to be uploaded to your server and then can be embedded into you AppGini form as an IFRAME. Attention: When uploading to your server, ensure that you upload buth subdirectories of their package - otherwise it will not work.

There is an online demo for the pdf-viewer here:
https://mozilla.github.io/pdf.js/web/viewer.html

Have fun integrating PDF-viewer into your own apps!
Best regards,
Jan

facos79
Veteran Member
Posts: 72
Joined: 2014-10-29 12:31

Re: (Multiple) File upload using dropzone.js

Post by facos79 » 2019-03-26 20:13

Spettacolo! Veramente fantastico!

Grazie. E' una funzione che andrebbe integrata in Appgini.

Post Reply