krajee bootstrap file input upload - javascript

First , i am a french web developer ( sorry for my poor english )
i 'am looking for a bootstrap php image upload with thumbnail.
i would like to make an upload image file like :
[http://www.2ememain.be/inserer/][1]
the Krajee plugin ([http://plugins.krajee.com/file-input][2]) seems to be the one i am looking for..
But i have some problems with the upload..
i get the error message:
item1.png: SyntaxError: Unexpected token e
my form:
<input id="input-700" name="kartik-input-700" type="file" multiple=true class="file-loading">
js:
$("#input-700").fileinput({
uploadUrl: "upload.php",
uploadAsync: true,
maxFileCount: 10});
upload.php:
echo "test";
if (empty($_FILES['input-700'])) {
echo json_encode(['error'=>'No files found for upload.']);
return;
}
// get the files posted
$images = $_FILES['input-700'];
var_dump($images);
More strange:
when i delete echo(test);
i get the error:
No files found for upload
Thanks for your support
if you have another solution , i shall be glad to get it..

Since you have set the uploadUrl parameter you are using the ajax uploads feature (instead of native HTML form submission).
You need to ensure that you return a proper JSON encoded data response from the server action (as set in uploadUrl) else the plugin fails. You can read the plugin documentation for ajax uploads where this is highlighted. For example, even if you do not have any data to send - you can send a empty JSON string like {}.

Related

Unknown PHP output image error

First I know its annoying to have so much text instead of code to display the error, its just I'm not sure where I should start debugging, and therefore I will complement the thread as I go.
Here is the thing, I have a page where I have to upload multiple images and edit them in the browser. For that matter I developed javascript code where you can upload and edit the image inside a canvas and then output it to a hidden input.
Since the number of images a variable, another javascript function is necessary to create multiple inputs for new images.
Those images are, them, uploaded with other data by a post form. The process in which the post is processed is page_with_form --> process_form_page --> redirect_to_page, which is used to save the data into the database and the images to the server.
When uploading these multiple images in my local server no error is generated, but when I upload the code to the web server the script go bananas.
Every time I post the form WITH a multiple image (without the image uploaded the post is successful) an error occurs, but not always the same error. I had many different errors occurring actually.
The errors variate from outputting gibberish, like this:
‰PNG IHDR´ð©NH IDATxœd»wTUY‚¾]Ó=Ý=ÓSªzª«ÚŠ†2'Ì ”œsÎ9HF‚"* ‚ˆ(*"¨¨˜³¥‚JÎ9Þtn«»ºº,y~`÷Ì|ßï:÷œ³îZg­óœw½{ïw°nñ "üqýF› B|Ùüù·¬ž±-_,ä›ßþ‰­Ÿ~Ég¿þÛ¿YÀŸ~ó[>úÕò›_þ]]<6êâ±b5Ñ!DúcôÙ7|ò«?¢÷ç/0ûbž³çá2k!!u\¯CøcÂ,pÒÞIl`8q»¢‰ÛElhñÑ1ÄFEMLp±þaÄEÆCLxÑ»¢‰ $&$‚˜b㉊!66–¸Ø8â"£ˆ%>>žøø8’““IJˆ'1Ò„]>$z¹ëCÒ.7LV.ÂJ{úØmYI‰Û7šà¦§ƒî‚o°Ú¢EB’É»ˆõ7#ÖÛ„Ä]$„†ëJ´‹^;vadI˜Ž þëôpÑ5ÃtËV¶,^ŠÉÆ,ÿf6+gÎa§ÖZÌÖ¯'f—+ZŸ.ÄDk«–aµr#Kþ¬…Ùúõ˜¬]‰ÅÆͬœ¹„¿ü~&[V`ªãÄWÿ=—û¿ÿøÝoþÀï~óG>üõïøÏû-‰‰IìÙ³—øøxbcc‰%&&...
Or giving an errors like:
PHP Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in E:\Home\gerenciamentodelegac\Web\documents\imgs\tatoos\51d115e8909cc397141e9a39651fa88a6d7302aeaee4248d257b8c8f16bf87ba.png on line 18
PHP Parse error: syntax error, unexpected ')' in E:\Home\gerenciamentodelegac\Web\documents\imgs\tatoos\d8e6765d3ab791adce3b325f6a1b8270e244a70df3739f34202f9158fa540f80.png on line 46
Or it just does not redirect to any page or show any error, it sits on the same page, and if a try to upload again a new error is generated:
PHP Warning: include(documents/imgs/tatoos/97ebacba3f87fd2477bb74a523fcc4810002a474b569b43b485ddac7c885ede5.png) [<a href='function.include'>function.include</a>]: failed to open stream: No such file or directory in E:\Home\gerenciamentodelegac\Web\fetch_page.php on line 70
PHP Warning: include() [<a href='function.include'>function.include</a>]: Failed opening 'documents/imgs/tatoos/97ebacba3f87fd2477bb74a523fcc4810002a474b569b43b485ddac7c885ede5.png' for inclusion (include_path='.;c:\PHP_5.3\includes') in E:\Home\gerenciamentodelegac\Web\fetch_page.php on line 70
But here is the crazy part: All the data is outputted correctly! The data is correctly saved to the database and the images are saved to the server.
Now, the local server uses PHP 5.5 and the web server uses PHP 5.3, and here is the code to save the image:
for ($i = 0; $i < sizeof($tatoos); $i++) {
if (!file_exists($tatoos[$i])) {
$uri = substr($tatoos_src[$i], strpos($tatoos_src[$i], ",") + 1);
$success = file_put_contents($tatoos[$i], base64_decode($uri));
}
}
Where should I start trouble shooting? Any idea where the error may relies?

How can we download the dynamically generate file from server?

I want download the file from server (I knew that we can't use AJAX, and serve is Servlet) and which dynamically generate according to the parameters.
Now I have the parameters in format JSON, like:
{"limitTo":"name","searchFor":["AAA","BBB","CCC"],...}
So, how can we send the request to the server with those paraleters? Do we need create some inputs?
Thanks, I found the solution which uses dojo/request/iframe, without window.open
And the code likes :
require(["dojo/request/iframe"], function(iframe){
// cancel the last request
iframe._currentDfd = null;
iframe("something.xml", {
handleAs: "xml",
data : "your json"
}).then(function(xmldoc){
// Do something with the XML document
}, function(err){
// Handle the error condition
});
// Progress events are not supported using the iframe provider
});
And then we can see download window.
Here is an article about dojo/request/iframe

PHPExcel pop up progress bar or waiting icon while generating excel file

I using PHPExcel to generate excel file, but due to some excel file is quite big, it takes time to generate.
When excel file is generating, I wish to add a popup that shows either progress bar or a waiting icon.
I've tried all the solution I found on google but still cannot be done.
I appreciate all kind of help.
$objPHPExcel = new PHPExcel();<br>
$F=$objPHPExcel->getActiveSheet();
//other's code to generate excel file
header('Content-Type: application/vnd.ms-excel');<br>
header('Content-Disposition: attachment;filename="report.xls"');<br>
header('Cache-Control: max-age=0');
$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel5');<br>
$objWriter->save('php://output');<br>
exit();
The excel start to generate in this line of code:
$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel5');
There is no way to have this work the way you are proposing. First, the headers you are creating will not allow html to show to the user. Also, the php hasn't finished processing so there is no way to go back to the user until the script is done.
Another option would be to call to the PHP script from Javascript asynchronously. Then return the file's name to the javascript, and redirect the user to the Excel file. Then you can show whatever you need to the user on the web page. Below is a very very very simplified example. But it could get you started.
php:
$objPHPExcel = new PHPExcel();
$F=$objPHPExcel->getActiveSheet();
//Other code to Generate Excel File
$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel5');
$objWriter->save('path/to/excelfile.xls');
//Now return some info to user
//You will want to actually do some testing here
//to make sure the file was created
echo json_encode(array(
"result" => 200,
"path" => "path/to/excelfile.xls"
));
jquery:
//Call to the php file above to start the processing
//You can add some spinner or popup message here
$.get( "path/to/phpexcel.php", function( data ) {
//Now check the return data
if(data.result === 200){
//If all is well just redirect the user to the file
window.location = data.path;
}else{
alert("Something went wrong!!!");
}
});
Again, this is very rough, but I just wanted you to have an option to pursue further.
Since this is an old post, I'll keep it short.
If you place a iFrame on your page and load your PHPExcel script into it with echoes placed at certain points of informing what is happening, you can simulate this. Other option is to load the PHP_Excel script as its' own page with the above echoes in place and a continue or return button that shows when the script is finished.

POST in Javascript and redirect for file download

I've read many articles in this site or other sites (Redirect with POST to application/csv without form, jQuery.post(), PHP and redirects, ... ) but without any valuable solutions.
My problem is the following :
in my site (html5, JQuery), there is a table. A feature of the site
is to export the table as a csv file which will be available for
download,
This feature is implemented as follow :
2.1 a javascript is called which extracts the data of the table,
2.2 this JS redirect to a php service and pass as arguments the datas. The code is the
following :
var url= jmcnet.request.getOrigin()+'/commons/php/dt_csv_export.php' ;
location.href = url+"?action=generate&csv_type=export_task&csv_data=" +encodeURIComponent(csv);
2.3 The php script format the input (csv_data parameter), write a temporay file and returns the content of the temporary file. The code is the following :
$h = #fopen($csv_file_name, 'w');
fputcsv($h, $csv_row, ',', '"');
fclose($h);
// export file content to JS
header('Content-Encoding: UTF-8');
header('Content-Type: text/ csv; charset =UTF-8');
header('Content-Disposition: attachment; filename=export-table.csv');
header(' Pragma: no-cache');
echo "\xEF\xBB\xBF"; // UTF-8 BOM
readfile($csv_file_name);
2.4 The php file delete (unlink) the temporary file and exit,
My problem is that when the table is long, the URL called is not valid and the JS call to Php is down.
So, I imagine the 3 following solutions but no one is evident and all leads to other problems :
S1 : dont do a GET but a POST in JS. So the size of the csv_data
doesn't matter anymore. The problem is that I will have the content
of the csv file in JS var after the call succeed and I don't know or
find how to redirect to a page which content is in a JS var ? I
guess I will lose all header information doing this.
S2 : compress in JS the csv_data parameter and decompress it in Php.
I just don't know how to do that and if it possible ....
S3 : call the php with a POST. Modify the Php to return the URL of
the temporary file, and do a redirect in JS to this temporay URL.
The problems are that my Php must generate a file into a dir
directly visible on the Internet, the file name must be unique and
there is no way to simply delete the file after it has been read by
browser (and I hate cron or what else).
I'm sure I'm not the first one to have this problem, so I need your help to see what is the best practice for this problem.
I think you may be over-complicating this just a bit. There is no need for all of the JS redirect stuff, you can just point your forms action attribute to your csv_export php code and use POST to send your data.
if needed, you can modify the max size of a post request by editing the post_max_size option in your php.ini. heres what mine looks like:
; Maximum size of POST data that PHP will accept.
; Its value may be 0 to disable the limit. It is ignored if POST data reading
; is disabled through enable_post_data_reading.
; http://php.net/post-max-size
post_max_size = 8M
as for writing to a temporary file, php has built in I/O streams to handle that. for your purposes you'll probably want to use php://memory or php://temp (more info on those here: http://www.php.net/manual/en/wrappers.php.php)
so you can do something like this:
SAMPLE HTML:
<html>
<head>
<!-- include jquery because you say you are using it -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
//just a dummy function to represent your js to extract csv data from a table
function extract_table_data(){
var csv = "field1,field2,field3\n\
value1,value2,value3\n\
value4,value5,value5";
return csv;
}
$( document ).ready(function() {
//export link click handler
$('#export_link').click(function() {
$('#csv_data').val(extract_table_data());
$('#theform').submit();
});
});
</script>
</head>
<body>
<a id='export_link'>Export CSV</a>
<form id='theform' method='post' action='dropcsv.php'>
<input type='hidden' name='csv_data' id='csv_data'/>
</form>
</body>
</html>
dropcsv.php
//filename for our csv attachment
$export_filename = 'thefile.csv';
//grab csv data
$csv_data = $_POST['csv_data'];
//open file in memory
$f = fopen('php://memory', 'w'); //use php://temp if you want a tmp file instead
//load up csv file
fwrite($f, $csv_data);
// go back to the beginning of the file
fseek($f, 0);
header('Content-Type: application/csv');
header('Content-Disposition: attachement; filename="'.$export_filename.'"');
fpassthru($f);
fclose($f);
of course don't forget to add your error checking and sanitize the input.

upload file via ajax with jquery easy ui

I'm trying to give users the possibility to import data from a file that is located on their computer by using jQuery EasyUI form widget:
<form id="my_form" method="POST">
<input type="file" name="my_file" id="my_file" />
</form>
var file_name = $('#my_file').val();
if(file_name)
{
$('#my_form').form('submit', {
url: [url_to_call],
onSubmit: function(param){
param.file_path = file_name;
}
});
}
Then when the user browse on his/her computer for the file, I wanna send the path to a jQuery ajax query to perform some upload action. The problem I have is that filename returns something like this:
C:\fakepath\[name_of_file]
Because of the fakepath string, I am not getting the real path to where the file is located on the user's computer. Does anybody know how I can fix this issue please?
Thank you
Tried this plugin http://malsup.com/jquery/form/#getting-started
this plugin provide a method called AjaxSubmit() which work fine for upload the image. I have used it in 2011.
it's have some issue in IE (old version like 6,7). You need to write some hacks. on the backend Firefox and IE upload the correct file-stream format like Data/Image but in Chrome (Webkit) you will got Octet Stream. You need to parse the file format on server to check that file is not wrong.
I have no idea what your form() function does, as no such method exists in jQuery, but the usual way of uploading a file to the server would be something like this :
$('#my_file').on('change', function() {
$.ajax({
url : [url_to_call],
data : new FormData($('#my_form').get(0)),
processData: false,
contenttype: false
}).done(function(param) {
param.file_path = file_name;
});
});

Categories

Resources