Problem with uploading some files using Blueimp upload + cropper.js - php

I have a system where users can send some photos to the server, and the client receive it to make polaroid versions of them.
The user has the option to crop them or not.
I used Blueimp (https://github.com/blueimp/jQuery-File-Upload) to upload the images and cropper.js (https://fengyuanchen.github.io/cropperjs/) to crop them.
But some users are complaining that some files is not uploading, but no error is shown.
Isn't the extension, isn't the size... I don't know what could be the problem...
In this file (jquery.fileupload-ui.js) I found a line of code that, if I remove it, it works, but I can't see the file's thumbnails. But the file is uploaded. Is the last line before the always function.
add: function (e, data) {
if (e.isDefaultPrevented()) {
return false;
}
var $this = $(this),
that = $this.data('blueimp-fileupload') ||
$this.data('fileupload'),
options = that.options;
data.context = that._renderUpload(data.files)
.data('data', data)
.addClass('processing');
options.filesContainer[
options.prependFiles ? 'prepend' : 'append'
](data.context);
that._forceReflow(data.context);
that._transition(data.context);
data.process(function () {
// return $this.fileupload('process', data);
}).always(function () {
data.context.each(function (index) {
$(this).find('.size').text(
that._formatFileSize(data.files[index].size)
);
}).removeClass('processing');
that._renderPreviews(data);
}).done(function () {
data.context.find('.start').prop('disabled', false);
if ((that._trigger('added', e, data) !== false) &&
(options.autoUpload || data.autoUpload) &&
data.autoUpload !== false) {
data.submit();
}
}).fail(function () {
if (data.files.error) {
data.context.each(function (index) {
var error = data.files[index].error;
if (error) {
$(this).find('.error').text(error);
}
});
}
});

Related

PHP $_POST not seeing data appended to FormData

Okay so I have an uploader script that I customized and it works great. I have 2 more steps that I need to do for it to be complete and it is beyond my scope and I have read and tried numerous things and still am not getting the results that I want.
Again only code that is releative to my issue will be posted as the code works perfect and does not need any changing with the exception of trying to get a value from AJAX to PHP.
FULL JS FILE BELOW:
jQuery(document).ready(function () {
var img_zone = document.getElementById('img-zone'),
collect = {
filereader: typeof FileReader != 'undefined',
zone: 'draggable' in document.createElement('span'),
formdata: !!window.FormData
},
acceptedTypes = {
'image/png': true,
'image/jpeg': true,
'image/jpg': true,
'image/gif': true
};
// Function to show messages
function ajax_msg(status, msg) {
var the_msg = '<div class="alert alert-'+ (status ? 'success' : 'danger') +'">';
the_msg += '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>';
the_msg += msg;
the_msg += '</div>';
$(the_msg).insertBefore(img_zone);
}
// Function to upload image through AJAX
function ajax_upload(files) {
$('.progress').removeClass('hidden');
$('.progress-bar').css({ "width": "0%" });
$('.progress-bar span').html('0% complete');
var productTestID = "333746240";
var formData = new FormData(this);
formData.append('productTestID',productTestID);
//formData.append('any_var', 'any value');
for (var i = 0; i < files.length; i++) {
//formData.append('img_file_' + i, files[i]);
formData.append('img_file[]', files[i]);
}
$.ajax({
url : "upload.php", // Change name according to your php script to handle uploading on server
type : 'post',
data : formData,
dataType : 'json',
processData: false,
contentType: false,
error : function(request){
ajax_msg(false, 'An error has occured while uploading photo.');
},
success : function(json){
var img_preview = $('#img-preview');
var col = '.col-sm-2';
$('.progress').addClass('hidden');
var photos = $('<div class="photos"></div>');
$(photos).html(json.img);
var lt = $(col, photos).length;
$('col', photos).hide();
$(img_preview).prepend(photos.html());
$(col + ':lt('+lt+')', img_preview).fadeIn(2000);
if(json.error != '')
ajax_msg(false, json.error);
},
progress: function(e) {
if(e.lengthComputable) {
var pct = (e.loaded / e.total) * 100;
$('.progress-bar').css({ "width": pct + "%" });
$('.progress-bar span').html(pct + '% complete');
}
else {
console.warn('Content Length not reported!');
}
}
});
}
// Call AJAX upload function on drag and drop event
function dragHandle(element) {
element.ondragover = function () { return false; };
element.ondragend = function () { return false; };
element.ondrop = function (e) {
e.preventDefault();
ajax_upload(e.dataTransfer.files);
}
}
if (collect.zone) {
dragHandle(img_zone);
}
else {
alert("Drag & Drop isn't supported, use Open File Browser to upload photos.");
}
// Call AJAX upload function on image selection using file browser button
$(document).on('change', '.btn-file :file', function() {
ajax_upload(this.files);
});
// File upload progress event listener
(function($, window, undefined) {
var hasOnProgress = ("onprogress" in $.ajaxSettings.xhr());
if (!hasOnProgress) {
return;
}
var oldXHR = $.ajaxSettings.xhr;
$.ajaxSettings.xhr = function() {
var xhr = oldXHR();
if(xhr instanceof window.XMLHttpRequest) {
xhr.addEventListener('progress', this.progress, false);
}
if(xhr.upload) {
xhr.upload.addEventListener('progress', this.progress, false);
}
return xhr;
};
})(jQuery, window);
});
So the above code is from the .js file. The script uploads multiple selected files, which works fine. From what I have read, in order to get additional values sent to PHP you have to use the .append(), which is what I have done below. I created the var productTestID and gave it a value and then added it to the formData using the append().
My issue is how do I read it in PHP?
I have tried $_POST[productTestID] and get no results at all. I even tried doing an isset() and it comes back not set.
So what do I need to do in my PHP code to read or extract that value? Below is an excerpt from my upload.php file and like I said the file uploads work and this is how they are being accessed.
if($_SERVER['REQUEST_METHOD'] == "POST")
{
$error = '';
$img = '';
$dir = dirname($_SERVER['SCRIPT_FILENAME'])."/". DIR_WS_IMAGES . "upload/";
$extensions = array("jpeg","jpg","png");
foreach($_FILES['img_file']['tmp_name'] as $key => $tmp_name )
Further down in my upload.php file:
//MOVE TO FINAL LOCATION
$uploaded_file = $dir.$file_name;
if (rename($uploaded_file, $uniqueFileName))
{
$productTestID = $_POST['productTestID'];
}
$img .= '<div class="col-sm-2"><div class="thumbnail">';
$img .= '<img src="'.$dir.$file_name.'" />'.$uploaded_file . '<br>' .$fileName.'<br>'.$uniqueFileName.'<br>This Product Id is:';
$img .= $productTestID;
$img .= '</div></div>';
}
Thank You,
Shawn Mulligan

Angular/PHP: upload file data in $_POST, not $_FILES

I'm using AngularJS v1.6.1, Apache 2.4.10 on Debian with PHP 5.6.24 and I'm trying to upload a file to my server using $http POST service.
On my php.ini, max file size is set to 8Mo, max post size too, upload file is on, and memory size limit is set to 128Mo.
Form:
<input type="file" accept="application/pdf" id="uploadOT" max-files="1" ng-model="uploadOT" name="uploadOT" valid-file required ng-class="{'md-input-invalid':uploadForm.uploadOT.$error.validFile}" />
Angular directive: (when input content change, get a FileReader object and send file)
myModule.directive('validFile', function() {
return {
require: 'ngModel',
link: function(scope, elt, attrs, ctrl) {
ctrl.$setValidity('validFile', elt.val() !== '');
elt.bind('change', function() {
var file = document.getElementById('uploadOT').files;
var reader = new FileReader();
reader.onload = function(e) {
scope.sendFile(reader, scope.id);
};
scope.showUploadProgress = true;
scope.filename = file[0].name;
reader.readAsBinaryString(file[0]);
ctrl.$setValidity('validFile', elt.val() !== '');
scope.$apply(function() {
ctrl.$setViewValue(elt.val());
ctrl.$render();
});
});
}
};
});
Inside controller:
$scope.sendFile = function(reader, id) {
var fd = new FormData();
fd.append('id', id);
fd.append('file', reader.result);
fd.append('MAX_FILE_SIZE', 8 * 1024 * 1024);
$http.post('api/upload.php', fd, {
headers: {'Content-Type' : undefined },
transformRequest: angular.identity
}).then(function() {
alert('upload success');
}, function() {
$scope.showUploadError = true;
$scope.showUploadProgress = false;
$scope.postError = 'Une erreur inconnue est survenue !';
});
};
On server side (file api/upload.php), I print variables $_POST and $_FILES with print_r().
Why is $_FILES always empty, and my file data is in $_POST['file']?
I can create file from $_POST['file'] data with php function file_put_contents() but I cannot make verifications that I can make with $_FILES. Is it really important (security issues)?
If I change my POST Content-Type to multipart/form-data, the same thing happend.
I presume it's because you forgot to specify the encoding type of your form element.
enctype="multipart/form-data"
So, by default - the browser will assume that the form encoding type is "application/x-www-form-urlencoded" which does not support files in this way. You can still securely send file binary data with the stock encoding method however, this might be where performance and functionality are determining factors to which you choose. I recommend running some tests to confirm which is the fastest. In some cases, the difference will be negligible and will likely be for sake of consistency.
Skip the FileReader API and use the file object directly:
<input type=file files-input ng-model="files" ng-change="upload()" />
The filesInput Directive
angular.module("myApp").directive("filesInput", function() {
return {
require: 'ngModel',
link: function linkFn (scope, elem, attrs, ngModel) {
elem.on("change", function (e) {
ngModel.$setViewValue(elem[0].files, "change");
});
},
};
});
The upload() function
vm.upload = function() {
//var formData = new $window.FormData();
//formData.append("file-0", vm.files[0]);
var config = { headers: { "Content-Type": undefined } };
$http.post(url, vm.files[0], config)
.then(function(response) {
vm.result = "SUCCESS";
}).catch(function(response) {
vm.result = "ERROR "+response.status;
});
};
The XHR API send() method can post either a file object or a FormData object. It is more efficient to send the file object directly as the XHR API uses base64 encoding for the FormData object which has a 33% overhead.
The DEMO on PLNKR.
To make it works, I had to do these modifications:
Directive:
myModule.directive('validFile', function() {
return {
require: 'ngModel',
link: function(scope, elt, attrs, ctrl) {
ctrl.$setValidity('validFile', elt.val() !== '');
elt.bind('change', function() {
var file = document.getElementById('uploadOT').files;
var reader = new FileReader();
reader.onload = function(e) {
scope.sendFile(file[0], scope.OT); ////CHANGE HERE
};
scope.showUploadProgress = true;
scope.filename = file[0].name;
reader.readAsArrayBuffer(file[0]); ////CHANGE HERE
ctrl.$setValidity('validFile', elt.val() !== '');
scope.$apply(function() {
ctrl.$setViewValue(elt.val());
ctrl.$render();
});
});
}
};
});
Inside Controller
$scope.sendFile = function(file, id) {
var fd = new FormData();
fd.append('id', id);
fd.append('file', file);
fd.append('MAX_FILE_SIZE', 8 * 1024 * 1024);
$http({
method: 'POST',
url: 'upload.php',
data: fd,
headers: {'Content-Type': undefined, 'Process-Data': false},
transformRequest: angular.identity
}).then( function() {
console.log('success');
}, function() {
console.log('failure');
});
};

How to upload a CSV file using AJAX with custom prefilter in laravel 4.2

I'm using laravel 4.2 and currently I don't how to save a csv file into public\csv\ directory using AJAX. I'm still finding some answers. Maybe someone can help me with this.
Here's my code:
In blade view:
{{Form::open(['route' => 'file_upload', 'files' => true, 'id' => 'upload_form', 'method' => 'POST'])}}
{{Form::file('csv_upload', ['id' => 'uploaded_file', 'accept' => 'text/csv'])}}
{{Form::submit('submit', ['class' => 'btn btn-primary btn-xs', 'id' => 'upload'])}}
{{Form::close()}}
Javascript Ajax:
var ajax_ready = 1
var token = {{Session::get('_token')}}
if($.type(originalOptions.data) === 'string') {
options.data = originalOptions.data+"&_token="+token;
}else if($.type(originalOptions.data) === 'object') {
//Here I got a new error
}else{
options.data = $.param(($.extend(originalOptions.data, {'_token':mmad_token})));
}
options.url = originalOptions.url.slice(0,originalOptions.url.indexOf("?_token="));
if (ajax_ready!=1){
jqXHR.abort();
}
ajax_ready = 0;
});
$('form#upload_form').on('submit', function(e){
e.preventDefault();
var uploadFile = $('#uploaded_file');
var ext = $("input#uploaded_file").val().split(".").pop().toLowerCase();
var file = $('input[name="csv_upload"]').val();
if($.inArray(ext, ["csv"]) === -1) {
alert("Please upload a .csv file!");
return false;
}
var csv = uploadFile[0].files;
var form = new FormData(this);
var csvFile = {lastModifed: csv[0].lastModified, fileName: csv[0].name, size: csv[0].size, fileType: csv[0].type};
$.post('{{ URL::route("file_upload") }}?_token={{Session::token()}}',{
data: form
}).done(function(response){
});
});
PHP:
public function upload_csv()
{
$inputs = Input::all();
$csvFile = $inputs['data']['fileName'];
$path = public_path().DIRECTORY_SEPARATOR.'csv'.DIRECTORY_SEPARATOR;
$path2 = public_path('csv/');
if(is_dir($path2))
{
#move_uploaded_file($csvFile, $path2.$csvFile); //This line can't move the uploaded files in my desired directory
}
return json_encode(['success' => 1, 'description' => 'Successfully Upload File']);
}
This code below does work when not using AJAX:
if(Input::hasFile('csv_upload'))
{
$file = Input::file('csv_upload');
$originalFilename = $file->getClientOriginalName();
$rules = ['csv_upload' => 'required|file:csv'];
$validate = Validator::make(['csv_upload' => $file], $rules);
if($validate->fails())
{
return json_encode(['error' => 1, 'description' => 'File must be in .csv format']);
}
$path = public_path('/csv/');
if(!file_exists($path))
{
mkdir($path);
}
}
Console.log of csv
You can not move file because when you submit form with ajax file is not being sent with ajax,For sending file you have to send file with FormData() javascript Object.
If you check in upload_csv controller by putting print_r($_FILES); you will get empty array.
So use FormData on client side for appending file, then try agian.
You aren't getting error beacuse you have used php Error Control Operators likes#move_uploaded_file($csvFile, $path2.$csvFile);.
if you need working example then tell me i will give it to you.
Code For Your Help:
1. In blade view:
<script type="text/javascript">
$('form#upload_form').on('submit', function(e){
e.preventDefault();
var uploadFile = $('#uploaded_file');
var ext = $("input#uploaded_file").val().split(".").pop().toLowerCase();
var file = $('input[name="mmad_csv_upload"]').val();
if($.inArray(ext, ["csv"]) === -1) {
alert("Please upload a .csv file!");
return false;
}
var csv = uploadFile[0].files;
var formData = new FormData($(this)[0]);
formData.append('uploaded_file', $("#uploaded_file")[0].files[0]);
formData.append('lastModifed', csv[0].lastModified);
formData.append('fileName', csv[0].name);
console.log(formData);
$.ajax({
url: '{{ URL::route("file_upload") }}',
type: 'POST',
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
success: function (returndata) { //alert(returndata); return false;
}
});
});
</script>
2.Controller
public function file_upload(Request $request)
{
$inputs = Input::all();
$csvFile = $inputs['fileName'];
$path = public_path().DIRECTORY_SEPARATOR.'csv'.DIRECTORY_SEPARATOR;
$path2 = public_path('/csv/');
if(is_dir($path2))
{
$success = $request->file('uploaded_file')->move($path2, $csvFile);
}
return json_encode(['success' => 1, 'description' => 'Successfully Upload File']);
}
To move the uploaded file to a new location, you should use the move method. This method will move the file from its temporary upload location (as determined by your PHP configuration) to a more permanent destination of your choosing:
Input::file('fileName')->move($destinationPath, $fileName);
If you need additional validations, you can check it at http://laravel.com/docs/5.1/requests#files
Default AJAX POST does not support file uploads. Use jQuery Form to upload files successfully. Full documentation of file upload at http://malsup.com/jquery/form/#file-upload
Below my example of a recentlty build script... My Controller uploads the files to S3, but is easy to be implemented with local storage.
var progress = function(event, position, total, percent) {
$(".progress-bar").width(percent + '%');
$(".progress-bar").html(percent + '%');
if(percent > 50) {
$(".progress-bar").css('color','#fff');
}
if(percent == 100) {
setTimeout(function(){
$(".progress").html('<span class="processing-msg">Processing... Please be patient!</span>');
$(".processing-msg").fadeIn('slow');
}, 1000);
}
}
var success = function(data) {
var obj = $.parseJSON(data);
$("#"+obj.hidden, parent.document).val(obj.filename);
var src = 'https://s3.amazonaws.com/spincms'+obj.path+'thumb_'+obj.filename;
$("#uploaded-"+obj.hidden, parent.document).html('<img class="img-circle uploaded-img" src="' + src + '">');
$(".progress").html('<span class="processing-msg-next">File has been uploaded and processed. Do not forget to submit the form!</span>');
}
var options = {
target: '#output',
uploadProgress: progress,
success: success,
resetForm: true
};
$(document).on('click', "#upload-now", function(e) {
$(".progress").html('<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>');
if($("#upload-form input[type=file]")[0].files.length == 0) {
$(".progress").html('<span class="processing-msg-next">No file selected!</span>');
return false;
} else {
var name = $("#upload-form input[name='name']").val();
var token = $("#upload-form input[name='_token']").val();
var file_name = $("#upload-form input[type=file]")[0].files[0].name;
$("#upload-form").ajaxSubmit(options);
}
}
});
Since you are using jQuery you can use the form plugin as it will make things much more easier for you to work with for example , this is the jquery part that you will use :
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#upload_form').ajaxForm(function() {
alert("Your file has been uploaded, thanks");
});
});
and in your controller you can code it like :
pubilc function postUpload()
{
$success = false;
if(Request::ajax())
{
if(Input::hasFile('csv_upload'))
{
$file = Input::file('csv_upload');
if(!File::isDirectory(storage_path('csv'))) {
File::createDirectory(storage_path('csv'));
}
$file->move(storage_path('csv'), $file->getClientOriginalName());
// now your file is on app/storage/csv folder
$filePath = storage_path('csv/'.$file->getClientOriginalName());
$success = true;
}
}
return Response::json(['success'=>$success]);
}

How to return new filename to Dropzone after upload is complete as hidden form input?

I am currently using Dropzone to allow users upload some files into the system I'm developing and have linked the Dropzone to a div within my form,
But once the upload is complete, I would like the filename of the newly uploaded file to be returned to the Dropzone as a hidden form input so that I can save the filename in the database.
Below is the code Im using:
$(document).ready(function(){
var myDropzone = new Dropzone("div#my-awesome-dropzone", {
url: "?content=plg_dropzone&folder=php&file=uploadhandler&alert=yes",
addRemoveLinks : true,
acceptedFiles : "application/pdf",
maxFilesize: 5, // MB
maxFiles: 5
});
});
Assistance on this will be greatly appreciated. I've searched on the net and not gotten a solution.
Thanks
Thanks to #edwin Krause giving the first hint for me on this. But because I needed to do another search on it to actually replace the source of the preview I add my finding here for others not knowing exactly how to do it.
success: function( file, response ) {
file.previewElement.querySelector("img").src = response;
}
My PHP script is echoing the name of the cropped image which has been uploaded as plain HTML if you returning JSON your success callback could look like this
success: function( file, response ) {
obj = JSON.parse(response);
file.previewElement.querySelector("img").src = obj.src;
}
Or version of the code which works in Dropzone.js 5.7.2 (July 23rd 2020) is:
success: function( file, response ) {
file.previewElement.querySelector("img").src = response.src;
}
Notice: obj.src or response.src - src has to match your json property of course.
You could even replace the whole file.previewElement with your server response
I believe using the success callback and a JSON response from the server is the best way to do it? This works great for me, Hope that helps (fileupload_flag I'm using to prevent form submission before upload is completed)
My Dropzone config:
Dropzone.options.myAvatarDropzone = {
maxFilesize: 3, // MB
maxFiles: 1,
addRemoveLinks: true,
init: function() {
this.on("addedfile", function(file) { fileupload_flag = 1; });
this.on("complete", function(file) { fileupload_flag = 0; });
},
accept: function(file, done)
{
var re = /(?:\.([^.]+))?$/;
var ext = re.exec(file.name)[1];
ext = ext.toUpperCase();
if ( ext == "JPG" || ext == "JPEG" || ext == "PNG" || ext == "GIF" || ext == "BMP")
{
done();
}else {
done("Please select only supported picture files.");
}
},
success: function( file, response ){
obj = JSON.parse(response);
alert(obj.filename); // <---- here is your filename
}
};
My server response:
$upload_success = $file->move($pubpath.$foldername, $filename);
$success_message = array( 'success' => 200,
'filename' => $pubpath.$foldername.'/'.$filename,
);
if( $upload_success ) {
return json_encode($success_message);
} else {
return Response::json('error', 400);
}
Keep an array and add file names to it in accept function. After successful upload, you
var arFiles = [];
var myDropzone = new Dropzone("form#myDropzone", {
url: someurl,
uploadMultiple: true,
accept: function(file, done) {
var extension = file.name.substring(file.name.lastIndexOf('.')+1);
//console.log("extension - " + extension + ", arExistingFiles - " + arExistingFiles);
if (extension == "exe" || extension == "bat") {
done("Error! File(s) of these type(s) are not accepted.");
} else if(jQuery.inArray(file.name, arExistingFiles) > -1) {
arErrorFiles.push(file.name);
done("File already exists.");
}else { done(); arFiles.push(file.name) }
},
})
console.log("arFiles --> " + arFiles);
OR
Maintain a global List on server side where the uploading is done and then you can send it to database.

Upload Image using ajaxupload

I am using Ajax Upload for file upload via ajax and php.
At js file i wrote following line of code:
$(document).ready(function() {
if ($('#uploadExists').length) {
var btnUpload = $('#uploadExists');
var u = new AjaxUpload(btnUpload, {
action: '/upload',
name: 'fname',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))) {
//Bad file
return false;
}
},
onComplete: function(file, response){
if (! (/(\.jpg|\.png|\.jpeg|\.gif)/.test(response))) {
//Bad file
console.log(response);
return false;
} else {
console.log(response);
}
}
});
}
});
At /upload url what should I do?
I am writing things in PHP.
At /upload (for instance /upload/index.php) you receive the file via the $_POST variable. Try doing var_dump($_POST) to see what the filename is. Then you can use http://php.net/manual/en/function.move-uploaded-file.php to move the file as you would like. This script will be sent 1 file at a time from the multi-file upload, so you handle the upload as if you were handling a single upload via a standard html form.

Categories