file upload using ajax - javascript

I am looking for an AJAX method that can be used to file upload.
It will be super if I find a function that uses Prototype + Script.acul.us

File uploads are not possible using pure Ajax, because Javascript can't get direct access to the local file.
Tools like the jQuery form plugin work around this by generating an invisible iframe on the fly, and submitting to that.
There probably is a Prototype based, or framework independent solution for this as well.

there is no native ajax support for this, however Uploadify does a workaround using flash (uses jquery but is able to be used with other api's since 2.0)

http://teamco-anthill.blogspot.com/2009/01/ajax-progress-indicator-with-prototype.html
?

As others have pointed out, javascript is not able to asynchronously upload files (otherwise javascript enabled sites could steal any file off your harddrive). The best approaches are:
A flash uploader, as already suggested
Or simulate an Ajax request using an iframe
The iframe approach means that it's the iframe which reloads, instead of the page displayed to your users, so that to the end user, the experience looks as if it's Ajax.
If you're using rails, which I gather you might be due to using prototype and scriptaculous, there's a plugin available which handles the tricky bits of this approach for you called responds_to_parent, It's been ages since I implemented this in a rails app myself, but step 6 from this blog looks like a good example of how to use it.

Related

Can history.js to URL deep linking without a hash or ? character?

This may be a duplicate. I have searched, but am not sure which terms to use. If you can find a duplicate, thanks, I will delete this question.
I've heard the history.js is the "best" deep linking ajax library because it has the best compatibility for older browsers. However every demo I have seen of this lib changes the URL using a ? character like /my/url?key=value or something like that.
I really like the slider on github when browsing through the source tree of a project. Clicking a folder for example will load the contents of the folder asynchronously while changing the full URL in the browser, without any hashes or querystring garbage.
Does anyone know if there is a library that accomplishes this? I'm not opposed to a library that would not work in non-html5 compliant browsers. Should I just use the pure HTML5 push state API?
PJAX (push-state ajax) is probably your best bet for this https://github.com/defunkt/jquery-pjax.
In uses the push-state API to allow it to use real URL's and if a browser doesn't support the push-state API, then it simply falls back to letting links work as normal (rather than loading page sections via AJAX).
If your not a JQuery user and still like the idea of PJAX, there's also an alternative standalone implementation (plugged shamelessly because i wrote it) you can get at https://github.com/thybag/PJAX-Standalone

Multiple file upload (client side)

I'm looking for multiple file upload component with alternative ways.
I need HTML5, Flash and normal upload support, depended by device.
I don't like FancyUpload, because it uses mootools and mootools is very big library.
Also I can't use jQuery, because I'm writing on Ext js and it's not good idea to use two big library like jQuery and Ext js.
I can write it myself but I don't have a time.
If everyone knows any library like this, please post link here.
Thanks!
I am a big fan of Plupload
Here is an example of all run times supported (Flash, HTML4, HTML5, etc...): http://www.plupload.com/example_all_runtimes.php
You can also include only the run times you want.
Here is an ExtJS 4 wrapper I wrote for SWFUpload: https://github.com/JarvusInnovations/Ext.ux.SWFUpload
I'm interested in having a more robust ExtJS4 upload widget though that supports HTML5 and normal form upload too. Maybe we can build one if nothing else turns up.

Is it possible to upload a file with AJAX and no iframe or Flash?

Every time I have looked into AJAXy file uploading, an iframe has always been used underneath, somewhere.
Is it possible to upload a file using AJAX and no iframe or Flash? How about in the more recent versions of Firefox and Chrome?
I'm debating with my co-workers, arguing that you cannot perform an AJAXy upload with pure Javascript, since you cannot read the file contents from the user's harddrive in order to pass in the file contents via the AJAX call to the server side script.
You can use the file API on firefox (3.6 and above) and I think the latest webkit supports it as well (not sure) though.
I did a Mootools plugin that works on FF:
http://mootools.standupweb.net/dragndrop.php
You can use famous jQuery Uploadify plugin.
Uploadify is a jQuery plugin that
integrates a fully-customizable
multiple file upload utility on your
website. It uses a mixture of
Javascript, ActionScript, and any
server-side language to dynamically
create an instance over any DOM
element on a page.
I also use Valums File Uploader

How do I implement bread-crumb navigation similar to Facebook?

I'm trying to make an Ajax Web Application that uses bread-crumbing to allow the use of the Back and Forward Buttons, but still have that slick ajax page movement.
An excellent example is Facebook's image gallery.
When you click 'Next' the URL changes to the respective URL but the entire page does not update. It's a really smooth interface and I'd like to mimic that.
Anyone got a tutorial/write up on how this works?
Thanks.
Facebook uses the URL-Anchor-Identifier to store the code needed for their AJAX code. This allows changing the URL without having the website reloaded.
Example: http://somedomain.com/#ajax_data_here
Now it's to you to write a smart format for your ajax data and to parse that data.
Update Dec 2012:
I've recently encountered the following method for changing the path within the URL without reloading. Although it only works with newer browsers, I thought I'd append it:
Modify the URL without reloading the page
As far as I am aware there are two main ways that this effect is achieved:
Using the anchor portion of the url (#gallery)
Using a hidden iframe
There are pre-built solutions that you can use to leverage this kind of functionality without having to deal with writing the code. For example if you are working with asp.net then you can use the Ajax History Control:
http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-history-control
If you are using JQuery, look at the Address plugin.
http://www.asual.com/jquery/address/
If you're using jQuery, there are lots of suggestions documented here: https://stackoverflow.com/questions/116446/what-is-the-best-back-button-jquery-plugin
I've personally used jQuery Address, and it's super easy and very effective.

Insert an ajaxified Webpart into an existing MOSS site

I need to code a webpart which purpose is to asynchronously fetch some documents and display them into an existing page. Unfortunately I have to face a lot of rescritcions and my struggle to find a solution seems useleess so far.
1) I cannot use Microsoft asp.net ajax
2) I must use Jsonp because the called service (page, whatever...) is outside the site's domain. That's not a big problem.
3) I have no possibility to alter the existing page code, so I cannot reference an external library such as JQuery.
4) For the same reason I have no possibility to call my methods on the window.onLoad event, so here the question is: how can I be sure that everything is correctly loaded before triggering my ajax call?
5) Since several instances of the same webpart can be placed into the same page, can there be some possible conflicts among the various js functions?
D'oh
D'oh #2
jQuery is just a wrapper for native JavaScript calls. If you can, get them to waive this restriction because if you're doing anything remotely complex you're going to go insane over browser compatibility.
Use _spBodyOnLoadFunctionNames.push(functionName) to accomplish this.
Depends entirely on the JS coming in. We'd need more clarification.
Can't you just call the 3rd party page using server-side code (e.g., WebClient)? You may have to adjust the site's trust levels for this.
For client-side, I believe you can still "inject" the jQuery code into the markup.
Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
document.write(unescape("%3Cscript src='/path/to/your/jquery' type='text/javascript'%3E%3C/script%3E"));
}
</script>
What about using a page viewer web part to display the page that is hosted elsewhere (ie not on your SharePoint server)? That page could retrieve the documents for you.

Categories