Dropzone display server images but not saving laravel - javascript

I'm using Dropzone.js,I displayed server images inside dropzone box with remove link and it works fine but my problem is when I click on butto to save uploaded images server images not saving in database just new uploaded images are saving
my code
<script type="text/javascript">
Dropzone.options.dropzone =
{
autoProcessQueue: false,
maxFiles: 50,
maxFilesize: 12,
acceptedFiles: ".jpeg,.jpg,.png,.gif",
addRemoveLinks: true,
uploadMultiple: true,
timeout: 50000,
init: function () {
var myDropzone = this;
$.get('/getphoto',{'key': $('[name=key]').val()},function(data){
var files = data;
console.log(files.length);
for (var i = 0; i < files.length; i++) {
var name= files[i].name;
var link = "http://127.0.0.1:8000/storage/images/events/galleries/"+ name;
console.log(link);
var mockFile = { name: files[i].name, size: 128456, type: 'image/png', url:link};
myDropzone.emit('addedfile', mockFile);
myDropzone.options.thumbnail.call(myDropzone, mockFile, link);
myDropzone.emit('complete', mockFile);
myDropzone.files.push(mockFile);
var existingFileCount = 1; // The number of files already uploaded
myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;
}
});
// Update selector to match your button
$("#button").click(function (e) {
e.preventDefault();
myDropzone.processQueue();
});
this.on('sending', function(file, xhr, formData) {
// Append all form inputs to the formData Dropzone will POST
var data = $('#dropzone').serializeArray();
$.each(data, function(key, el) {
formData.append(el.name, el.value);
});
});
},
removedfile: function(file)
{
var fileRef;
return (fileRef = file.previewElement) != null ?
fileRef.parentNode.removeChild(file.previewElement) : myDropzone.removeFile(file);
},
success: function(file, response)
{
var name = file.upload.filename;
console.log(name);
window.location.href = "{{ route('eventlist') }}";
},
error: function(file, response)
{
return false;
}
};
function del(file)
{
console.log(file.name);
return myDropzone.removeFile(file);
}
</script>
my view blade:
<div>
<form action="{{ route('savegallery',$event->id) }}" class="dropzone" id="dropzone" method="POST" class="dropzone" enctype="multipart/form-data">
#csrf
{{-- <div class="fallback">
<input name="images" type="file" multiple="multiple">
</div> --}}
<div class="dz-message needsclick">
<div class="mb-3">
<i class="display-4 text-muted mdi mdi-upload-network-outline"></i>
</div>
<h4>Drop files here or click to upload.</h4>
</div>
</form>
</div>
<div class="text-center mt-4">
<button type="submit" id="button" class="btn btn-primary waves-effect waves-light">Send
Files</button>
</div>
First I delete all images then I get images from dropzone then save it
public function savegallery(Request $request,$id){
$eventgalleries = Eventgallery::where('event_id',$id)->delete();
foreach ($request->file('file') as $img) {
// $image = new Eventgallery;
//get file name with extention
$filenameWithExt = $img->getClientOriginalName();
//get just file name
$filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
//GET EXTENTION
$extention = $img->getClientOriginalExtension();
//file name to store
$fileNameToStore = $filename . '_' . time() . '.' . $extention;
//upload image
$path = $img->storeAs('public/images/events/galleries', $fileNameToStore);
$url = asset('storage/images/events/galleries/' . $fileNameToStore);
$img = new Eventgallery;
$img->name = $fileNameToStore;
$img->event_id = $id;
$img->save();
}
return redirect()->route('eventlist')->with('success', 'The galleries created successfully.');
}
and this function for route (/getphoto) to get all images and then display it in dropzone
public function getphoto(){
$data = Eventgallery::all()->toArray();
return $data;
}
Can someone help me I spend many days to find a solve but no result.

Related

How to get the image path on dynamically adding new file field using ajax

Here it is the main field that to dynamically add the elements. In this form by clicking add button it add the html part in the page. That works fine.
<div class="col-md-12 input_fields_wrap2"></div>
<button class="btn btn-primary add_field_button2" id="btnclr2">Add</button>
And the remaining script work is here for adding the fields.
<script>
$(document).ready(function()
{
var wrapper = $(".input_fields_wrap2"); //Fields wrapper
$('.add_field_button2').click(function(e)
{
var sub = 1;
e.preventDefault();
$(wrapper).append('<div><div class="row"><div class="col-md-4"><div class="form-group"><label>Sub-Article Heading</label><input type="text" class="form-control" id="subarticle_title" placeholder="Sub Article Heading" name="sub_article_heading[]"></div></div><div class="col-md-4"><div class="form-group"><label>Sub Article Image<span style="color: red;">*</span></label><input type="file" class="form-control required" name="file_upload1[]" id="file_upload1" value="" placeholder=""/><input type="hidden" name="giftcardpath1[]" id="giftcardpath1" value="" ><span id="giftimage1" style="display: none"><img src="" id="giftcard1"></span><span style="color: red;"></span></div></div><div class="col-md-4"><div class="form-group"><label>Sub-Article Image-Caption</label><input type="text" class="form-control" id="title" placeholder="Sub Article Image caption" name="sub_article_img_caption[]" value="" required=""></div></div><div class="col-md-12"><div class="form-group"><label>Content</label><textarea class="form-control" name="sub_article_content[]" rows="6" placeholder="Sub Articles Content..."></textarea></div></div><div class="clearfix"></div></div><a style="margin-bottom:15px; href="#" class="remove_field btn btn-danger btn-xs">Remove</a><br></div>');
$('#file_upload1').on('change',function(){
var file ;
file = this.files[0];
var img = new Image();
var _URL = window.URL || window.webkitURL;
img.src = _URL.createObjectURL(file);
img.onload = function () {
var reader = new FileReader();
reader.onloadend = function() {
// alert(reader.result);
$.ajax({
type: "POST",
url: base_url+"Admin/UploadImg",
data: {
imgBase64: reader.result,
}
}).done(function(data){
data = $.parseJSON(data);
if(data.imgpath!='')
{
$('#giftcardpath1').val(data.imgpath);
alert('Image upload successfull');
}
});
}
reader.readAsDataURL(file);
};
});
sub +=1;
});
//user click on remove text
$(wrapper).on("click",".remove_field", function(e)
{
e.preventDefault();
$(this).parent('div').remove();
});
});
</script>
But the Main problem is whenever i am upload a first file it works fine and display the alert and image path but later uploading image in second added field it can not store the path of that second image and did not display the alert.
My Upload image code is
public function UploadImg()
{
$rawData = $_POST['imgBase64'];
$filteredData = explode(',', $rawData);
$unencoded = base64_decode($filteredData[1]);
$datime = time();
$fp = fopen('upload_dataimage/'.$datime.'.jpg', 'w');
fwrite($fp, $unencoded);
fclose($fp);
$img_url = 'upload_dataimage/'.$datime.'.jpg';
echo json_encode(array('result'=>'1','imgpath'=>$img_url));
exit;
}
please help me to get rid of this problem and made me happy.
Thanks in advance..

how to change XmlHttpRequest url in image upload

I am trying to upload image and it is working. but the problem is when I am trying to update this image I m having problem because it is redirecting to wrong url. The form is post to this url
POST http://127.0.0.1/mgt/upload/processImage/foodImage
and the result is coming like this
GET
http://127.0.0.1/mgt/food/viewFoodDetails/temp/uploads/images/foodImage/937d932fcbf3c6ba36b7eed65cecd045.png
But, I want the get result should come like this (I dont want it to get food/viewFoodDetails from url)
GET
http://127.0.0.1/mgt/temp/uploads/images/foodImage/937d932fcbf3c6ba36b7eed65cecd045.png
can anyone help me please?
here is my js
$.fn.uploadFile=function(opts)
{
var opts=$.extend({
allowed:['png, jpg']
},opts);
return this.each(function(){
var pb='<div class="progress" style="width:0"><span>0%</span></div>',
_this=$(this),
progressbar=$(_this.attr("data-progressbar")),
endpoint='http://127.0.0.1/mgt/upload/processImage/foodImage',
viewer=$(_this.attr("data-viewer")),
element=$(_this.attr("data-element")),
downloadLink=$(_this.attr("data-downloadLink"));
//cct=$(_this).parents("form").find("input[name=csrfwebpos]").val();
//console.log(_this, progressbar, endpoint, viewer, element, downloadLink);
_this.change(function(){
var filename=_this.val().toLowerCase().split(/[\\\/]/).pop(),is_allowed=false,
ext=filename.split(".").pop();
//console.log(filename, ext);
if(filename==''){
return;
}
$.each(opts.allowed,function(i,el){
if(ext==el){
is_allowed=true;
}
});
if(!is_allowed){
showError("This file type is not supported. Please select another file.");
return;
}else{
progressbar.show(0);
var files=_this[0].files,
file=_this[0].files[0],
headers={
"Cache-Control":"no-cache",
"X-Requested-With":"XMLHttpRequest",
"X-File-Name":file.fileName||file.name,
"X-File-Size":file.fileSize||file.size,
};
if(file.size>700000){
showError("File can not be larger than 700KB in size.");
return;
}
_this.attr("disabled",true);
progressbar.append(pb);
var bar=progressbar.find(".progress"),percent=bar.find("span");
var xhr = new XMLHttpRequest();
var upload = xhr.upload;
upload.fileObj = file;
upload.downloadStartTime = new Date().getTime();
upload.currentStart = upload.downloadStartTime;
upload.currentProgress = 0;
upload.startData = 0;
viewer.hide(0);
upload.onprogress=function(e){
if(e.lengthComputable){
var _p=Math.floor((e.loaded/e.total)*100);
bar.css("width",_p+"%");
percent.html(_p+"%");
if(_p==100){
percent.html("Processing...");
}
}
};
xhr.onload=function(e){
status = xhr.status;
if(e.target.readyState == 4){
var data=eval("("+this.responseText+")");
console.log(this);
console.log(data);
if(data && data.successFunction){
data.successFunction.apply(_this);
}
if(data && data.fileName!=''){
element.val(data.fileName);
element.trigger("change");
viewer.show(0);
$(viewer).find("img").prop("src",data.fileName);
}
if(data && data.downloadLink!=''){
downloadLink.html('Download Server Response');
}
_this.val("").attr("disabled",false);
progressbar.find(".progress").remove();
progressbar.hide(0);
}
};
xhr.open("POST",endpoint,true);
//console.log(endpoint);
/*
var oMyForm = new FormData();
oMyForm.append("csrfwebpos", cct);
oMyForm.append("file", file);
*/
for(var prop in headers){
xhr.setRequestHeader(prop, headers[prop]);
}
xhr.send(file);
}
});
});
};
This is my image upload function upload.php
public function processImage($uploadFolder="profile", $userFileName="")
{
$tempFilePath="temp/$uploadFolder";
if (!file_exists($tempFilePath)) {
#mkdir($tempFilePath);
}
#chmod($tempFilePath, 0777);
$path=$tempFilePath."/";
$headers=getallheaders();
if (isset($headers['X-File-Size'], $headers['X-File-Name'])) {
// create the object and assign property
$file = new stdClass;
$file->name = basename($headers['X-File-Name']);
$file->size = $headers['X-File-Size'];
$file->content = file_get_contents("php://input");
$fileparts=fileExtension($file->name);
if ($userFileName=='') {
$filename = md5(
$this->session->userdata('userid') .
uniqid() .
microtime(true) .
mt_rand() .
$file->name .
$file->size .
$this->session->userdata('userid')
);
} else {
$filename=$userFileName;
}
$file->name=$filename.$fileparts["extension"];
// echo $path.$file->name;
if (#file_put_contents($path.$file->name, $file->content)) {
$old = getcwd(); // Save the current directory
#chdir($path);
chmod($file->name, 0644);
chdir($old);
}
}
}
This is my HTML
<script type='text/javascript'>
$(document).ready(function() {
$('#uploadImage').uploadFile();
});
</script>
<form method='post' action='<?=$baseUrl?>food/saveFood' accept-charset='utf-8' enctype='multipart/form-data'>
<table class='table table-bordered table-curved'>
<tr>
<td>
<div class='form-group col-md-12' style='padding:0px;'>
<div class='fileupload fileupload-new' data-provides='fileupload'>
<div class='input-group'>
<div class='form-control uneditable-input'><i class='icon-file fileupload-exists'></i>
<span class='fileupload-preview'></span>
</div>
<div class='input-group-btn'>
<a class='btn btn-default btn-file'>
<span class='fileupload-new'>Select file</span>
<span class='fileupload-exists'>Change</span>
<input type='file' class='file-input' id='uploadImage' data-progressbar='.pb' data-element='#appImg' data-viewer='#appPhoto' />
</a>
</div>
</div>
</div>
</div>
<div class='clearfix'></div>
<div class='pb pull-left col-md-12' style='display:none;'></div>
<div id='appPhoto'><img src='' /></div>
<input type='hidden' name='imagePath' id='appImg' value='' />
</td>
</form>
I solved it, I have added baseurl to the file path
from
$(viewer).find("img").prop("src",data.fileName);
to
$(viewer).find("img").prop("src",baseurl+data.fileName);

PHP - Uploading multiple files with Javascript and PHP

its me again. Im currently trying to build an multiple file uploader for my site but dont know how to get/handle all files. I think showing you the code first will be a better explanation:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>NDSLR - Demo Upload</title>
</head>
<body>
<script type="text/javascript">
function fileChange()
{
//FileList Objekt aus dem Input Element mit der ID "fileA"
var fileList = document.getElementById("fileA").files;
//File Objekt (erstes Element der FileList)
var file = fileList[0];
//File Objekt nicht vorhanden = keine Datei ausgewählt oder vom Browser nicht unterstützt
if(!file) {
return;
}
var x = substr(file.name, -4);
document.getElementById("status").innerHTML = x;
/*
if (x != ".pdf") {
document.getElementById("fileA").files = null;
file = null;
fileList = null;
alert("Wrong Data");
return;
} */
document.getElementById("fileName").innerHTML = 'Dateiname: ' + file.name;
document.getElementById("fileSize").innerHTML = 'Dateigröße: ' + file.size + ' B';
document.getElementById("progress").value = 0;
document.getElementById("prozent").innerHTML = "0%";
}
var client = null;
function uploadFile()
{
//Wieder unser File Objekt
for(i=0;i < document.getElementById("fileA").files; i++) {
var file = document.getElementById("fileA").files[i];
//FormData Objekt erzeugen
var formData = new FormData();
//XMLHttpRequest Objekt erzeugen
client = new XMLHttpRequest();
var prog = document.getElementById("progress");
if(!file)
return;
prog.value = 0;
prog.max = 100;
//Fügt dem formData Objekt unser File Objekt hinzu
formData.append("datei", file);
client.onerror = function(e) {
alert("onError");
};
client.onload = function(e) {
document.getElementById("prozent").innerHTML = "100%";
prog.value = prog.max;
};
client.upload.onprogress = function(e) {
var p = Math.round(100 / e.total * e.loaded);
document.getElementById("progress").value = p;
document.getElementById("prozent").innerHTML = p + "%";
};
client.onabort = function(e) {
alert("Upload abgebrochen");
};
client.open("POST", "upload.php");
client.send(formData);
}
}
}
function uploadAbort() {
if(client instanceof XMLHttpRequest)
//Briecht die aktuelle Übertragung ab
client.abort();
}
</script>
<form action="" method="post" enctype="multipart/form-data">
<input name="file[]" type="file" multiple="multiple" id="fileA" onchange="fileChange();"/>
<input name="upload[]" value="Upload" type="button" accept=".dem" onclick="uploadFile();" />
<input name="abort" value="Abbrechen" type="button" onclick="uploadAbort();" />
</form>
<div id="status"></div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<progress id="progress" style="margin-top:10px"></progress> <span id="prozent"></span>
</div>
</body>
</html>
So this is my HTML Code and following up my upload.php:
<?php
if (isset($_FILES['datei']))
{
move_uploaded_file($_FILES['datei']['tmp_name'], 'upload/'.$_FILES['datei']['name']);
}
?>
My Problem currently is, that i dont know how to implement the multiple upload or better said, how to upload all files at all.
There are some tutorials in the internet, that you can simply find by googling "multiple file upload". Anyway here is one of the examples:
The HTML
<!-- IMPORTANT: FORM's enctype must be "multipart/form-data" -->
<form method="post" action="upload-page.php" enctype="multipart/form-data">
<input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" />
</form>
Listing Multiple Files with JavaScript
//get the input and UL list
var input = document.getElementById('filesToUpload');
var list = document.getElementById('fileList');
//empty list for now...
while (list.hasChildNodes()) {
list.removeChild(ul.firstChild);
}
//for every file...
for (var x = 0; x < input.files.length; x++) {
//add to list
var li = document.createElement('li');
li.innerHTML = 'File ' + (x + 1) + ': ' + input.files[x].name;
list.append(li);
}
The input.files property provides an array of files for which you can check the length; if there's a length, you can loop through each file and access the file paths and names.
Receiving and Handling Files with PHP
if(count($_FILES['uploads']['filesToUpload'])) {
foreach ($_FILES['uploads']['filesToUpload'] as $file) {
//do your upload stuff here
echo $file;
}
}
PHP creates an array of the files uploaded with the given INPUT's name. This variable will always be an array within PHP.
Source
Demo
This is uploading using ajax. There are other ways such the use of iframe and jquery's $.load().
ajax_upload.js
Hmm... FormData is not IE-safe. So, you may want to resort to iframe & $.load().
function doUpload(fle_id, url_upld)
{
var upldLimit = 2000000; // 2mb by default;
if( $('#'+fle_id)[0] == undefined || $('#'+fle_id)[0].files.length == 0 ) {
alert('nothing to upload');
return;
}
// put files to formData
var tfSize = 0; // in bytes
var fd = new FormData();
$.each($('#'+fle_id)[0].files, function(i, file) {
fd.append(i, file);
tfSize = tfSize + file.size;
});
// you may check file size before sending data
if(tfSize > upldLimit) {
alert('File upload exceeded the '+(upldLimit/1000000)+' MB limit.');
return;
}
// actual data transfer
$.ajax({
url: url_upld,
cache: false,
data: fd,
type: 'POST',
contentType : false,
processData : false,
success: function(data){
alert(data);
},
error: function(jqXHR, textStatus, errorMessage) {
alert(errorMessage);
}
});
}
upload_form.html
Let's use jquery to make things simple.
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax_upload.js"></script>
<script type="text/javascript">
$(function(){
$('form').submit(function(e){
if( e.preventDefault ) e.preventDefault(); // chrome/firefox
else e.cancelBubble(); // IE
// supply file input id and upload url
doUpload( 'fle', $(this).attr('action') );
});
});
</script>
Upload
<form action="ajax_upload.php"
method="post"
enctype="multipart/form-data"
accept-charset="utf-8"
>
<input type="file" id="fle" name="fle[]" multiple >
<button type="submit">Upload</button>
</form>
ajax_upload.php
<?php
if(count($_FILES) == 0) {
echo 'Nothing uploaded.';
exit;
}
$upldPath = 'E:/stack/upload/';
foreach($_FILES as $file) {
if ($file['error'] == UPLOAD_ERR_OK) {
try {
if( !move_uploaded_file( $file["tmp_name"], $upldPath . $file['name']) ) {
// abort even if one file cannot be moved.
echo 'Cannot upload one of the files.';
exit;
}
}
catch(Exception $e) {
echo 'Cannot upload the files.';
exit;
}
} else {
// abort even if one file has error.
echo 'Cannot upload one of the files.';
exit;
}
}
echo 'Upload successful!';
?>
Here is a simple approach to solving this issue.
This FormData append method works on IE 10 up and any other browser.
let files = []
let formData = new FormData
let filesInput = document.getElementById('files')
function prepareFiles() {
files = filesInput.files
}
function uploadFiles() {
// Arrange the files as form data to be sent to php
files = Array.from(files)
files.forEach(file => formData.append('files[]', file))
// See all selected files
console.log('Files')
console.log(formData.getAll('files[]'))
// Then send to php with jquery, axios e.t.c
console.log('Server response')
$.post('/pathtophpscript', formData, (response) => {
console.log(response)
}).catch(error => console.log(error))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="uploads" id="files" onchange="prepareFiles()" multiple>
<br/><br/>
<input type="submit" name="Upload" onclick="uploadFiles()">

CodeIgniter AJAX file upload, $_FILE is empty when upload

Iam writing a script that uploads files via Drag and Drop using jQuery which reads the file on drop and adds it to an array of files like so:
var files = [];
$(document).ready(function() {
jQuery.fn.dropbox = function(config) {
var dragging = 0;
var dragEnter = function(e) {
e.stopPropagation();
e.preventDefault();
dragging++;
$(".external-drop-indicator").fadeIn();
$(".toast.toast-success").fadeIn().css("display", "inline-block");;
return false;
};
var dragOver = function(e) {
e.stopPropagation();
e.preventDefault();
return false;
};
var dragLeave = function(e) {
e.stopPropagation();
e.preventDefault();
dragging--;
if(dragging === 0) {
$(".external-drop-indicator").fadeOut();
$(".toast.toast-success").fadeOut();
}
return false;
};
var drop = function(e) {
var dt = e.dataTransfer;
var files_upload = dt.files;
e.stopPropagation();
e.preventDefault();
if(files_upload && files_upload.length > 0 && config.onDrop !== undefined) {
files.push(files_upload);
config.onDrop(files_upload);
}
$(".external-drop-indicator").fadeOut();
$(".toast.toast-success").fadeOut();
};
var applyDropbox = function(dropbox) {
dropbox.addEventListener('dragenter', dragEnter, false);
dropbox.addEventListener('dragover', dragOver, false);
dropbox.addEventListener('dragleave', dragLeave, false);
dropbox.addEventListener('drop', drop, false);
};
return this.each(function() {
applyDropbox(this);
});
};
});
In summary what it does is, adds an extended jQuery function to enable drag and drop on a certain element of the website in which the function is applied.
Then I apply the extended functionality to the body for it to enable the file Drag and Drop functionality like so:
$(document).ready(function() {
$('body').dropbox({
onDrop: function(f) {
$(f).each(function(idx, data) {
var file_name = data.name;
var extension = file_name.split('.');
file_name = extension[0];
extension = extension[1];
if(extension == 'pdf' || extension == 'xls') {
showAjaxModal(base_url + 'index.php?modal/popup/file_create/' + folder_id + '/' + extension + '/' + file_name);
} else {
$(".upload-area").append('<div class="alert alert-danger" style="display:inline-block;width:480px;"><strong>Error!</strong> File type is incorrect.</div>');
}
});
}
});
});
In summary what this does is adds the Drag and Drop functionality to the body and when a file is dropped it detects the extension of the file by splitting the name and the extension, so that I can verify that the extension of the file that was dropped is correct. Then it proceeds to show a modal to fill information about the file that is being uploaded for later submission, if the file extension is correct.
Then I proceed to fill the file information using CodeIgniter's function "form_open()" when the modal pops like so:
<?php echo form_open(base_url() . 'index.php?client/file/create/' . $param2, array('class' => 'form-horizontal form-groups-bordered validate ajax-upload', 'enctype' => 'multipart/form-data')); ?>
<div class="col-md-4 file-info">
<div class="icon-<?=($param3 == 'pdf' ? 'pdf' : 'document')?>"></div>
<p>
<?php echo $param4;?>
</p>
</div>
<div class="col-md-8 new-file">
<div class="form-group">
<div class="col-sm-12">
<div class="input-group">
<input type="text" class="form-control" name="tags" data-validate="required" data-message-required="Field is required" placeholder="File tags" value="" autofocus>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="input-group">
<input type="text" class="form-control" name="name" data-validate="required" data-message-required="Field is required" placeholder="File name" value="" autofocus>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="input-group">
<textarea rows="5" class="form-control" name="description" data-validate="required" data-message-required="Field is required" placeholder="File description" value="" autofocus></textarea>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-7">
<button type="submit" class="btn btn-info" id="submit-button">Upload</button>
<span id="preloader-form"></span>
</div>
</div>
<?php echo form_close(); ?>
This basically creates a form which later will be submitted via Ajax.
Now I proceed to handle the file submission via jQuery for the information to be sent with the file or files that are being uploaded like so:
$(document).ready(function(e) {
$('.ajax-upload').submit(function(e) {
e.preventDefault();
var $elm = $(this);
var fd = new FormData();
for(var i = 0; i < files.length; i++) {
fd.append("file_" + i, files[i]);
}
var form_data = $(".ajax-upload").serializeArray();
$.each(form_data, function(key, input) {
fd.append(input.name, input.value);
});
var opts = {
url: $elm.attr('action'),
data: fd,
cache: false,
contentType: false,
processData: false,
type: 'POST',
beforeSend: uValidate,
success: showResponse
};
if(fd.fake) {
opts.xhr = function() {
var xhr = jQuery.ajaxSettings.xhr();
xhr.send = xhr.sendAsBinary;
return xhr;
}
opts.contentType = "multipart/form-data; boundary=" + fd.boundary;
opts.data = fd.toString();
}
jQuery.ajax(opts);
return false;
});
});
Basically the form default action is overwritten and the files that were submitted on the previous code chunk for the drag and drop functionality are now appended to formData which later gets joined by the form data that was on the form I submit. Then the formData is sent via an AJAX call.
Now the controller looks like this, it handles the AJAX call and then executes the File Upload method on the model like so:
function file($param1 = '', $param2 = '', $param3 = 0) {
if ($this->session->userdata('client_login') != 1) {
$this->session->set_userdata('last_page', current_url());
redirect(base_url(), 'refresh');
}
if ($param1 == 'create')
$this->crud_model->create_file($param2);
if ($param1 == 'edit')
$this->crud_model->update_file($param2);
if ($param1 == 'delete')
$this->crud_model->delete_file($param2, $param3);
$page_data['page_name'] = 'files';
$page_data['page_title'] = 'Files List';
$page_data['folder_id'] = $param3;
$this->load->view('backend/index', $page_data);
}
Here is the model method:
function create_file($folder_id) {
$data['name'] = $this->input->post('name');
$data['tags'] = $this->input->post('tags');
$data['description'] = $this->input->post('description');
$data['type'] = 'file';
$data['folder_id'] = $folder_id;
$data['client_id'] = $this->session->userdata('login_user_id');
$config['upload_path'] = 'uploads/tmp/';
$config['allowed_types'] = '*';
$config['max_size'] = '100';
$this->load->library('upload');
$this->upload->initialize($config);
var_dump($_FILES);
die();
foreach($_FILES as $field => $file)
{
//var_dump($_FILES); die();
// No problems with the file
if($file['error'] == 0)
{
// So lets upload
if ($this->upload->do_upload($field))
{
$data = $this->upload->data();
echo $data['full_path'];
}
else
{
$errors = $this->upload->display_errors();
var_dump($errors);
}
}
}
$this->db->insert('client_files' , $data);
}
So basically what happens is that the $_FILES array is empty, and the file doesn't get uploaded.
The "Request Payload" as viewed on Chrome's Developer Tools looks like this:
------WebKitFormBoundaryvVAxgIQd6qU8BtkF
Content-Disposition: form-data; name="file_0"
[object FileList]
------WebKitFormBoundaryvVAxgIQd6qU8BtkF
Content-Disposition: form-data; name="tags"
bsd
------WebKitFormBoundaryvVAxgIQd6qU8BtkF
Content-Disposition: form-data; name="name"
asd
------WebKitFormBoundaryvVAxgIQd6qU8BtkF
Content-Disposition: form-data; name="description"
asd
And the response I get from the var_dump() on the model is the following:
array(0) {
}
I have tried the solution on this question: Sending multipart/formdata with jQuery.ajax But no luck so far.
Any idea on what am I doing wrong and how to fix this issue? Thanks.
The problem here is that I'm sending the array of files instead of the single files on the AJAX call, specifically in this part of the code:
for(var i = 0; i < files.length; i++) {
fd.append("file_" + i, files[i]);
}
The solution was to append file by file to the formData instead of the array of files, something like this:
for(var i = 0; i < files[0].length; i++) {
fd.append("file_" + i, files[i]);
}
This will append every single file of the files array instead of the array of files itself and it solves the problem.
In conclusion I was sending the array of files instead of the single files, the clue to this was the [object FileList] that the request was showing instead of the files information, which now makes a request like this:
Content-Disposition: form-data; name="file"; filename="exfile.pdf"
Content-Type: application/pdf

Using Jcrop form an ajax loaded image

I have a site where I would like to upload a profile picture to the server and store the image into the database, using ajax. This is pretty straight forward and does work. But I would like to be able to get the user to be able to to crop their image so that it is square using Jcrop. I have seen and downloaded examples of how to implement Jcrop, which are pretty straight foreword. But I just can't seen to get it to work on my site. The code I have so far is rough and still needs a bit of validation but I want to get the main function dealt with first.
To make the cropping process seem a little more user friendly I have created a basic light-box type thing to hold the upload form and then the image to crop after sent back from php. This seems to be the only difference form what I've seen online.
Here's my code:(I have just picked out the relevant parts as the site contains quite a lot of text and images in other divs that aren't relevant)
HTML IMPORTS:
<script src="jquery/jquery.min.js"></script>
<script src="jquery/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
HTML: - form to upload a new Profile Pic
<div id="reg_pp">
<img src="images/logo.png" width="100%" height="150px" /><br/><button id="updateGender" style="float:right; width:auto;" class="form_fields_button" onclick="changeProfilePic('open')">Change Profile Picture</button>
</div>
HTML: - lightbox type thing
<div id="ppuo" class="overlay">
<div id="ppufh" class="tcs">
<div id="close_btn" onclick="changeProfilePic('close')"></div>
<div id="nppf">
<div id="preview"><img src="assests/preview.png" width="150px" height="150px" id="thumb" /></div>
<form id="uploadPP" enctype="multipart/form-data">
<input id="image" name="image" type="file" class="form_fields" size="20" style="width:100%" />
<input type="hidden" id="user" name="user" value="session_generated_id"/>
<div id="npp_err_msg"></div>
<input type="button" id="changePPBtn" value="preview" onclick="check()" />
</form>
</div>
</div>
</div>
Javascript: -toggle profile picture change dialog/lightbox
function changeProfilePic(toggle){
var overlay = document.getElementById('ppuo');
var content = document.getElementById('ppufh');
if(toggle === 'open'){
//display overlay
$('#ppuo').fadeIn({complete:function(){}},500);
}else{
//hide display
$('#ppuo').fadeOut({complete:function(){}},500);
}
}
JavaScript: - upload image and start of JCrop
function check(){
var formData = new FormData($('#uploadPP')[0]);
$.ajax({
url: 'global.func/upLoadPP.php',
type: 'POST',
xhr: function(){
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
//myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
}
return myXhr;
},
data: formData,
//Ajax events
//beforeSend: beforeSendHandler,
success: function(data){
var return_type = data.substr(0,1);
var data_type = data.split(":");
if(parseInt(data_type[0]) === 4 || data_type[0] === '4'){
//no error
$('#ppufh').animate({width:'800px',height:'80%',marginTop:'10%'},500);
document.getElementById('thumb').src = data_type[1];
document.getElementById('thumb').style.width = '80%';
document.getElementById('thumb').style.height = 'auto';
document.getElementById('ppufh').style.overflow = 'scroll';
$('#thumb').JCrop({
aspectRatio: 1,
onChange: updateCoords,
onSelect: updateCoords,
bgColor: 'blue',
bgOpacity: .5,
sideHandles:false,
minSize: [ 50, 50 ]
});
document.getElementById('changePPBtn').value = 'Finished Cropping';
$('#changePPBtn').on('click',function(){
window.alert("save new profile pic");
});
}else{
var err_msg = data_type[1];
document.getElementById('npp_err_msg').innerHTML = '<h3 style="text-align:left">'+data+'</h2>';
}
},
error: function(){
alert("There has been an internal server error. Please try again.");
},
cache: false,
contentType: false,
processData: false
});
}
PHP: -in case it helps but does work fine as a basic start
<?php
include '../constant/connect.php';
$row_count = mysql_num_rows(mysql_query("SELECT * FROM profile_pics"));
if(isset($_POST)){
$user_email = $_POST['user'];
$file = $_FILES['image'];
if($_FILES['image']['error'] > 0){
echo '0:php server error adjust php.ini file, then change this error message.';
}else{
$file_type = $_FILES['image']['type'];
$file_name = $_FILES['image']['name'];
$extention = explode('.',$file_name);
$extention = $extention[1];
if($extention == 'jpeg' || $extention == 'png' || $extention == 'gif'){
$path = '../images/user_profile_pictures';
$new_file_name = md5($file_name.$row_count).".".$extention;
move_uploaded_file($_FILES["image"]["tmp_name"], "../images/user_profile_pictures/" . $new_file_name);
$query = mysql_query("INSERT INTO profile_pics (pp_src,pp_owner) VALUES ('".$path."/".$new_file_name."','$user_email')")or die(mysql_error());
echo '4:images/user_profile_pictures/'.$new_file_name;
}else{
echo '1:Wrong type of file, use jpg, jpeg, png or gif. No animated Gifs.';
}
}
}else{
echo 'data not passed';
}
?>
It looks like it should work but there may be something I have missed and can't spot that somebody else can. So if anybody can help it would be greatly appreciated.
getElementById('thumb').style.height = 'auto';
document.getElementById('ppufh').style.overflow = 'scroll';
$('#thumb').JCrop({
aspectRatio: 1,
onChange: updateCoords,
onSelect: updateCoords,
bgColor: 'blue',
bgOpacity: .5,
sideHandles:false,
minSize: [ 50, 50 ]
});
document.getElementById('changePPBtn').value = 'Finished Cropping';
$('#changePPBtn').on('click',function(){
window.alert("save new profile pic");
});
}else{
var err_msg = data_type[1];
document.getElementById('npp_err_msg').innerHTML = '<h3 style="text-align:left">'+data+'</h2>';
}
},
error: function(){
alert("There has been an internal

Categories

Resources