Plupload custom configure issue, any ideas? - php

I've been working for a bit on this code, making in function just as I'd like it, but in the end I guess I missed something pretty big: the files don't seem to be uploading. The progress bar has been perfectly tweaked, the dialog box works well, just no files are being uploaded.
What's going on?
My Javascript:
fileCount = 0;
barWidth = 0;
$(function() {
var uploader = new plupload.Uploader({
runtimes : 'flash',
browse_button : 'pickfiles',
max_file_size : '10mb',
url : 'js/upload/upload.php',
resize : {width : 700, height : 700, quality : 90},
flash_swf_url : 'js/upload/plupload.flash.swf',
filters : [
{title : "Image files", extensions : "jpg,gif,png"},
]
});
uploader.bind('Init', function(up, params) {
});
uploader.bind('FilesAdded', function(up, files) {
$.each(files, function(i, file) {
fileCount ++
$('#uploadfiles').fadeIn(200);
$('#filelist').append(
'<div id="' + file.id + '">' +
file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
'</div>');
});
});
uploader.bind('FileUploaded', function(up, file) {
console.log(file.name);
$('#'+ file.id).fadeOut(200);
});
uploader.bind('UploadProgress', function(up, file) {
barWidth = barWidth+(file.percent/fileCount)
$('#progressBar').animate({"width":barWidth+"%"},300);
if (barWidth == 100 ) {$('#progressBox').delay(2000).fadeOut(200)};
});
$('#uploadfiles').click(function(e) {
e.preventDefault();
$('#filelist').fadeIn(200, function() {
$('#progressBox').fadeIn(200, function() {
uploader.start();
});
});
});
uploader.init();
});
My HTML (updated per comment below):
<form method="post" action="js/upload/upload.php" enctype="multipart/form-data">
<div>
<button id="pickfiles" href="#">Add...</button>
<button id="uploadfiles" href="#">Upload</button>
<br />
<div id="filelist"></div>
<div id="progressBox"><div id="progressBar"></div></div>
</div>
</form>

I think your answer lies in what the upload.php file does when it receives the post. Check the file associated wiuth your config line:
url : 'js/upload/upload.php'
I had a similar problem (in ASP.NET) where the upload directory did not exist.
Hope that helps.

Related

How do I receive appended data using dropzone using PHP

I am trying to use dropzone to upload an image, and pass the folder to upload the image to.
My html form:
<form action="upload.php" class="dropzone" id="dropzoneFrom"></form>
<br>
<div align="center">
<button type="button" class="btn btn-info" id="submit-all">Upload</button>
My JS Script:
$(document).ready(function(){
Dropzone.options.dropzoneFrom = {
autoProcessQueue: false,
acceptedFiles:".png,.jpg,.gif,.bmp,.jpeg",
// Initiate the button
init: function(){
var submitButton = document.querySelector('#submit-all');
myDropzone = this;
submitButton.addEventListener("click", function(){
myDropzone.on("sending", function(file, xhr, formData) {
formData.append("folder", "04"); // Append the folder to upload to.
});
myDropzone.processQueue();
});
this.on("complete", function(){
if(this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0)
{
var _this = this;
_this.removeAllFiles();
}
});
},
};
I am appending the additional folder to upload to like this:
myDropzone.on("sending", function(file, xhr, formData) {
formData.append("folder", "04"); // Append the folder to upload to.
});
But in my upload.php page, how do I receive this information? I am currently receive the file and processing it like this:
if(!empty($_FILES)){
$temp_file = $_FILES['file']['tmp_name'];
$location = $folder_name . $_FILES['file']['name'];
move_uploaded_file($temp_file, $location);
}
I found this page which gives a really good modelled example showing that you simply use the $_POST['folder'] request:
https://gist.github.com/kreativan/83febc214d923eea34cc6f557e89f26c

Ajax: Getting a Post Error when trying to use Relative Path

Struggling to get the relative path of an Ajax post request to pickup the php file. I'm not getting an error just nothing happens.
Browsed this site, but cannot find a previous answer on Ajax relative paths that I understand. Still a novice at this. Would really appreciate it, if someone could explain it in layman terms.
I'm trying to access the php file 'search/search.php' from the root file 'index.php' (this file contains the Ajax request). This worked when both files were in the same directory.
File structure below:
JQuery code snippet:
$(function() {
$('form').on("submit", function(e) {
e.preventDefault();
$('#error').text(""); // reset
var name = $.trim($("#search").val());
if (name.match(/[^a-zA-Z0-9 ]/g)) {
$('#error').text('Please enter letters and spaces only');
return false;
}
if (name === '') {
$('#error').text('Please enter some text');
return false;
}
if (name.length > 0 && name.length < 3) {
$('#error').text('Please enter more letters');
return false;
}
$.ajax({
url: 'search/search.php',
method: 'POST',
data: {
msg: name
},
dataType: 'json',
success: function(response) {
$(".content").html("")
$(".total").html("")
if(response){
var total = response.length;
$('.total') .append(total + " Results");
}
$.each(response, function() {
$.each($(this), function(i, item) {
var mycss = (item.Type == 1) ? ' style="color: #ffa449;"' : '';
$('.content').append('<div class="post"><div class="post-text"> ' + item.MessageText + ' </div><div class="post-action"><input type="button" value="Like" id="like_' + item.ID + '_' + item.UserID + '" class="like" ' + mycss + ' /><span id="likes_' + item.ID + '_' + item.UserID + '">' + item.cntLikes + '</span></div></div>');
});
});
}
});
});
});
The leading forward slash simply means “begin at the document root”, which is where index.php lives. So /search/search.php should be correct. If the server is unable to find the file, it stands to reason that there must be some url rewriting happening.
You can test by simply pointing your browser to http://localhost:8000/search/search.php. If you get a 404, you know it has nothing to do with ajax

Jquery-fileupload plugin - uploads file but says 'file upload failed'

I click 'Add files' choose a file it then creates a thumbnail (depending on browser) and displays the 'Upload' button beneath it.
when I click 'Upload', sometimes it uploads the file and says 'File upload failed.' - the file is actually uploaded but I still get this message. Sometimes it doesn't upload and i get the same message.
I have two errors -
1st is in the PHP error log 'PHP Warning: exif_imagetype(): Filename cannot be empty in ***\***\UploadHandler.php' I don't get it all the time though.
2nd is jquery.validation on the page - 'Uncaught Error: Syntax error, unrecognized expression: [name=files[]]'
In the debugger it jumps straight to '.on('fileuploadfail', function (e, data)' without going anywhere else and once that completes it refreshes the whole page..guess I need a 'return false' somewhere?
Thanks for your help.
HTML:
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
Javascript:
var filepower = function () {
'use strict';
var url = 'server/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();
});
});
$('#fileupload').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('#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);
$('#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');
};
You didn't post your source code, but if you can add to the response on the server, then you can fix it by implementing the return structure here:
https://github.com/blueimp/jQuery-File-Upload/wiki/JSON-Response
I can't help you if you can't change the server, though the library author says there's a way to modify/over-ride the expected JSON fields so it doesn't error out.
Either return an appropriate expected response from the server or get data.jqXHR . this will contain the response from the server. you can use that to check whether upload was successful or not.

jQuery file uploader showing error when restrictions has been added

I wanted a jQuery multi file uploader with process bar. Thats why I went to this url. In this there is one option called basic. I just downloaded all the files and I used only the basic.html file. With basic.html files code I can easily upload files. But I want some restriction so that user will only upload some kind of files like png,jpg and gif only. So to use restriction in upload I checked for documentation and I got this link.
So I mixed all the codes like this
<div class="container">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Select files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
<br>
</div>
<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === '' ?
'//jquery-file-upload.appspot.com/' : 'server/php/';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
options: {
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
processQueue: [
action: 'validate',
acceptFileTypes: '#',
disabled: '#disableValidation'
]
},
processActions: {
validate: function (data, options) {
if (options.disabled) {
return data;
}
var dfd = $.Deferred(),
file = data.files[data.index],
if (!options.acceptFileTypes.test(file.type)) {
file.error = 'Invalid file type.';
dfd.rejectWith(this, [data]);
} else {
dfd.resolveWith(this, [data]);
}
return dfd.promise();
}
}
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
But here I can't upload any files also I can't get restriction in upload. After all this codes in my firefox console tab I got an error like
SyntaxError: missing ] after element list
action: 'validate',
Can someone kindly tell me why this error is here? How to solve this? Any help and suggestions will be really appreciable. Thanks..
Missing a comma there between literal objects, after processActions
/*jslint unparam: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === '' ?
'//jquery-file-upload.appspot.com/' : 'server/php/';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
options: {
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
processQueue: [
action: 'validate',
acceptFileTypes: '#',
disabled: '#disableValidation'
],
processActions: {
validate: function (data, options) {
if (options.disabled) {
return data;
}
var dfd = $.Deferred(),
file = data.files[data.index],
if (!options.acceptFileTypes.test(file.type)) {
file.error = 'Invalid file type.';
dfd.rejectWith(this, [data]);
} else {
dfd.resolveWith(this, [data]);
}
return dfd.promise();
}
},
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}
} // end of options
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});

How to put var url in javascript?

I have made a declaration like this in php (taken from WordPress path url in js script file):
<script type="text/javascript">
var templateurl = "<?php bloginfo('template_url') ?>";
</script>
then i have this code in my javascript (myjava.js):
init : function(ed, url) {
ed.addCommand('mcearrow_shortcodes', function() {
ed.windowManager.open({
file : url + '/interface.php',
width : 410 + ed.getLang('arrow_shortcodes.delta_width', 0),
height : 250 + ed.getLang('arrow_shortcodes.delta_height', 0),
inline : 1
}, {
plugin_url : url
});
});
ed.addButton('arrow_shortcodes', {
title : 'arrow_shortcodes.desc',
cmd : 'mcearrow_shortcodes',
image : url + '/btn.png'
});
ed.onNodeChange.add(function(ed, cm, n) {
cm.setActive('arrow_shortcodes', n.nodeName == 'IMG');
});
},
I want to change all the 'url +' with templateurl, I've tried to use this:
file : templateurl + '/includes/scripts/interface.php'
But it doesn't work. It doesn't load the interface.php. However, if I use 'url +', the interface.php is loaded perfectly.
Problem is, I want to put my interface.php in different folder. Not in the same folder where myjava.js is located.
What's the correct way to use my templateurl variable?
Many thanks!
Do the templateurl has the value? Please check it. You are assigning php variable so please echo it.
<script type="text/javascript">
var templateurl = "<?php echo bloginfo('template_url') ?>";
</script>

Categories