apeisa

That looks great and solid implementation, very well done! That will be great feature to have in news/community site, for sure! Little off topic, but what do you think about IPB btw? I have used it once, and I think it was little bit "too much" for that case I had.

Hi Stewrat and welcome to the forums! TinyMCE uses style="text-align: right" to set alignments. That being said this worked for me: My addition on bold. But beware - if this is something that client will use, it will allow all kind of stuff (colors, font-sizes etc) introduced to your content. I am not sure if you can say something like [style=text-align] (did try that, did allow everything on style) that would allow only the alignment?

Just an idea that came up today. At lukio.fi site (which gets good amount of traffic, can't tell you since haven't asked permission) I cache normal content pages pretty heavily (for one week). They don't have anything dynamic, but the navigation menu. If you remove or add children, then it causes problems on the page. So instead of clearing whole cache it would be beneficial to have third option: 3. Expire the cache for the saved page and it's parent page. I think that would be perfect in many situations, since that would allow to cache normal news-front template, since cache expires when someone edits/adds/removes news-item pages under that page. What do you think?

Thanks guys. I have been demoing this today at the office, and it has nice sales effect also. It does look & feel cool Also gives as possibility to brand pw as "HTML5 CMS" Great idea, I will implement this. I will leave some text indicator to tell editors that you can drop files, but use the whole field as "drop area".

I think that rel="nowllow" is something that is very rarely used in TinyMCE or in any page content (more common in comments and other user generated comment). Also rel="nowllow" is something that average content editor is not aware, so that would be only noise in the link editor. That being said, I think that it should not be in core, but maybe an additional module? I am sure that Ryan can tell you which hooks you should look for and help you to right direction.

Ok, here we go now. I didn't implement any validation (I let Ryan do that), so you are able to upload any files to image fields etc. Also it is possible to add more files than is allowed per image field. I'm not sure if I remembered all the files needed, but should be. Just replace InputfieldFile folder from /wire/modules/inputfield and ProcessPageEdit goes to /wire/modules/process/processpageedit. Will record little screencast soon (ready: http://screencast.com/t/IQk7U4Aewe). There are some things I would like to polish and rethink in the UI (bigger drop area and next to inputfield, not below), but overall it should be pretty usable. Please let me know what you think? PS: There is image preview code commented out in the js-file - it did slow down the page very much if you added big images (even crashed my chrome dev inspector). You can try it if you want it. PPS: Consider this "highly experimental" and try only on test environment InputfieldFile.zip ProcessPageEdit.module

Got 3 hours of solid sleep, paying for that today at work meetings...

I know I have tried my best to keep myself away to screencast this until I have something what I consider solid enough. I don't know why, but for me usually things slow down after you get first amount of feedback. I think that the feelgood makes you think that it is good enough already and soon you lose interest to polish the little details. Sounds like a right place. I think we need to test and play a little and decide how much validation we need here. Thanks, that worked just fine! I am now really finishing this (styling the upload bars etc). It's getting little late, so it might be tomorrow before I have something to show. Can't wait to share this one out.

Ok, I added three more lines for my last code snippet, and it is now working: <?php if ($filename) { $fieldname = $_SERVER['HTTP_X_FIELDNAME']; $this->message("Should be file upload"); // AJAX call file_put_contents( 'C:/Temp/' . $filename, file_get_contents('php://input') ); $this->page->$fieldname->add('C:/Temp/' . $filename); $this->page->save(); } Of course we don't wanna keep that C:/Temp/ hardcoded there, but waiting for Ryan's reply on that issue. I will finish details and test this on all browsers that supports these goodies (hehe, there are only two - easy job ). Gotta say that this makes image uploading fun and fast And because TinyMCE image inserting (or file linking) works through iFrame-modal, then images/files added with html5 browser are available right away, without first saving the page. Some more details need to be considered, like what if I drop 10 files, but field allows only one? There seems to be now backend check, so through API it is possible to add more files than field allows. I'm not sure but it might be wiser to move that logic to backend (if there is no room for new images, just skip)? Not sure tough... it wouldn't be that hard to add restrictions on client side also, like the current solution has (no more input fields appear after you have enough images). EDIT: And for all who are interested, this is the js-code that sends the image: var xhr = new XMLHttpRequest(); // This allows us to track progress, nice little progressbar coming! xhr.upload.addEventListener("progress", this.ProgressHandler); xhr.open("POST", "./fields?id=" + page_id, true); xhr.setRequestHeader("X-FILENAME", f.fileName); xhr.setRequestHeader("X-FIELDNAME", fieldName); xhr.send(f); Nice and simple. And here is the great tutorial which helped so much in the progress: http://www.sitepoint.com/html5-file-drag-and-drop/

Good to know, remember to tell us when all is set up!

Probably the best and simplest way how you are doing it now. My use case was much simpler, just loading few subsections (taking href attribute and loading that content with ajax to #content div, updating url with history API (without any plugins etc). Nice looking site it is (although images could be sharper, maybe too heavily optimized?). Great you got your urls working fine, tested and works!

Ok, I got this working. Not sure how you manage saving files on pw when using admin. Do they got saved directly to assets/files/id/ folder or is there tmp somewhere? I did just small if clause to your executeFields method: <?php public function ___executeFields() { // We check if it is image upload $filename = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false); if ($filename) { $this->message("It is a file coming!"); file_put_contents( 'C:/Temp/' . $filename, file_get_contents('php://input') ); } else { if(!$this->isAjaxPost) throw new WireException("This functionality may only be accessed from AJAX POST at present"); // etc etc... } And now I am able to save my files to C:/Temp/. Not sure about the best way to handle this from this situation? Save it to temp folder and use regular pw API and save the file? Or save it right to assets/files/id/ folder and then use API? I can easily send more data (like field name) as a http headers. If we save it directly to right place (probably safe since this is admin usage), how I get the right path? $config->paths->files->3242 or something like that?

There are security restrictions and it is impossible to do multipart/form-data posts in javascript. But it is possible to send files in File API and the backend side looks simple enough: http://www.sitepoint.com/html5-ajax-file-upload/ So not 100% sure about implementation yet, but I think we'll get there soon I try to fork myself and ask your help when needed.

This works nicely with text only fields. But we cannot send multipart/form-data posts with jquery/js. So it needs some adjustments on the backend to support this. But this got me leaps forward and I should be able to fork from this. Looking better all the time!

Works nicely! Only minor complain is that if you go first to: http://zueblin.update.ch.update.nine.ch/unternehmen/portrait/ and start navigation from there you end up with urls like: http://zueblin.update.ch.update.nine.ch/unternehmen/portrait/#/unternehmen/aktie-zihag/ As a general I don't like hashtag urls at all. Although there really isn't better options for older browsers. In one project I am working on I decided to use ajax to load subcontent. I use HTML5 History API there to keep location bar up to date and allow good back & forward behavior. And browsers that don't support it have it old school - just normal urls. But making templates to respond to ajax queries is a breeze when using pw

What kind of errors it provides?

Thanks Ryan, will test this right after our lego games end and kids are a sleep.

If it is simpler to implement, I think that it is also fine to save just one field at the time (at least on this occasion, not sure about the future)

+1 to advanced. Never used and cannot think good scenario for it at the moment.

Ok, sounds good. Good solution might be something like if post comes through XMLHttpRequest, then it saves only the fields that are posted.

Posted this on other page, but still no luck: ------WebKitFormBoundary4pYRGbMxtMXW4kdE Content-Disposition: form-data; name="parent_id" 5812 ------WebKitFormBoundary4pYRGbMxtMXW4kdE Content-Disposition: form-data; name="template" 41 ------WebKitFormBoundary4pYRGbMxtMXW4kdE Content-Disposition: form-data; name="name" linnanmaki ------WebKitFormBoundary4pYRGbMxtMXW4kdE Content-Disposition: form-data; name="sortfield" sort ------WebKitFormBoundary4pYRGbMxtMXW4kdE Content-Disposition: form-data; name="title" Testing testing ------WebKitFormBoundary4pYRGbMxtMXW4kdE Content-Disposition: form-data; name="submit_save" Save page ------WebKitFormBoundary4pYRGbMxtMXW4kdE Content-Disposition: form-data; name="id" 5815 ------WebKitFormBoundary4pYRGbMxtMXW4kdE-- Respond headers say 200 ok and it seems to render the page normally (I can see that from Chrome dev tools, network tab). So it posts ok and to right page. But when you do regular save, then it does 301 redirect (to avoid back button problems). So somehow saving fails somewhere before that.

Hmm.. getting closer. There is post fields that very simple page edit posts: ------WebKitFormBoundaryttJCZBXTR2dQmoZt Content-Disposition: form-data; name="name" grillipaikka ------WebKitFormBoundaryttJCZBXTR2dQmoZt Content-Disposition: form-data; name="parent_id" 5817 ------WebKitFormBoundaryttJCZBXTR2dQmoZt Content-Disposition: form-data; name="template" 50 ------WebKitFormBoundaryttJCZBXTR2dQmoZt Content-Disposition: form-data; name="sortfield" sort ------WebKitFormBoundaryttJCZBXTR2dQmoZt Content-Disposition: form-data; name="title" Grillipaikka ------WebKitFormBoundaryttJCZBXTR2dQmoZt Content-Disposition: form-data; name="submit_save" Save Page ------WebKitFormBoundaryttJCZBXTR2dQmoZt Content-Disposition: form-data; name="id" 5819 ------WebKitFormBoundaryttJCZBXTR2dQmoZt-- *** So it must be that I don't have parent_id, template etc? Didn't find the place where to check which of those (if all?) are required? Or are those just the same than when working from api? (I'll work at the same time and throw questions when those occur, more like brainstorming here - not actual or important questions)

Thanks guys, there is no reason for me to post yet another example anymore That will be hard when we get drag & drop magic working. It will be so much fun to add more and more images to single field!

Started developing own ProcessPageEditAjaxUpload, but it is so closely what InputfieldFile does, so started to thinking about better method. There is great way to create formdata on the fly with html5, so I could recreate the post with just the one new image and post that to regular page edit page. So far no luck with that. That would still be the best way, since it would allow all the features like the regular page save, so ajax uploads couldn't mess things up. What stuff the page save form expects to be posted? All the fields or only few + submit_save? How it checks that it is valid post?

I think that pagination works only with pageArrays, so no help here. Building custom pagination for images is not that hard though, I'll provide you a starting point when I get to computer.