blueimp jQuery-File-Upload without ajax

Question

I really love the client side processing of selecting a file and having a preview with the option to cancel or delete.

However i want to upload the page with a form and i don't need to use ajax. I have been fiddling with all the options and i cant find anyway to post to form with the files selected synchronously.

Is it possible to get data.files to post with the form?

Baxter

A file upload without AJAX is pretty simple in most languages. It seems that your question is not quite clear. whathaveyoutried.com – Cockshy

Jay Blanchard have you used the blueimp jQuery-File-Upload? I understand that's its very simple to do a file upload without ajax, that wasn't my question. My question was using blueimp jQuery-File-Upload to do a synchronous form post. – Baxter

Posting files with a form requires an upload component to go along with the form posting component, but I am unsure what you mean bt "synchronous" in this context? Do you meaning posting the form data and uploading something at the same time? If so see this - github.com/blueimp/jQuery-File-Upload/wiki/… – Cockshy

@JayBlanchard He meant submitting the form normally (without ajax). The Jquery-File-Upload would only be used as the GUI. So a user can add files, remove files, drop files, etc. When he is all done, and has filled out the rest of the form, he hits submit and the entire form is submitted and processed on the backend as it would have been processed without the JQuery-File-Upload. Any ideas? – Cutworm

@Cutworm This question is 5 years old, and is overly broad and unclear. Do you have a question about doing this? It really doesn't make much sense to upload the file with AJAX and upload the other information via a standard post. – Cockshy

@JayBlanchard Yes, my question is, how can you do what I'm describing... I'm not explaining myself well because the question isn't broad. Re "It doesn't make much sense to upload the file with AJAX...": The file is not being uploaded via AJAX, it is being uploaded with all the other information in the form. The question is how to use only the GUI that Jquery-File-Upload provides. Or, conversely, a straightforward way to code this funcitonality (add, remove, drop files). – Cutworm

You would create a form which is processed by a server-side script (PHP in this case) which is fairly normal client server interaction sans JavaScript @Cutworm – Cockshy

@JayBlanchard It is not overly broad or unclear. It's very clear: He wants to post multiple files without ajax and the ability to add files, remove files, etc, specifically using the BlueImp library. He's not asking "Hey, what is easy to do?" or "Hey, I know I said I didn't want ajax, but can you correct me and tell me that ajax is the way to go?" Please answer the question to the T. – Odawa

Ah @Odawa this question is from 2013. Furthermore, the answer to "Is it possible to get data.files to post with the form?" is a "yes". Why "Is it possible?" is not an actual question – Cockshy

Answer 1

You can submit files through a standard form submit using the blueimp jQuery-File-Upload by setting the replaceFileInput option to false.

From the documentation:

By default, the file input field is replaced with a clone after each input field change event. This is required for iframe transport queues and allows change events to be fired for the same file selection, but can be disabled by setting this option to false

Unitarianism

How can we change this option dynamically? I have an autosave(via ajax) form which user can disable and so he should be able to submit form normally. Right now when autosave is off and user submit form, selected file data are not passing to server. – Passerine

Answer 2

Use config replaceFileInput = false;
jQuery('#add_new_product_form').fileupload({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            fileInput: jQuery('#upload-video'),
            replaceFileInput: false,
            ......
})

And controller you will get $_FILES to get video data.

Officinal