I'm almost finishing building a functionality for parsing CSV files to JSON and just need help in piecing it together. The way it works is that files will be uploaded using AJAX/Jquery. Once the files has been uploaded and sent the PHP to parse the CSV file to JSON will then execute.
After parsing, the converted file will be push or sent to the API as a JSON object. Here is the code that I have been working. For the uploading i'm using this plugin AJAX/JQuery File Uploader
This functionality is also built on using RactiveJS
AJAX/Jquery File Uploader
This is the section where I'm currently uploading or placing the file. URL is pointed at the upload.php.
<div id="fileuploader">Upload</div>
<script>
$(document).ready(function() {
$("#fileuploader").uploadFile({
url: 'upload.php',
});
})
</script>
Uploads.php
Is there a way to GET the temporary copy of the uploaded file and parse using the PHP code I have built below to convert the CSV to JSON
<?php
if ( 0 < $_FILES['file']['error'] ) {
echo 'Error' . $_FILES['file']['error'] . '<br/>';
}
else {
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
}
?>
PHP (CSV to JSON)
Right now be the file is being declared manually.
<?php
$json_data = csvToJson('lms.csv');
?>
<?php
function csvToJson($fname) {
if (!($fp = fopen($fname, 'r') )) {
die("Can't open file");
}
else {
('Upload File');
}
$key = fgetcsv($fp, "1024", ",");
$json = array();
while ($row = fgetcsv($fp, "1024", ",")) {
$json[] = array_combine($key, $row);
}
fclose($fp);
foreach ( $json as $k=>$v ) {
$json[$k]['accountName'] = $json[$k]['ACCOUNT NAME'];
$json[$k]['dateRequested'] = $json[$k]['DATE'];
unset($json[$k]['ACCOUNT NAME']);
unset($json[$k]['DATE']);
}
return json_encode($json, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_NUMERIC_CHECK);
}
?>
<?php // $target_file = fopen($_FILES["fileToUpload"]["tmp_name"], 'r'); ?>
Send Converted to API (Ractive/AJAX/JS)
As you can see the sending part is triggered by an on-click event (app.on)
<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.9.0-build-48/ractive.js"></script>
<script type="text/javascript">
var app = new Ractive({
el : '#container',
template : '#template',
});
var proxy = 'http://192.168.1.126/lms-dev-noel/proxy.php';
var endpoint = 'account/leads/';
var rt = 'POST';
var url = proxy+'?endpoint='+endpoint+'&rt='+rt;
var lms_json = <?php echo json_encode($json_data); ?>;
var jobjects = JSON.parse(lms_json);
for ( i = 0; i < jobjects.length; i++ ) {
var data = jobjects[i];
console.log(data);
$.ajax({
type : 'POST',
url : url,
data : data,
dataType : 'json',
success : function() {
},
error : function(error) {
console.log('Error')
}
});
}
</script>
Warning and Notices
Well, it depends a bit on where that csvToJson function is located in your code. If it's within uploads.php, or in a separate file that you can include in uploads.php, then you can just do:
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
$json_data = csvToJson('uploads/' . $_FILES['file']['name']);
echo $json_data;
Then in the script, change
var lms_json = <?php echo json_encode($json_data); ?>;
to
var lms_json;
and move it to the top of your javascript.
It seems like you are trying to assign the variable before the API call has been made. Instead you need to capture the data from the the response of the uploadFile call (as per these docs: http://hayageek.com/docs/jquery-upload-file.php):
$("#fileuploader").uploadFile({
url: 'upload.php',
onSuccess:function(files,data,xhr,pd)
{
//data: response from server
lms_json = data;
}
});
Related
Trying to save a jpg file to server with the name from an input box but gets saved as Array.jpg
Contents of html file:
<input type="text" name="datepicker" id="datepicker">
Contents of php file:
$image = $_POST['image'];
$location = "upload/";
$image_parts = explode(";base64,", $image);
$image_base64 = base64_decode($image_parts[1]);
$filename = ['datepicker'].'.jpg';
echo $_REQUEST['datepicker'];
$file = $location . $filename;
file_put_contents($file, $image_base64);
Script from the html:
<script type='text/javascript'>
function screenshot(){
html2canvas(document.body).then(function(canvas) {
// Get base64URL
var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
// AJAX request
$.ajax({
url: 'ajaxfile.php',
type: 'post',
data: {image: base64URL},
success: function(data){
console.log('Upload successfully');
}
});
});
}
</script>
no error messages , just saves with wrong name.
Have now tried:
$filename = ['datepicker']; - saves as: Array (no extension).
$filename = $_POST['datepicker']; (nothing gets saved at all).
$filename = $_POST['datepicker'].'.jpg'; (saves as .jpg (just extension, no file name).
$filename = $_FILES['datepicker']['name']; (nothing gets saved at all).
$filename = $datepicker; (nothing gets saved at all).
$filename = "screenshot_".uniqid().'.jpg'; saved as screenshot_5d40158a1dad5.jpg
It seems to me that the form name field, datepicker, is not available to the php file at all.
Maybe this is because the call (or whatever you call it) to the php file is wrapped in javascript tags? I dont know. Just getting frustrated after 24 hours of trying to get this to work.
I think I have to pass form name field, datepicker, to the ajax code and then use it in the php file.
Anyone know how to amend my code to do this?
I have now resolved this. I had to amend the javascript in the html to include a var with the vale from the text input box and update the ajax to include it in the data line.
<script type='text/javascript'>
function screenshot(){
html2canvas(document.body).then(function(canvas) {
// Get base64URL
var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
var val1 = $('#datepicker').val();
// AJAX request
$.ajax({
url: 'ajaxfile.php',
type: 'post',
//data: {image: base64URL, name: datepicker},
data: {image: base64URL, datepicker: val1},
success: function(data){
console.log('Upload successfully');
}
});
});
}
</script>
Then I had to update the php file with the file name to include the txt data from the form in the filename:
<?php
$image = $_POST['image'];
$location = "upload/";
$image_parts = explode(";base64,", $image);
$image_base64 = base64_decode($image_parts[1]);
$filename = $_POST['datepicker'].'.jpg';
$file = $location . $filename;
file_put_contents($file, $image_base64);
?>
$filename = $_POST['datepicker'].'.jpg';
What you are using is not a good way to store a file in a PHP.
you should prefix current date and some random number generated by PHP to image name before storing the image because if two images are to be stored in the same folder on server's first image will be overwritten and the second file will be stored in its place making the first image to be disappeared completely
try prefixing " date('Ymdhis').rand(100000,999999) " to your image file and use $_FILES['something']['name'] and $_FILES['something']['tmp_name'] to get name and temperary name of the image respectively to store image
I have now resolved this. I had to amend the javascript in the html to include a var with the value from the text input box and update the ajax to include it in the data line.
<script type='text/javascript'>
function screenshot(){
html2canvas(document.body).then(function(canvas) {
// Get base64URL
var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
var val1 = $('#datepicker').val();
// AJAX request
$.ajax({
url: 'ajaxfile.php',
type: 'post',
//data: {image: base64URL, name: datepicker},
data: {image: base64URL, datepicker: val1},
success: function(data){
console.log('Upload successfully');
}
});
});
}
</script>
Then I had to update the php file with the file name to include the txt data from the form in the filename:
<?php
$image = $_POST['image'];
$location = "upload/";
$image_parts = explode(";base64,", $image);
$image_base64 = base64_decode($image_parts[1]);
$filename = $_POST['datepicker'].'.jpg';
$file = $location . $filename;
file_put_contents($file, $image_base64);
?>
I want to upload images to a server using ajax and php.
On client-side i hava the following code:
var reader = new FileReader();
reader.readAsDataURL(file, 'UTF-8');
reader.onload = function (event) {
var result = event.target.result;
$.ajax({
type: "POST",
url: "url",
data: {
data: result,
name: file.name,
mimeType: file.type
}
});
};
On server-side my code looks like the following:
$path = 'somehow/'
$fp = fopen( $path . $_POST['name'], 'w');
$data = explode( ',', $_POST['data'] );
fwrite($fp, base64_decode( $data[ 1 ] ));
fclose($fp);
chmod($path . $_POST['name'], 7777);
list($width, $height) = getimagesize($path . $_POST['name']);
Now the method "getimagesize" always runs into an error "getimagesize(): Read error!"
Does anybody know, why this happens? When i look into the filesystem on the server the file 'FILENAME.JPG' exists ...
You can use $result = #getimagesize($file) to suppress the error.
So, when the $result is empty, means there is an error occurred.
There are two possible reasons for this error : either the url path is incommplete/incorrect or the picture file is corrupt and cannot be opened. A file may be corrupted, for example, if the image is not fully/correctly loaded onto the server.
I am working on a multiple file uploader using HTML5's FormData and jQuery. I have the following code:
$(function() {
$('#file').bind("change", function() {
var formData = new FormData();
//loop for add $_FILES["upload"+i] to formData
for (var i = 0, len = document.getElementById('file').files.length; i < len; i++) {
formData.append("file" + i, document.getElementById('file').files[i]);
}
//send formData to server-side
$.ajax({
url : "file-upload.php",
type : 'post',
data : formData,
dataType : 'json',
async : true,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
error : function(request) {
alert('error!!');
console.log(request.responseText);
},
success : function(json) {
alert('success!!');
$('#upload-result')[0].append(json);
}
});
});
});
I can see that my file-upload.php works fine because the files are uploaded! But why does my jQuery hit the error function and not the success function? I get an alert of Error.
In the console window, I see the result of my PHP echo call! Which I want to append to #upload-result as shown in my success function.
PHP code
foreach($_FILES as $index => $file)
{
$fileName = $file['name'];
// echo '[ file name: ' . $fileName . ' - ';
$fileTempName = $file['tmp_name'];
// echo 'file temp name: ' . $fileTempName . ' ]';
if(!empty($file['error'][$index]))
{
// some error occured with the file in index $index
// yield an error here
return false; // return false also immediately perhaps??
}
// check whether it's not empty, and whether it indeed is an uploaded file
if(!empty($fileTempName) && is_uploaded_file($fileTempName))
{
// the path to the actual uploaded file is in $_FILES[ 'file' ][ 'tmp_name' ][ $index ]
// do something with it:
move_uploaded_file($fileTempName, "uploads/" . $fileName);
echo json_encode('<p>Click here to download file!</p>');
}
}
I figured it out. I was getting the jQuery AJAX error even though my status code was 200 for the php file because I had my dataType as JSON, whilst I was returning simple HTML.
dataType: 'html',
Fixed it!
Thanks all.
I am adding a file upload function to my php page. The code seems correct to me and it even adds the file to the server with the correct name, but with no contents. i.e. there is an empty .jpg file when loading an image.
Can any of you more experienced php developers see what I am doing wrong to produce empty files.
calling script:
<script>
$(document).ready(function(){
$("#mediaFileInput").on("change", function(e){
console
if (e.target.value) {
var formData = new FormData(e.target.form);
$.ajax({
url: 'media.php', //Server script to process data
type: 'POST',
success: function(data){
location.reload();
},
// Form data
data: formData,
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
}
});
});
</script>
media.php
<?php
require('config/config.php');
$file_uploaded;
$mime_type;
// Handle multipart file uploads
if (isset ( $_FILES ['file'] )) {
$file_uploaded = fopen($_FILES['file']['name'], "r");
$mime_type = $_FILES['file']['type'];
} else if ($_SERVER["REQUEST_METHOD"] == "POST") {
/* PUT data comes in on the stdin stream */
$file_uploaded = fopen("php://input", "r");
/* Open a file for writing */
$mime_type = $_SERVER["CONTENT_TYPE"];
}
$file_name = $_FILES['file']['name'];
$new_path = "media/" . $file_name;
$media_url = "/" . $new_path;
$fp = fopen($new_path, "w");
/* Read the data 1 KB at a time
and write to the file */
while ($data = fread($file_uploaded, 1024)) {
fwrite($fp, $data);
}
/* Close the streams */
fclose($fp);
fclose($file_uploaded);
chmod($new_path, 0755);
// insert into database.
$stmt = $db_conn->prepare("INSERT INTO MEDIA (type, url) VALUES(?, ?)");
$stmt->bind_param('ss',
$mime_type,
$media_url);
$stmt->execute();
$media_id = $db_conn->insert_id;
$stmt->close();
echo json_encode(array("id" => $media_id, "type" => $mime_type, "url" => $media_url));
?>
You should not be using fopen("php://input", "r"); because according to the docs for it:
php://input is not available with enctype="multipart/form-data".
When you're uploading a file, of course, you have to use enctype="multipart/form-data". So instead, use move_uploaded_file.
Also, fopen($_FILES['file']['name'], "r"); in your other branch doesn't make sense, since that's just trying to open a filename with no particular path. Use move_uploaded_file.
I have a drag and drop uploader. I am using File Reader to send data As url.
var files = evt.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
var start = 0;
var stop = files[0].size - 1;
var reader2 = new FileReader();
var ext = f.name.substring(f.name.indexOf(".")+1);
reader2.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
$.post("/process/upload.php",{"blob":evt.target.result,"extension":ext},function(data){
console.log(data);
});
}
};
var blob = f.slice(start, stop + 1);
reader2.readAsDataURL(blob);
}
PHP recieves it but once I decode it I get "null" returned
$extension = $_POST['extension'];
$file = base64_decode($_POST['blob']);
$filePath = "../tmp/monkey.".$extension;
echo json_encode(base64_decode($_POST['blob']));
I also tried:
if(file_put_contents($filePath,$file)){
echo json_encode("it worked");
}else{
echo json_encode("it failed");
}
EDIT: I maintain the POST info all the way until I decode it. So once I decode it how do I determine the file is intact and can be saved?
Is there a better way to decode and save file?
What exactly am i doing wrong?
Thanks in advance!
$_POST['extension'] and $_POST['blob'] don't magically get populated into $_POST array when posting in JSON format. In fact based on your JSON format, the JSON will decode into an object, not an array.
You will need to get the contents directly from input like this:
$post = file_get_contents('php://input');
$post_obj = json_decode($post);
$extension = $post_obj->extension;
$file = base64_decode($post_obj->blob);
Or using $HTTP_RAW_POST_DATA variable like:
$post_obj = json_decode($HTTP_RAW_POST_DATA);
$extension = $post_obj->extension;
$file = base64_decode($post_obj->blob);