MatthewSchenker Posted June 4, 2013 Share Posted June 4, 2013 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 4 Link to comment Share on other sites More sharing options...
kongondo Posted June 4, 2013 Share Posted June 4, 2013 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) 1 Link to comment Share on other sites More sharing options...
renobird Posted June 4, 2013 Share Posted June 4, 2013 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? Link to comment Share on other sites More sharing options...
kongondo Posted June 4, 2013 Share Posted June 4, 2013 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 More sharing options...
kongondo Posted June 4, 2013 Share Posted June 4, 2013 Other uploaders/topics that may be of interest http://www.plupload.com/ (by TinyMCE guys) - this is a beast! http://www.fyneworks.com/jquery/multiple-file-upload/# http://www.phpletter.com/Demo/AjaxFileUpload-Demo/ http://pixelcone.com/jquery/ajax-file-upload-script/ http://www.jscripts.info/mfupload.php http://www.jquery4u.com/plugins/10-jquery-ajax-file-uploader-plugins/ http://www.9lessons.info/2012/09/multiple-file-drag-and-drop-upload.html http://www.nacodes.com/2013/04/14/DROPAREA-jQuery-Html5-drag-drop-file-uploader-plugin 5 Link to comment Share on other sites More sharing options...
Peter Falkenberg Brown Posted October 22, 2013 Share Posted October 22, 2013 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 More sharing options...
adrian Posted October 22, 2013 Share Posted October 22, 2013 Hi Peter, I have done this, but it requires some core tweaks. Here is the relevant thread: http://processwire.com/talk/topic/2867-small-change-to-inputfieldfilejs-to-facilitate-front-end-html5-uploads/ I do agree though that it would be nice to make this easier. Link to comment Share on other sites More sharing options...
pwired Posted October 23, 2013 Share Posted October 23, 2013 Hi Matthew and kongondo- good posts dropzone.js and fine uploader - I like them, added to my arsenal. Link to comment Share on other sites More sharing options...
Peter Falkenberg Brown Posted October 23, 2013 Share Posted October 23, 2013 Dear Adrian, Thanks. I'll work on digesting that. Peter Link to comment Share on other sites More sharing options...
bfncs Posted November 2, 2013 Share Posted November 2, 2013 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. 3 Link to comment Share on other sites More sharing options...
dragan Posted November 2, 2013 Share Posted November 2, 2013 if (file.name == "justinbieber.jpg") { done("Naha, you don't."); } The dropzone guy has clearly a sense of humour... 2 Link to comment Share on other sites More sharing options...
dragan Posted November 2, 2013 Share Posted November 2, 2013 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... 3 Link to comment Share on other sites More sharing options...
ryan Posted November 6, 2013 Share Posted November 6, 2013 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. 1 Link to comment Share on other sites More sharing options...
bfncs Posted November 10, 2013 Share Posted November 10, 2013 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. 1 Link to comment Share on other sites More sharing options...
valan Posted January 12, 2014 Share Posted January 12, 2014 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 More sharing options...
bfncs Posted January 12, 2014 Share Posted January 12, 2014 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 More sharing options...
valan Posted January 12, 2014 Share Posted January 12, 2014 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 More sharing options...
Beluga Posted January 18, 2014 Share Posted January 18, 2014 One more solution: http://www.resumablejs.com/ Browser support is not great, though (only FF and Chrome). 1 Link to comment Share on other sites More sharing options...
onjegolders Posted April 21, 2014 Share Posted April 21, 2014 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 More sharing options...
kongondo Posted April 21, 2014 Share Posted April 21, 2014 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... Link to comment Share on other sites More sharing options...
onjegolders Posted April 21, 2014 Share Posted April 21, 2014 Hmm...I can't actually remember, oops . I'll have to check my code and let you know... Sorry, long time ago Just the docs seem to leave out at what point Dropzone leaves the file... Link to comment Share on other sites More sharing options...
onjegolders Posted April 21, 2014 Share Posted April 21, 2014 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... 1 Link to comment Share on other sites More sharing options...
Marcel Epp Posted February 22, 2016 Share Posted February 22, 2016 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? Link to comment Share on other sites More sharing options...
Recommended Posts