(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: 1807
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 10883 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 10883 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 10883 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
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
a.gneady
Site Admin
Posts: 1281
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: AppGini plugins to add more power to your apps:
  • DataTalk is an innovative AppGini plugin based on ChatGPT that allows you to interact with your AppGini database using natural language questions, without writing any SQL. Check the demo video
  • Mass Update plugin: Update multiple records at once and improve your workflow efficiency.
  • Check our other plugins and get a generous discount of up to 30% when buying 2 or more plugins.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
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 10862 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
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

facos79
Veteran Member
Posts: 115
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.


User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: (Multiple) File upload using dropzone.js

Post by onoehring » 2019-11-14 17:40

Hi Jan,

do you know, if your multiple upload field works on Smartphone/Tablets as well?
I am wondering if this would be a possibility to upload more than one image at once.

Actually - would I be able to set image as field-type in AppGini or would I need to use file? Do you know?

Olaf

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

Re: (Multiple) File upload using dropzone.js

Post by jsetzer » 2019-11-14 18:22

Hi Olaf,

it works on (my) Android Smartphone. If you tap the dropzone-area, the device's file-selector opens up. Depending on your OS you can, for example, take a camera-picture or select a file from your gallery which will be uploaded afterwards.

Obviously there is no drag & drop functionality from any file-explorer onto that dropzone.

Hope this helps!
Best,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: (Multiple) File upload using dropzone.js

Post by onoehring » 2019-11-14 18:25

Hi Jan,

yes, that information helps a lot. Thank you for clarifying.
Now I just have to see if it's worth changing to this behavior.

Olaf

xbox2007
Veteran Member
Posts: 129
Joined: 2016-12-16 16:49

Re: (Multiple) File upload using dropzone.js

Post by xbox2007 » 2019-12-28 18:03

very interested .
please can you share code ??

thanks a lot

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: (Multiple) File upload using dropzone.js

Post by onoehring » 2019-12-29 10:17

Hi xbox2007

I have not worked on it yet - so ... no code from me :-)
As it takes time (=money) to implement such a feature I understand, if Jan does not want to share his code for free.

Olaf

Anton Mats
Posts: 9
Joined: 2017-08-26 15:40

Re: (Multiple) File upload using dropzone.js

Post by Anton Mats » 2020-05-20 15:04

Awesome Jan, fantastic job!

selectsteel
Posts: 26
Joined: 2013-09-23 14:14

Re: (Multiple) File upload using dropzone.js

Post by selectsteel » 2022-09-21 21:35

I have tried everything I can think to add the dropzone library to my Appgini site but something is blocking it from working.
I added the libraries into the header with and without the PREPEND_PATH;

Code: Select all

<script src="https://unpkg.com/[email protected]/dist/dropzone-min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/dropzone.css" rel="stylesheet" type="text/css" />
I tried downloading the js and css libraries into the resources folder and calling them like the other libraries. Nothing seems to work.
I don't know if its the library not working or the class im calling "dropzone"
I tried it in a div and a form. I tried it like this -

Code: Select all

	function receipt_dv($selectedID, $memberInfo, &$html, &$args) {
	
	$html .= '<form action="dropzone.php" class="dropzone" id="dropzoneForm">"test"</form>';
	
	}
I tried adding it directly to the templateDV.html file.
I did create a plain html file and added it to the header and it works fine there.

Code: Select all

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
</head>
<body>
<html>
<form action="upload.php" class="dropzone" id="dropzoneFrom">
</form>
</html>
</body>
Nothing seems to work in APPGINI so any help would be appreciated.

Post Reply