Page 1 of 1

(Multiple) File upload using dropzone.js

Posted: 2019-02-27 10:32
by jsetzer
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 10892 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 10892 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 10892 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

Re: (Multiple) File upload using dropzone.js

Posted: 2019-02-28 16:06
by a.gneady
Looks amazing, Jan. Thanks for sharing :)

Re: (Multiple) File upload using dropzone.js

Posted: 2019-02-28 16:47
by jsetzer
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 10871 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

Re: (Multiple) File upload using dropzone.js

Posted: 2019-03-26 20:13
by facos79
Spettacolo! Veramente fantastico!

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

Re: (Multiple) File upload using dropzone.js

Posted: 2019-06-16 07:37
by onoehring
Hi Jan,

a lot of thanks for your input.
Olaf

Re: (Multiple) File upload using dropzone.js

Posted: 2019-11-14 17:40
by onoehring
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

Re: (Multiple) File upload using dropzone.js

Posted: 2019-11-14 18:22
by jsetzer
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

Re: (Multiple) File upload using dropzone.js

Posted: 2019-11-14 18:25
by onoehring
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

Re: (Multiple) File upload using dropzone.js

Posted: 2019-12-28 18:03
by xbox2007
very interested .
please can you share code ??

thanks a lot

Re: (Multiple) File upload using dropzone.js

Posted: 2019-12-29 10:17
by onoehring
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

Re: (Multiple) File upload using dropzone.js

Posted: 2020-05-20 15:04
by Anton Mats
Awesome Jan, fantastic job!

Re: (Multiple) File upload using dropzone.js

Posted: 2022-09-21 21:35
by selectsteel
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.