Jump to content

Dropzone.js and File Uploads?


MatthewSchenker
 Share

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
Link to comment
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 :)

Link to comment
Share on other sites

  • 4 months later...

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

Link to comment
Share on other sites

  • 2 weeks later...

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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 2 months later...

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!

Link to comment
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.

Link to comment
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!

Link to comment
Share on other sites

  • 3 months later...

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.

Link to comment
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:  :)

Link to comment
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
Link to comment
Share on other sites

  • 1 year later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...