Jump to content
MatthewSchenker

Dropzone.js and File Uploads?

Recommended Posts

Hey Everyone,

I've been building front-end forms with ProcessWire for a while now, and really like it.  One area I am constantly looking to improve is file uploads -- making things just a bit smoother and more visual.  Recently, I started experimenting with dropzone.js and I think it's pretty neat.

Anyone else using this?  Any other cool ideas you have used for file uploads with ProcessWire?

Here it is -> http://www.dropzonejs.com/

Thanks,

Matthew

  • Like 4

Share this post


Link to post
Share on other sites

I have been testing it this week. It is simple and works out of the box. I settled for https://github.com/Widen/fine-uploader though due to its many features...(note: it is OS but for those not wanting GPL, they can buy a commercial license; Initially I thought it was all commercial)

  • Like 1

Share this post


Link to post
Share on other sites

Matthew,

Nice one. I wonder if you could have dropzone.js initially upload to a temp directory, and then when the form is submitted do the processing to add the files to your form?

Share this post


Link to post
Share on other sites

Matthew,

Nice one. I wonder if you could have dropzone.js initially upload to a temp directory, and then when the form is submitted do the processing to add the files to your form?

You do that server side. Dropzone will deliver the file to your PHP file. With that you can do whatever you want :)

Share this post


Link to post
Share on other sites

Hi Kongondo,

I'm probably missing something, but what about using the code in ProcessWire for uploading images?

PW's image uploader has a progress bar, and the TinyMCE implementation has an icon to grab an image attached to the page.

Has anyone figured out how to use those two things in front-end forms in PW, via the API? (Not the form builder, but just straight PHP/API code.)

I'd like to use TinyMCE in a front end textarea field, and also use the PW progress bar on an image upload field.

Yours,

Peter

Share this post


Link to post
Share on other sites

Hi Matthew and kongondo- good posts dropzone.js and fine uploader - I like them, added to my arsenal.

Share this post


Link to post
Share on other sites

Hey everyone,

ajax enabled file uploads in the frontend is something, that I also always wanted, so I did a really dirty hands on to get it done without core hacking. You can find my current state here:

https://github.com/bytebus/AjaxImageUpload

I consciously don't want to put this into the modules subforum because it's definitely not even close to be used as a drop-in module.

The way it works is more or less this:

* Provide an API endpoint for ajax uploads.

* On each upload, create a new, temporary page with an only an image field.

* Provide a method to easily copy the uploaded image to a "real" page and delete the temporary page.

I think the concept is definitely simple and ok, so this is why I'm still posting the code and hope it might be a starting point for someone doing a cleaner implementation. I'm also glad about all suggestions (and pull requests  ;)) on how to implement this in a more easy to use and flexible way.

P.S.: I originally wanted to use dropzone.js for this because of the nice user interface. On a more in-depth look at it, I had the feeling that it's not flexible enough, though. I used jQuery File Upload instead which seems to be more widely supported, more flexible and also provides drag-and-drop functionality.

  • Like 3

Share this post


Link to post
Share on other sites
    if (file.name == "justinbieber.jpg") {
      done("Naha, you don't.");
    }

The dropzone guy has clearly a sense of humour...  :lol:

  • Like 2

Share this post


Link to post
Share on other sites

On a somewhat related note, I was looking into (standalone) browser-based file-managers, and found this gem: http://elfinder.org/

It's got an API, drag-and-drop goodness, archive creation / extraction functions, and instructions how to integrate it in tinyMCE + CKEditor. Gonna play around with it this weekend...

  • Like 3

Share this post


Link to post
Share on other sites
I consciously don't want to put this into the modules subforum because it's definitely not even close to be used as a drop-in module.

Thanks for your work here. Maybe you want to add it to the modules directory under the "proof of concept" category? That way it's implied that it's not a plug-n-play type module, and that it may need further adaptation by the developer to use it. 

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for your comment Ryan!

Good that you point out the "proof of concept" area in the modules directory, I didn't think of it in the first place, but for sure you're right, this is the right place.

http://modules.processwire.com/modules/ajax-image-upload/

With the relatively complicated "installation" needing a lot of custom code at the moment, I also don't see a big problem, if some installs this by accident.

  • Like 1

Share this post


Link to post
Share on other sites

Hi boundaryfunctions! I'm following installation/usage steps but get error "Upload field name name not specified" which is returned by handleUpload(), line 62. Please could you check what could be a reason? Thanks!

Share this post


Link to post
Share on other sites

Hi valan,

thanks for testing the module. I think I missed this in the documentation, but there's a need to also post a variable named "field" with the correct Field name when uploading the file via ajax (like described here: https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data). This is a residue from development that was looked over by me, sorry.

I'm currently on the go, but I'll definitely fix this tomorrow.

Share this post


Link to post
Share on other sites

Thanks! Also would be great if you can add few lines in usage describing how to setup simple UI  - currently there is only ugly browser button. I guess UI customization should be somewhere in plugin docs but some simple starting point would be useful here too. Thanks!

Share this post


Link to post
Share on other sites

You do that server side. Dropzone will deliver the file to your PHP file. With that you can do whatever you want :)

Kongondo, did you ever get Dropzone working with PW? Having issues finding how to hand over the Dropzone "result" to the usual WireUpload call.

Share this post


Link to post
Share on other sites

Kongondo, did you ever get Dropzone working with PW? Having issues finding how to hand over the Dropzone "result" to the usual WireUpload call.

Hmm...I can't actually remember, oops :-). I'll have to check my code and let you know...  :lol:  :)

Share this post


Link to post
Share on other sites

Hmm...I can't actually remember, oops :-). I'll have to check my code and let you know...  :lol:  :)

Sorry, long time ago :P

Just the docs seem to leave out at what point Dropzone leaves the file... 

Share this post


Link to post
Share on other sites

EDIT: OK, having gone over and over it, I think I have a solution.

By default with DropZone, you don't include your own input type of file and you can access the uploaded file(s) as though you did have an input with the name value of "file" (that's Dropzone's default it would seem).

So when initiating a new WireUpload:

$u = new WireUpload('file');

Anyone has any issues, let me know...

  • Like 1

Share this post


Link to post
Share on other sites

Hi,

it's been a while since you posted this. Can you give me an example how you put that dropzone thing in an existing wire upload?

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...