CODEWITHSUNDEEP
javascriptjqueryfile-uploadblueimp
Tom
Tom

Reputation: 303

how to use own file process handler on blueimp jQuery File Upload?

I got my own PHP image file upload process handler. I was just looking for a jQuery solution to optimize upload bar and multiple file selections. So I spent some hours to get into jQuery File Upload - no ui, basic setup. I did all the js changes I need and tried to implement it to my existing file upload form.

But now I realize, the /server/php/UploadHandler.php is nessassary to the jQuery scripts. Without this php file, I don't get to the "done" event.

I don't want to make use of the file processing UploadHandler class, because I got a lot of own steps, like watermarking, that needs to be processed on uploaded image files. I like to do something like this:

done: function (e, data) {
    // alert('done!');
    document.upload.submit(); // existing upload form including jQueryFileUpload
},

How do I get rid of the file processing in this PHP Class? I just want "jQuery File Upload" to offer a nice multipart file selection, a jQuery image preview and it's great processing bar.

Is there a way to stop PHP touching files?

Upvotes: 1

Views: 2255

Answers (1)

King of Dinkel
King of Dinkel

Reputation: 83

I had a similar issue. We wanted a file upload inside an HTML form along with some other data, not a simple upload. For this the provided PHP class isn't sufficient.

You can write your own PHP upload handler easily, use the provided one as reference. Or use some other backend technology. Important was to use the url to the backend upload handler as the form action.

In the JS you have to overwrite the "add" Option of the fileupload widget, if you don't want to submit immediately. "done" is only useful for evaluating the result. We saved the data inside the add handler in a closure variable and used it to submit, when the user wants to submit. By this the other form data is sent with the upload request automatically. Like this:

(function()
{
  var uploadData;
  $("#uploadInput").fileupload(
  {
    add : function(e, data)
    {
      uploadData = data;
    },
   ... other options ...
  });
  $("#submit").submit(function()
  {
    if (uploadData != null)
      uploadData.submit();
   }
})();

Not sure if that works for multiple uploads, but I hope this helps.

Upvotes: 2

Related Questions