2

I know this question might be too generic, but after spending whole day with it I'm pretty lost on this one.

Anyone knows of uploader plugin, that would integrate easily with existing form?

All the uploader plugins I tried - jQuery File Upload, Plupload, Uploadify, Dropzone.js - work great for files submission, but are impossible to integrate into existing form - usually they require some files in the queue to submit the form at all, have troubles to submit other form fields etc.

I need something as simple as: the user fills the form, drags the files on the dropzone (or doesn't, if he doesn't want to submit any) and submits the form. I don't even need Ajax form submission (altough I would like to have it).

Any tips?

user1049961
  • 2,656
  • 9
  • 37
  • 69
  • Take a look at [Fine Uploader](http://fineuploader.com). It has a feature that makes integration with existing forms trivial and powerful. You can read more about that specific feature at http://docs.fineuploader.com/branch/master/features/forms.html. Full disclosure: I'm a developer on this product. – Ray Nicholus Apr 06 '14 at 11:40
  • Thanks! That looks really cool. Does it simply add files into queue and submit them when the user submits the form? – user1049961 Apr 06 '14 at 11:48
  • It will look for a form submit as a cue to upload the files. In fact, it will intercept the form submit and then upload files including any form data without refreshing the page. Another thing it does that the answers below don't handle: it will respect any html5 form validation attributes you place on the form elements. The doc I linked to covers all of this in detail, if you're interested. – Ray Nicholus Apr 06 '14 at 11:52
  • I saw the doc, thanks. I'm currently using jQuery Validate in my form. Would it be possible to use it's `submitHandler` to submit the data via Ajax? Or is there other way to submit the whole form via Ajax? Basically, what I need is to submit all form data and files in one run via POST- in my PHP code I'm first creating the record in db, than uploading the files into SugarCRM via it's REST API. – user1049961 Apr 06 '14 at 11:56
  • I'm not sure what "in one run" means, but when you want all files to be uploaded with the associated data, just submit the form. You can do this programmatically if you wish. Your CRM, API, and server-side language are not relevant here. – Ray Nicholus Apr 06 '14 at 14:59

2 Answers2

0

If you don't want to use Ajax File upload, then you don't need to use any plugin. Just use the simple (default) form submission (input submit click).

That would be just like adding more input fields as :

<input type="file" name="somename" />
<input type="file" name="somename2" />

Now on the server-side you need to loop for each of the file. I am better in ASP.NET so, I would tell you how to do that in ASP.NET, if you're using some other language you might still get the main trick or idea.

for(int i =0; i < numFiles; i++) {
    var uploadedFile = Request.Files[i];
    /* save it! */
}

The above mentioned is a for loop, where you are looping equall to the number of files sent along with the HttpRequest. And you get each of the file and do what you want to do on it.

This one is simple! You can change the code for your own language such as PHP etc.

Afzaal Ahmad Zeeshan
  • 15,669
  • 12
  • 55
  • 103
0

AJAX file uploads are fairly easy when you strip away the extra features:

var fd = new FormData(form);

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", function(e) {
    // Handle progress
}, false);

xhr.addEventListener("load", function(e) {
    if( xhr.status == 200 ) {
        // Handle success
    } else {
        // Handel error
    }
}, false);

xhr.addEventListener("error", function(e) {
    // Handle error
}, false);

xhr.addEventListener("abort", function(e) {
    // Handle abort
}, false);

try {
    xhr.open('POST', 'http://server.com/uploader.php', true);
    xhr.send(fd);
} catch(e) {
    // Handle error
}
TwHello Inc
  • 601
  • 4
  • 6