Drag and drop file upload with progress bar

[Hayden Young]

The latest Joomla has a really nice drag and drop upload feature introduced as part of the package installer.

I would like to replicate this functionality in a component I am developing, but, due to the size of files being uploaded am thinking users might need feedback on the progress of the file upload.

Therefore, I'm wondering if anyone else as implemented the same or similar functionality to the package installer drag and drop uploader and has successfully implemented some kind of progress meter.

Looking at the JQuery Ajax functionality I can't find any method for querying the progress of the file upload but then maybe I need to run a second ajax request to query the server as to the amount of the file that has been uploaded?

Any help much appreciated.


Hayden

[Mark Dexter]

I think you need a progress bar plugin specific to the file upload (since file uploads are handled semi-automatically by the browser). I have used jquery.fileupload (https://blueimp.github.io/jQuery-File-Upload) and it provides a progress bar and some other nice functionality. 

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-general+unsub...@googlegroups.com.
To post to this group, send email to joomla-dev-general@googlegroups.com.
Visit this group at https://groups.google.com/group/joomla-dev-general.
For more options, visit https://groups.google.com/d/optout.

[Johan Janssens]

At Joomlatools we use http://www.plupload.com/ for handling our file upload in the browser. We are very happy with it.

Client side uploading isn't the only problem to solve though, getting file uploads right across browsers and different server configurations requires quite a bit of code, speaking from 10 years of experience working on our DOCman and FILEman components. 

We have wrapped all our code that handles file uploads and downloads into a re-usable component that you can find here: https://github.com/joomlatools/joomlatools-framework-files It's build on our framework and can handle chunked file uploads, chunked downloads (streaming) ... etc. 

Hope this helps,

Johan

On Friday, June 16, 2017 at 3:43:03 AM UTC+2, Mark Dexter wrote:

I think you need a progress bar plugin specific to the file upload (since file uploads are handled semi-automatically by the browser). I have used jquery.fileupload (https://blueimp.github.io/jQuery-File-Upload) and it provides a progress bar and some other nice functionality. 

On Thu, Jun 15, 2017 at 6:15 PM, Hayden Young <hay...@knowledgearc.com> wrote:

The latest Joomla has a really nice drag and drop upload feature introduced as part of the package installer.

I would like to replicate this functionality in a component I am developing, but, due to the size of files being uploaded am thinking users might need feedback on the progress of the file upload.

Therefore, I'm wondering if anyone else as implemented the same or similar functionality to the package installer drag and drop uploader and has successfully implemented some kind of progress meter.

Looking at the JQuery Ajax functionality I can't find any method for querying the progress of the file upload but then maybe I need to run a second ajax request to query the server as to the amount of the file that has been uploaded?

Any help much appreciated.


Hayden

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-general+unsub...@googlegroups.com.

To post to this group, send email to joomla-de...@googlegroups.com.

[Hayden Young]

Hi Mark, Johan

Thanks for the various options. Will check out and report back.

thanks


Hayden

[Alejandro Arroyave]

I has used Dropzone.js (http://www.dropzonejs.com) it's easy

--

Alejandro

[Hayden Young]

I ended up integrating BlueImp (http://blueimp.github.io/).