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

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?

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.

Related

Clear File List in Fine Uploader in purpose to reupload just one file

I use fine uploader to upload just one file on 'edit entity' page. Entity should have one file assosiated with it. I should show user a popup message with error if he selects more than 1 file in file browser while uploading. I want to set limit to fineUploader and use this setting:
itemLimit: 1
The issue is that if I load one first file it works ok, but if I try to reload it I have validation error (I have my own code for UI that clears control(link) with uploaded file and writes new link there). I know that error appiars because there is a fileList inside Fine Uploader and for it I upload - not reload - another file.
I tryed some code to clear fine uploader state. For example:
onComplete: function (id) {
qq(this.getItemByFileId(id)).remove();
},
But it works only for UI elements, not for "inside" data.
Actually, after several hours googling this issue it seems to me that my problem doesn't have any solution, but probably someone knows...
ok, so, I found the answer. The function that helped me is reset();
It resets the state of fine uploader and file list, sure, also. Now I have validation for case if user select several files for upload in file browser and at the same time I don't have any erros while uploading ONE file several times. Here is my version of 'onAllComplete' event.
onAllComplete: function (succeeded, failed) {
//some code that saves file on the server
this.reset(); // the fix
},

keep file order using jquery file upload

I was looking at the upload script here:
http://demo.tutorialzine.com/2013/05/mini-ajax-file-upload-form/
It is using jquery file upload to upload multiple files at once. I would like to know how to pass the order of the files that were selected to the upload.php script. ie. if you have 1.jpg, 2.jpg, 3.jpg, 4.jpg, and 4 finishes uploading first, can upload.php receive a variable that tells it that it is the 4th image that was selected? Does jquery file upload have a way of adding the order to the form action perhaps?
Thanks in advance.
It should automatically upload and read the data in the order it was received once it hits the upload.php layer. So just make sure you upload the files in the order you want them.
Well it was a really easy fix once I found it. There is a variable in the jquery.fileupload.js file called sequentialUploads. Set it to true, and it will force the order of uploads to be the order in which the files are selected.

Remote form - XLSX download

I have a form, where user can select values from collection of check boxes to filter data. Form posts to controller where xlsx format is defined to download xlsx file. I am using axslx_rails.
Now, I would like something to happen before and after the remote call.
And it works ok.
What I can't figure out is how to actually download a xlsx file as the respond block goes to JS format, not xlsx, which is something liek this:
format.xlsx { response.headers['Content-Disposition'] = 'attachment; filename="test.xlsx"'}
So, it works either one or the other way. Non-remote form downloads file as i have a format: xlsx defined. If i do a remote form, javascript works (show spinner, hide spinner, etc...), but file is not downloaded.
How can I achieve both?
Thx
OK, i've given up and went with a solution:
to save file to disk (to some publicly accessible location)
download file via jQuery fileDownload plugin
delete file
Seems like the best solution currently for what i need.
If someone has a more elegant solution, without extra JS library involved...

PHP: Check if there's an active PHP upload

Is it possible to check if there's an active file upload via PHP?
I guess this would have to be done using JS if there was any way at all but I'm unsure of where to start. From Googling, I think ignore_user_abort() may be the function I need as that way I wouldn't have to worry about any checks, but it would be interesting to find out if JS can detect an active PHP upload
PHP is a server side language so once the php code is executed there is either no new file uploaded or there is a new file uploaded, it's never executed during a file upload because the file upload is attached to the request to run the php.
Unless you handle the execution of the submit form by javascript there is no way to track the uploading of a file because the moment you press submit in a normal html field the javascript on the page stops executing because the browser is working on the new page that is being loaded.

jquery file upload send all files in one post

I am using jquery file upload. I use it for several pages in a project. For one project I need to upload all the files in one request because I loop trough all the images and after that, a dossier is created and closed. I think it's faster to send all the images at once instead of changing the server side handler. Only thing is, I can't get them together. I founded the option singleFileUploads, this works, but only if you select all the files at once. If drag and drop 2 times, it still uploads in 2 posts (and it makes 2 dossiers.
I have read the documentation (https://github.com/blueimp/jQuery-File-Upload), but can't find out how to get it work. (i know that this is a plugin specially made for multiple posts)
So basically my question is, does anyone know how to get the inserted files before uploading so i can group them and serialize them.
Thnx,
This post might help you:
Multiple File Upload Input
Unfortunately, it does not support IE. But there is still a Flash-based plugin (free) can do that, of course it also supports multi browsers.
Check it out: Demos - Uploadify
You can upload your files during form submit.
var submitFormData = true;
$('#fileFieldId').fileupload({
dataType : 'json',
autoUpload : false,
add : function(e, imageData){
$("#yourFormId").on("subimt",function(){
if(sendData){
imageData.formData = $("#yourFormId").serializeArray();
submitFormData = false;
}
imageData.submit();
});
},
done: function(e,data){
submitFormData = true;
}
});

Categories

Resources