file upload with JSON+AJAX?

[kj]

I would like to convert a form that currently uses the traditional
CGI sequence (i.e. the action associated with the form sends a POST
request to a server-side CGI script) to one that uses AJAX to send
a JSON-encoded request to a remote web service.

The stumbling block I'm running into is that one of the inputs in
the form is a file upload element, and I can't figure out how to
include the data from the specified file in the JSON payload. Is
there a way to do this?

TIA!

Kynn

 

[VK]

I can't figure out how to
include the data from the specified file in the JSON payload. Is
there a way to do this?

No. XHR doesn't allow local file access, so for the file upload you
have to use traditional forms.

 

[Thomas 'PointedEars' Lahn]

No. XHR doesn't allow local file access,

It does when running locally.

so for the file upload you have to use traditional forms.

Correct.


PointedEars

 

[Thomas 'PointedEars' Lahn]

It does when running locally.

It also does when running via HTTP, and the required privileges are granted,
or when running out of the sandbox.

PointedEars

 

[kj]

It also does when running via HTTP, and the required privileges are granted,
or when running out of the sandbox.

I'm not familiar with either of these two possibilities. I'm
particularly intrigued by the first one. How can a web app request
the necessary privileges?

Thanks in advance!

Kynn

 

[slebetman]

I'm not familiar with either of these two possibilities. I'm
particularly intrigued by the first one. How can a web app request
the necessary privileges?

A web app can't programatically request the necessary privileges. The
user needs to either set preferences in his browser or grant
premission to do it. Obviously not all browsers have a let-really-
dangerous-code-access-my-harddisk preference to set. I believe you can
enable such a feature in firefox using about:config.

 

[Thomas 'PointedEars' Lahn]

A web app can't programatically request the necessary privileges.

Yes, it can. I have posted a proof-of-concept here before.

The user needs to either set preferences in his browser or grant
premission to do it.

As for the latter, that is why it is called a privilege *request*.


PointedEars

 

[Captain Paralytic]

The stumbling block I'm running into is that one of the inputs in
the form is a file upload element, and I can't figure out how to
include the data from the specified file in the JSON payload. Is
there a way to do this?

There is a way to achieve the effect. I pointed out in a recent
discussion on this forum that Google Mail performs an AJAX type upload
of attachments. If you search back for the discussion, I think you'll
find that the solution had something to do with using an iframe.

http://groups.google.co.uk/group/co...814a5b?lnk=gst&q=google+mail#d391d5edba814a5b

 

[Captain Paralytic]

There is a way to achieve the effect. I pointed out in a recent
discussion on this forum that Google Mail performs an AJAX type upload
of attachments. If you search back for the discussion, I think you'll
find that the solution had something to do with using an iframe.

http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thre...

Here is sample code:
http://www.ajaxonomy.com/2008/ajax/upload-files-asynchronously

 

[Thomas 'PointedEars' Lahn]

Here is sample code:
http://www.ajaxonomy.com/2008/ajax/upload-files-asynchronously

While it certainly is possible, although not generally feasible, to upload
local files *through XHR*, on a closer look you will realize that this
solution is _not_ what was being asked for. Instead, it implements the
already proposed solutions of using a (static or dynamically generated;
here the former) HTML form to submit the information. The only real
difference to a non-scripted form is that the form is submitted with
scripting.

The very resource you have referred to correctly confirms that:

| How to upload files asynchronously?
|
| As I described above You can’t upload files using AJAX. Some time ago I
| wrote a JavaScript file upload object which as You already understood can
| help developers make forms which upload files asynchronously. [...]


PointedEars

 

[Captain Paralytic]

Here is sample code:
http://www.ajaxonomy.com/2008/ajax/upload-files-asynchronously

While it certainly is possible, although not generally feasible, to upload
local files *through XHR*, on a closer look you will realize that this
solution is _not_ what was being asked for. Instead, it implements the
already proposed solutions of using a (static or dynamically generated;
here the former) HTML form to submit the information. The only real
difference to a non-scripted form is that the form is submitted with
scripting.

The very resource you have referred to correctly confirms that:

| How to upload files asynchronously?
|
| As I described above You can’t upload files using AJAX. Some time ago I
| wrote a JavaScript file upload object which as You already understood can
| help developers make forms which upload files asynchronously. [...]

PointedEars

And I very carefully worded my post as "There is a way to achieve the
effect.", acknowledging that one got the "effect" of an AJAX upload,
but not a real AJAX upload.

So what's your problem?

 

[Thomas 'PointedEars' Lahn]

The stumbling block I'm running into is that one of the inputs in
the form is a file upload element, and I can't figure out how to ^^^^^^
include the data from the specified file in the JSON payload. Is ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
there a way to do this? ^^^^^^^^^^^^^^^^^^^^^^^
There is a way to achieve the effect. I pointed out in a recent ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
discussion on this forum that Google Mail performs an AJAX type upload
of attachments. If you search back for the discussion, I think you'll
find that the solution had something to do with using an iframe.
http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thre...
Here is sample code:
http://www.ajaxonomy.com/2008/ajax/upload-files-asynchronously

While it certainly is possible, although not generally feasible, to upload
local files *through XHR*, on a closer look you will realize that this
solution is _not_ what was being asked for. [...]

And I very carefully worded my post as "There is a way to achieve the
effect.", acknowledging that one got the "effect" of an AJAX upload,
but not a real AJAX upload.

So what's your problem?

Apparently your "effect" statement in relation to the stated requirement was
too ambiguous to be left alone, to say the least. For the desired effect
was to have the file content included *"in the (submitted) JSON payload"*,
which cannot be achieved with a file input control.


PointedEars