I'm working AJAX-ish, as most applications do these days. I have "Dropzone.js" on the page, which I think I decided to use because it had a nice'n'easy photo previewer built in.

It claims to be able to POST the photos and form data as well. But my "POST" action is a custom JS/jQuery thing, so I'm thinking that the form's submit() is never called and therefore Dropzone doesn't do it's thing (my evidence for this is that $_FILES is empty when it gets to the PHP handler). Does this sound reasonable?

Do I need to go ahead and call the form to be submitted? That ruins the no-pageload paradigm. Is this a case for event.preventDefault(), then?

    Not at all familiar with it, but just to make sure: does the form element in question have enctype="multipart/form-data" set?

      Yes. I currently have onsubmit returning false, which could have something to do with it also, but I can't have it redirecting to server.php ... just AJAX POSTing.

      <form onsubmit='return false;' id='add_form' class='dropzone' method='post' action='server.php' enctype='multipart/form-data'>

      Currently working on the theory that since I'm doing my own submission, Dropzone's not being called, and trying to poke around inside it to find a handle ... #thank_God_for_Inspector

        8 days later

        Shouldn't your submit be like:

        <code><form onsubmit='doSomething(); return false;'...</code>

        But, perhaps you need an onmouseover to check for whatever is being dropped and then whisk it along to the submit. I'm not really sure what Dropzone does but it looks rather complete (maybe it's too complete though).

          I think I've sorted it. I'll try and report back after I'm sure/bug is closed.

            OK, here's a report. There's probably some valid criticism deserved, but this is working for me now.

            My requirements: add items to a cart without reloading the page. The catch: the user is creating the items and may include photos, etc. We want them previewable. The crux of our issue: AJAX wasn't posting the photos.

            1. Note that for my own reasons, I'm not ever calling the form's submit() method.
            2. JS reads all the form fields/values and does an AJAX call to a PHP script to do the DB work.
            3. To handle the photos/files, JS needs the Form API; I'm adding the files to the FormData object. If I don't, it appears the form gets sent without them (PHP doesn't see anything in $_FILES).

            var fd = new FormData();

            The following JS is instrumental in doing two things; a] grab the file object being passed from the input for use later (in D.photos ---"D" is a global object we use as a namespace), and b] provide for previewing the files in the "preview_photo" DIV. D.photopager_create() is called when the [input=file] element's onchange event is fired.

            D.photopager_create = function(obj) {

    var i;
    D.photopager_files = [];
    D.photos = {};
    for (i = 0; i < obj.files.length; i++) {

        D.photos[i] = obj.files[i];
        D.photopager_files[i] = window.URL.createObjectURL(obj.files[i]); // for previewing
    }
   //preview the first file
    document.getElementById('preview_photo').src=window.URL.createObjectURL(obj.files[0]);
    D.photopager_index = 0; // var for paging
};

            When the "submit" button is pushed, everything gets appended to fd (the formData object).

                if (typeof(D.photos) ==='object' && Object.keys(D.photos).length) {

        //to get a JS object's size, you must count keys() in the Object Prototype
        for (var i=0; i < Object.keys(D.photos).length; i++) {

            var nn = "file"+i;
            fd.append(nn, D.photos[i]);
        }
    } else {
         // warn user
    }

            Something I learned and didn't expect: in order to get the files passed, I had to instruct jQuery to use a falsy contentType (also "processData"):

            settings = {"method":"POST", 'contentType':false, processData:false, "data":fd};
$.ajax(url, settings).complete(myFunc);

            I THINK that's all I had to do. Thank you folks for your help!!

              Write a Reply...