file upload with JSON+AJAX?

Discussion in 'Javascript' started by kj, May 7, 2008.

  1. kj

    kj Guest

    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
    --
    NOTE: In my address everything before the first period is backwards;
    and the last period, and everything after it, should be discarded.
     
    kj, May 7, 2008
    #1
    1. Advertising

  2. kj

    VK Guest

    On May 8, 12:14 am, kj <> wrote:
    > 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.
     
    VK, May 7, 2008
    #2
    1. Advertising

  3. VK wrote:
    > On May 8, 12:14 am, kj <> wrote:
    >> 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,


    It does when running locally.

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


    Correct.


    PointedEars
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
     
    Thomas 'PointedEars' Lahn, May 7, 2008
    #3
  4. Thomas 'PointedEars' Lahn wrote:
    > VK wrote:
    >> On May 8, 12:14 am, kj <> wrote:
    >>> 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,

    >
    > 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
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
     
    Thomas 'PointedEars' Lahn, May 7, 2008
    #4
  5. kj

    kj Guest

    In <> Thomas 'PointedEars' Lahn <> writes:

    >Thomas 'PointedEars' Lahn wrote:
    >> VK wrote:
    >>> On May 8, 12:14 am, kj <> wrote:
    >>>> 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,

    >>
    >> 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.


    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

    --
    NOTE: In my address everything before the first period is backwards;
    and the last period, and everything after it, should be discarded.
     
    kj, May 8, 2008
    #5
  6. kj

    slebetman Guest

    On May 8, 9:43 am, kj <> wrote:
    > In <> Thomas 'PointedEars' Lahn <> writes:
    >
    > >Thomas 'PointedEars' Lahn wrote:
    > >> VK wrote:
    > >>> On May 8, 12:14 am, kj <> wrote:
    > >>>> 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,

    >
    > >> 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.

    >
    > 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.
     
    slebetman, May 8, 2008
    #6
  7. slebetman wrote:
    > On May 8, 9:43 am, kj <> wrote:
    >> In <> Thomas 'PointedEars' Lahn <> writes:
    >>> Thomas 'PointedEars' Lahn wrote:
    >>>> VK wrote:
    >>>>> On May 8, 12:14 am, kj <> wrote:
    >>>>>> 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,
    >>>> 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.

    >> 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.


    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
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, May 8, 2008
    #7
  8. On 7 May, 20:14, kj <> wrote:
    > 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, May 8, 2008
    #8
  9. On 8 May, 10:49, Captain Paralytic <> wrote:
    > On 7 May, 20:14, kj <> wrote:
    >
    > > 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
     
    Captain Paralytic, May 8, 2008
    #9
  10. Captain Paralytic wrote:
    > On 8 May, 10:49, Captain Paralytic <> wrote:
    >> On 7 May, 20:14, kj <> wrote:
    >>> 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. 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
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
     
    Thomas 'PointedEars' Lahn, May 8, 2008
    #10
  11. On 8 May, 14:34, Thomas 'PointedEars' Lahn <> wrote:
    > Captain Paralytic wrote:
    > > On 8 May, 10:49, Captain Paralytic <> wrote:
    > >> On 7 May, 20:14, kj <> wrote:
    > >>> 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. 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?
     
    Captain Paralytic, May 8, 2008
    #11
  12. Captain Paralytic wrote:
    > On 8 May, 14:34, Thomas 'PointedEars' Lahn <> wrote:
    >> Captain Paralytic wrote:
    >>> On 8 May, 10:49, Captain Paralytic <> wrote:
    >>>> On 7 May, 20:14, kj <> wrote:
    >>>>> 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
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, May 8, 2008
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Florian Frank
    Replies:
    0
    Views:
    245
    Florian Frank
    Jun 30, 2009
  2. elsigh
    Replies:
    0
    Views:
    120
    elsigh
    Mar 31, 2006
  3. sajuptpm
    Replies:
    2
    Views:
    347
    sajuptpm
    Dec 28, 2012
  4. Acácio Centeno
    Replies:
    1
    Views:
    262
    dieter
    Feb 15, 2013
  5. Bryan Britten
    Replies:
    9
    Views:
    269
    Bryan Britten
    May 28, 2013
Loading...

Share This Page