1

I have trying to create a web page ussing php and ajax to let users upload files to imm using its API:

http://imm.io/api/ (feel free to take a look because it is just a simple example)

I would like to know how to upload dynamically using jquery, the idea is reproduce the workflow below:

  1. the user complete the form
  2. when the submit button is clicked, it will take the form values and sent them to imm.io
  3. wait until the json response is received
  4. show the error/success message updating a div

My code:

var request = $.ajax({
      url: 'http://imm.io/store/',
      type: "POST",
      cache: false,
      data: { ??? },  //here my problem resides
      dataType: "json"
    });

    //waiting ultil the request be finished
    $.when( request ).then(function(data, textStatus, jqXHR){
        console.log(data);
    });

If you note above, the ??? represents where the problem resides, because I don't know how to sent the file value into the json format thar "data" needs.

Seeing some questions here in SO looks like ajax is not able to send files.

So, I just need a hand to guide to the right direction.... One more thing: I never has used the CURL php extension, but I thing that could be another option, right?

EDIT, I forgot tell you why I did not use the plugins mencioned in the questions above: because that plugins don't wait until the request was completed, so, I never get the real response form the server.

Community
  • 1
  • 1
manix
  • 14,537
  • 11
  • 70
  • 107
  • Do you know if the api supports (cross origin)ajax posts? Doesn't look so. – Musa Feb 05 '13 at 05:08
  • the documentation is not clear, so I am not sure – manix Feb 05 '13 at 05:26
  • @Musa, imm.io accepts images on base64. is it helpfull? – manix Feb 05 '13 at 05:30
  • Checkout https://developer.mozilla.org/en-US/docs/DOM/FileReader#readAsDataURL() – Musa Feb 05 '13 at 05:32
  • `use toDataURL() to get the base64 representation (actually, it's a data: URL but it contains the base64-encoded image).` I thing that this is the correct way :p I will update here as soon as possible, thank you @Musa – manix Feb 05 '13 at 05:36

1 Answers1

1

I found a good tutorial on this. Also a jquery plugin

Hope that helps ;)

hek2mgl
  • 152,036
  • 28
  • 249
  • 266
  • Do you use IE or something? – Musa Feb 05 '13 at 04:43
  • Checkout http://caniuse.com/xhr2 and https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData#Browser_compatibility – Musa Feb 05 '13 at 04:48
  • @hek2mgl, do that plugin implements something similar to `$.when()` function? I will test it, but maybe you can hint me. – manix Feb 05 '13 at 04:48
  • @Musa That sounds really cool! Looks like I should update some js basics.. Having mostly coded backend since years.. :) – hek2mgl Feb 05 '13 at 04:50
  • 1
    imm.io does not accept ajax requests. So, I will find another solution – manix Feb 05 '13 at 15:25
  • Nice to see you again :). I've also investigated this. In detail imm.io answer's an HTTP OPTIONS request with 404.. I'm continue to find a workaround ;).. One easy workaround might be to use PHP as proxy. Do you know how to achieve this? – hek2mgl Feb 05 '13 at 15:28
  • Yes, my code got back a 404 request (I thought that was just me), for that reason I kept going and found this [imgur alternative](http://stackoverflow.com/questions/14566906/how-to-do-curl-php-using-ajax-to-make-a-live-request). I think that this example use php as a proxy, right? because the POST request is made in help with CURL extension, finally, a iframe is used to make the trick in order to upload the with ajax. I will study this code deeply, and then I will try to implement it with imm.io. So, once I have any updated on this I will advice you, ok? thank you so much :) – manix Feb 06 '13 at 14:33