I need for users to upload files (mostly images) without leaving the current webpage. What's the best tool, library or mechanism for doing this? I'm using the latest jQuery and Spring webmvc (with JSP), so if there's already a mechanism within them then that's ideal.
It would also be really great to have some kind of progress bar. Does that mean it requires coordination with the server to read the progress (where Spring would have to come into play)? Or is there a mechanism within JavaScript for this?
You should check out Plupload.
Plupload offers a cross-browser
JavaScript File uploading API that
handles multiple file uploads,
client-side progress meters, type
filtering and even client-side image
resizing and drag-and-drop from the
desktop. It achieves all of this by
providing backends for Flash,
Silverlight, Google Gears, HTML5 and
Browserplus and picking the most
capable available option.
Its really neat! Here's a link to some of their Demos...
http://www.plupload.com/example_jquery_ui.php
... and a screenshot of the jQuery UI queue widget (it has a progress bar!):
I hope this helps.
Hristo
I use uploadify pretty regularly: http://www.uploadify.com/
However it does use flash for the upload mechanism and as a result may create some issues if the user is authenticated.
You should use AJAX on the client side
http://www.webtoolkit.info/ajax-file-upload.html This tutorial covers all client side.
Om the server side
This tutorlal covers most of this issue:
http://www.ioncannon.net/programming/975/spring-3-file-upload-example/
Yopu can use jquery as well or any other JS framework.
But the mist important thing is the fact You need to remember that your tag on client side should have.
enctype='multipart/form-data'
property. it means that your request contains muultipart data.
Uploadify does that trick > http://www.uploadify.com/
All samples are php but you should be able to convert it to your platform.
Related
I have been looking at Hulu's new website and I am very impressed from a developer's standpoint (as well as a designer's).
I have found that, unless you switch between http/https, you are served content entirely from json requests. That is a HUGE feat to have this level of ajax while maintaining browse back button support as well as allowing each url to be visited directly.
I want to create a website like this as a learning experience. Is there any type of framework out there that can give me this kind of support?
I was thinking I could...
leverage jQuery
use clientside MVVM frameworks like KnockoutJS?
use ASP.NET MVC content negotiation to serve html or json determined by an accept header.
using the same codebase.
use the same template for client side and server side rendering
provide ways to update pagetitle/meta tags/etc.
Ajax forms/widgets/etc would still be used, by I am thinking about page level ajax using json and client side templates.
What do you think? Any frameworks out there? Any patterns I could follow?
It is always best to first build a website without AJAX support, then add AJAX on top of that. Doing this means that:
users without javascript can already access your website
users can already visit any URL directly.
Adding AJAX support can be accomplished by various javascript libraries. So that you can render json content, you will want to look at javascript templating. You will want to use javascript templating even on your server side for when you add AJAX support (file extension .ejs). This will probably require some appropriate libraries to run javascript on the server.
When you add AJAX support, you will want to use the "History.js" library for browser back/forward/history support.
Make no mistake. This is a HUGE project (unless your website only has a few pages). So it is going to take a LONG time to add all the AJAX support to the best possible standard.
to answer your bullet point about using the same template server side as well as client side: check outdust. It was originally developed by akdubya, but has since been adopted and enhanced by linkedin. They use it to render templates on their mobile app client side. Personally I've used it on the server side and it works great.
I wish to create a drag and drop feature for adding profile picture using CakePHP. Are there any samples which I can follow or a step by step guide?
I sourced many samples online but none of them cater for CakePHP.
I basically need a simple drag n drop for users to drag their profile image and the URL of the image is reflected in the database. The user will be able to edit another profile image. What approach should I use for this?
what you want to do is mostly about front-end, the back-end is generic server handling (in this case, PHP upload handling) and has little to do with Cake. That's why you don't see a specific cake tutorial for this. So, look up jquery drag drop and ajax upload. You'll also need to understand Cake rather well (well enough to adapt those online sample code to your Cake app).
I recommend you to use jQuery UI's draggable and droppable interactions.
Integrating them in CakePHP is quite easy, just follow the manual instructions to include Javascript files in a CakePHP application.
Finally, updating the database to reflect the URL of the image can be easily done with jQuery as well, using the AJAX related methods (e.g. post).
I am trying to find the optimal architecture for an ajax-heavy Django application I'm currently building. I'd like to keep a consistent way of doing forms, validation, fetching data, JSON message format but find it exceedingly hard to find a solution that can be used consistently.
Can someone point me in the right direction or share their view on best practice?
I make everything as normal views which display normally in the browser. That includes all the replies to AJAX requests (sub pages).
When I want to make bits of the site more dynamic I then use jQuery to do the AJAX, or in this case AJAH and just load the contents of one of the divs in the sub page into the requesting page.
This technique works really well - it is very easy to debug the sub pages as they are just normal pages, and jQuery makes your life very easy using these as part of an AJA[XH]ed page.
For all the answers to this, I can't believe no one's mentioned django-piston yet. It's mainly promoted for use in building REST APIs, but it can output JSON (which jQuery, among others, can consume) and works just like views in that you can do anything with a request, making it a great option for implementing AJAX interactions (or AJAJ [JSON], AJAH, etc whatever). It also supports form validation.
I can't think of any standard way to insert ajax into a Django application, but you can have a look to this tutorial.
You will also find more details on django's page about Ajax
Two weeks ago I made a write up how I implement sub-templates to use them in "normal" and "ajax" request (for Django it is the same). Maybe it is helpful for you.
+1 to Nick for pages displaying normally in the browser. That seems to be the best starting point.
The problem with the simplest AJAX approaches, such as Nick and vikingosegundo propose, is that you'll have to rely on the innerHTML property in your Javascript. This is the only way to dump the new HTML sent in the JSON. Some would consider this a Bad Thing.
Unfortunately I'm not aware of a standard way to replicate the display of forms using Javascript that matches the Django rendering. My approach (that I'm still working on) is to subclass the Django Form class so it outputs bits of Javascript along with the HTML from as_p() etc. These then replicate the form my manipulating the DOM.
From experience I know that managing an application where you generate the HTML on the server side and just "insert" it into your pages, becomes a nightmare. It is also impossible to test using the Django test framework. If you're using Selenium or a similar tool, it's ok, but you need to wait for the ajax request to go return so you need tons of sleeps in your test script, which may slow down your test suite.
If the purpose of using the Ajax technique is to create a good user interface, I would recommend going all in, like the GMail interface, and doing everything in the browser with JavaScript. I have written several apps like this using nothing but jQuery, state machines for managing UI state and JSON with ReST on the backend. Django, IMHO, is a perfect match for the backend in this case. There are even third party software for generating a ReST-interface to your models, which I've never used myself, but as far as I know they are great at the simple things, but you of course still need to do your own business logic.
With this approach, you do run into the problem of duplicating code in the JS and in your backend, such as form handling, validation, etc. I have been thinking about solving this with generating structured information about the forms and validation logic which I can use in JS. This could be compiled at deploy-time and be loaded as any other JS file.
Also, avoid XML. The browsers are slow at parsing it, it is a pain to generate and a pain to work with in the browser. Use JSON.
Im currently testing:
jQuery & backbone.js client-side
django-piston (intermediate layer)
Will write later my findings on my blog http://blog.sserrano.com
I know how to POST/GET text values with ajax,
but never know how to upload files with ajax.
Can someone just give a simple demo here?
GMail is actually using Flash for uploading files now... You could try looking into something like SWFUpload.
Ajax could certainly upload files by posting a HTML form with a input type="file" in it.
Some links to get you started:
http://www.webtoolkit.info/ajax-file-upload.html
http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html
Depending on the server/server side language you could probably send some kind of progress info to the client to render as a progress bar.
Check out this Ajax upload scripts, it has examples in Php and .Net. The basic idea behind the script is that you have to create an iFrame to handle this.
The YUI uploader is a flash based uploader that is designed to be very easy to integrate into javascript, with minimal knowledge of flash.
If you want a progress bar, I believe a pure javascript solution would require a server side piece to send back the current completion percentage via ajax, which would add quite a bit of complexity compared to a flash solution.
I need to create a portable script to give to others to implement on their websites that will dynamically show content from my database (MySQL).
I know AJAX has a cross-site problem, but it seems that Google's ad's somehow manage the effect in a cross-browser / cross-site fashion.
Knowing that I have to give people a simple cut/paste snippet to put in their website...how can I achieve this? How did Google?
They use an <iframe>, so the ad is served from their server, and can talk to their database. I'm not actually sure that they use any sort of AJAX from their ads, though; they appear to just be mostly static content, with a few scripts for tweaking the formatting (which are optional, since they want their ads to be visible even if users have JS turned off).
Remember, you can always look into this on your own, and see what they did. On Firefox, use Firebug to explore the html, css, and scripts on a site. On WebKit based browsers (Safari, Chrome, and others), you can use the Web Inspector.
Google's ad code is loaded via a script tag that calls a remote javascript file. The AJAX restrictions that are generally enforced with xmlhttp, iframe, and similar AJAX requests don't apply when it comes to loading remote javascript files.
Once you've loaded the javascript file, you can create iframes in your page that link back to the actual hosted content on your server (and feed them any data about the current page that you wish).
jQuery has built in support for jsonp in their ajax calls. You may want to lookin in to using that if you are really needing to use ajax.
http://api.jquery.com/
http://docs.jquery.com/Ajax
You don't need iFrames and you don't need AJAX. It's really, really simple!
You pull in a remote JS file that is actually a constructed file from php/asp/whatever. In your JS file you have a document.write script that writes the content. It's that simple.
We do this all the time with media stored on separate sites. Here's an example.
YOUR SERVER: file.php (which outputs js)
<script>
document.write("I'm on a remote server");
</script>
OTHER SITE:
<script src='http://www.yourserver.com/file.php'></script>
And it will output the content generated by the script. To make the content customized you can put in script vars above the script call that will adjust what your file pulls out. From there it's pretty straightforward.
I realize this question is a year old, but I've written a library that can help with the document.write part of the problem (whether this is a TOS violation, I don't know) writeCapture.js. It's pretty simple:
$('#ads').writeCapture().html('<script src="whatever-your-adsense-code-is"> </script>');
The example uses jQuery, but you can use it standalone as well.