I am trying to get the Blueimp Jquery File Upload plugin that works on my website, but for the rest of my life I can’t get it to upload files. I have been working on this all day and am stuck. It will upload the file and send it to the UploadHandler class, but when it tries to complete the handle_file_upload function, it gets:
file_put_contents( $file_path, fopen('php://input', 'r'), $append_file ? FILE_APPEND : 0 );
but always returns 0. I cannot understand why the file will not be downloaded. The complete answer I get is the following:
{"files":[ {"name":"1397489968-32", "size":0, "type":"multipart\/form-data; boundary=----WebKitFormBoundaryrmi4L2ouOmB4UTVm", "error":"File upload aborted", "deleteUrl":"http:\/\/onceridden.demomycms.co.uk\/eshop\/library\/ajax\/?file=1397489968-32", "deleteType":"DELETE"} ]}
ajax.file-upload.php only creates an instance of UploadHandler, nothing more.
If you want to see the full code for UploadHandler, you can download it from github, this is too big a message for me here.
Can someone tell me why the files will not load? Yes, I did the basics, such as checking the CHMOD 777 folder. I tried this with various files of different types (they must be images to work, limited to jpg, png or gif) and sizes; they all give the same result.
As requested, this is a JS file:
$(function () { 'use strict'; // Change this to the location of your server-side upload handler: var url = '/eshop/library/ajax/ajax.file-upload.php', uploadButton = $('<button/>') .addClass('btn btn-primary') .prop('disabled', true) .text('Processing...') .on('click', function () { var $this = $(this), data = $this.data(); $this .off('click') .text('Abort') .on('click', function () { $this.remove(); data.abort(); }); data.submit().always(function () { $this.remove(); }); }); $('#register-photo').fileupload({ url: url, dataType: 'json', autoUpload: false, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, maxFileSize: 5000000, // 5 MB // Enable image resizing, except for Android and Opera, // which actually support image resizing, but fail to // send Blob objects via XHR requests: disableImageResize: /Android(?!.*Chrome)|Opera/ .test(window.navigator.userAgent), previewMaxWidth: 100, previewMaxHeight: 100, previewCrop: true }).on('fileuploadadd', function (e, data) { data.context = $('<div/>').appendTo('#register-files'); $.each(data.files, function (index, file) { var node = $('<p/>') .append($('<span/>').text(file.name)); if (!index) { node .append('<br>') .append(uploadButton.clone(true).data(data)); } node.appendTo(data.context); }); }).on('fileuploadprocessalways', function (e, data) { var index = data.index, file = data.files[index], node = $(data.context.children()[index]); if (file.preview) { node .prepend('<br>') .prepend(file.preview); } if (file.error) { node .append('<br>') .append($('<span class="text-danger"/>').text(file.error)); } if (index + 1 === data.files.length) { data.context.find('button') .text('Upload') .prop('disabled', !!data.files.error); } }).on('fileuploadprogressall', function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#register-progress .progress-bar').css( 'width', progress + '%' ); }).on('fileuploaddone', function (e, data) { $.each(data.result.files, function (index, file) { if (file.url) { var link = $('<a>') .attr('target', '_blank') .prop('href', file.url); $(data.context.children()[index]) .wrap(link); } else if (file.error) { var error = $('<span class="text-danger"/>').text(file.error); $(data.context.children()[index]) .append('<br>') .append(error); } }); }).on('fileuploadfail', function (e, data) { $.each(data.files, function (index, file) { var error = $('<span class="text-danger"/>').text('File upload failed.'); $(data.context.children()[index]) .append('<br>') .append(error); }); }).prop('disabled', !$.support.fileInput) .parent().addClass($.support.fileInput ? undefined : 'disabled'); });
This is pretty much the default file that you get with the plugin, only with an identifier changed according to my form.
Update
After long games and testing, I found that the problem occurs when you change the input name from files to something else. Why I have no idea. This is obviously a problem if you want it to work on multiple inputs per page ...
I created a very simple version of the interface myself, and that makes it possible for me to change the file name, so that this should be something to do with the example that they use. I would like to be able to use preview images and such (something that I could not understand in my simple test), so I need to solve this problem.