This is the jquery code for jquery file upload but it returns 403 error.
I'm using Codeigniter version 3.1.4
$('.fileupload').fileupload({
url: $(this).data("url"),
dataType: 'json',
async: true,
done: function (e, data) {
console.log('sry');
if (data.result.status == true) {
console.log('helo');
$('#filename').html('');
$('#filename').val(data.result.file);
}
else {
$('.img_name').append('Try again!..');
}
},
progressall: function (e, data) {
console.log('uploading_msg');
var progress = parseInt(data.loaded / data.total * 100, 10);
console.log(progress);
$('.progress_1').html('<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="' + progress + '" aria-valuemin="0" aria-valuemax="100" style="width: ' + progress + '%"><span class="sr-only">' + progress + '% Complete (success)</span> </div>');
}
});
now working fine just changed config.php change $config['csrf_protection'] = TRUE; to $config['csrf_protection'] = false;
Related
I have a problem when trying to edit a post in a rest api called Spark, the project aims to simulate a social network, here is the code for the editing part of the post:
var abreEdit = function() {
$(document).on('click','.abre-editar' ,function(){
var id = $(this).data('id'),
title = $(this).data('title'),
categories = $(this).data('categories'),
content = $(this).data('content');
console.log(id);
$.confirm({
title: 'Editar Postagem',
columnClass: 'col-md-12',
content: '' +
'<form action="javascript:void(0);" class="form-novo-cliente">' +
'<div class="form-group">' +
'<label>Título*</label>' +
'<input type="text" placeholder="Informe o título" maxlength="100" name="titulo" class="titulo form-control" required value="'+title+'"/>' +
'</div>' +
'<div class="form-group">' +
'<label>Conteúdo*</label>' +
'<textarea name="conteudo" id="conteudo" class="form-control" rows="3">'+content+'</textarea>'+
'</div>' +
'</div>' +
'<div class="form-group">' +
'<label>Categorias</label>' +
'<input type="text" placeholder="Informe as Categorias" maxlength="80" name="categorias" class="categorias form-control" value="'+categories+'" />' +
'</div>' +
'</form>',
buttons: {
formSubmit: {
text: 'Salvar',
btnClass: 'btn-green',
action: function () {
var titulo = this.$content.find('.titulo').val(),
conteudo = this.$content.find('#conteudo').val(),
categorias = this.$content.find('.categorias').val(),
form = this.$content.find('form');
if(!titulo){
$.alert('Informe o Título!');
return false;
}
if(!categorias){
$.alert('Informe ao menos uma categoria!');
return false;
}else{
var v_categorias = [];
v_categorias = categorias.split(' ');
}
if(!conteudo){
$.alert('Informe o conteúdo!');
return false;
}
var array = {'id': id,
'title': titulo,
'content':conteudo,
'categories': v_categorias};
var json = JSON.stringify(array);
console.log(json);
var ajax = new XMLHttpRequest();
// Arrow request type: Post and the API URL
ajax.open("PUT", "https://localhost:4567/postagem", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Set request parameters and send the request
ajax.send(json);
// Cria um evento para receber o retorno.
ajax.onreadystatechange = function() {
// If the state is 4 and the http.status is 200, it is because the request was successful.
if (ajax.readyState == 4 && ajax.status == 200) {
var data = ajax.responseText;
$.confirm({
title: 'Sucesso',
columnClass: 'small',
content: 'Postagem alterada no ORKUT!',
buttons: {
formSubmit: {
text: 'OK',
btnClass: 'btn-green',
action: function () {
window.location.reload();
}
}
}
});
}
}
}
},
enter image description here
I try to edit, save, but don't edit via the "put" method in Spark, there is something I can do to make this part functional.
enter image description here
i try to make a Facebook Style User search using elastiquent on Laravel 5.5 that autocomplete ad sugest user by typing some char in input field.
The response from Ajax call return correct object but in my js code there is probably somethings wrong.
This the elasticsearch url http://basketmapp.com/users-list?q=Paolo, and in response i can see that item is correctly fetched:
this is the js used for selectize:
$(document).ready(function () {
var topUserSearch = $('.js-user-search');
if (topUserSearch.length) {
topUserSearch.selectize({
persist: false,
maxItems: 2,
valueField: 'name',
labelField: 'name',
searchField: ['name'],
options: [],
render: {
option: function(item, escape) {
return '<div class="inline-items">' +
(item.avatar ? '<div class="author-thumb"><img src="' + escape(item.avatar) + '" alt="avatar"></div>' : '') +
'<div class="notification-event">' +
(item.first_name ? '<span class="h6 notification-friend"></a>' + escape(item.first_name) + '</span>' : '') +
'</div>';
},
item: function(item, escape) {
var label = item.first_name;
return '<div>' +
'<span class="label">' + escape(label) + '</span>' +
'</div>';
}
},
load: function(query, callback)
{
if (!query.length) return callback();
$.ajax
({
url: '/users-list',
type: 'GET',
dataType: 'json',
data:
{
q: query
},
error: function()
{
callback();
},
success: function(res)
{
callback(res.data);
}
});
}
});
}
});
need your help!
After some googling, I cant find an example of using the audio & video preview extensions of the jQuery file upload plugin.
http://blueimp.github.io/jQuery-File-Upload/
Has anyone used these who can provide a minimal example?
you just have to add the jquery.fileupload-video file when you use the plugin for upload your videos. This is how I use it
$(function () {
'use strict';
var url = YourURL+"public/server/php/";
$('#fileupload').fileupload({
url: url,
method: 'POST',
dataType: 'json',
autoUpload: true,
acceptFileTypes: /(\.|\/)(mp4)$/i,
maxFileSize: 40000000, // 40 MB
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 300,
previewMaxHeight: 200,
previewCrop: true,
}).on('fileuploadadd', function (e, data) {
data.context = $('<div class="col-md-3 videopreview" />').appendTo('#files');
$.each(data.files, function (index, file) {
var node = $('<p/>');
if (!index) {
node
.append('<br>')
}
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).append($('<span/>').text(file.name));
$( "#filesHidden" ).append( '<input type="hidden" name="images[]" value="' + file.name + '">' );
} 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');
});
Also remember to add the following
jquery.ui.widget.js
load-image.min.js
jquery.iframe-transport.js
jquery.fileupload.js
jquery.fileupload-validate-es_ES.js //This is just for the language
jquery.fileupload.css
I have a plugin which retrieves JSON data from external file and appends it to the "div#slider", the data is retrieved and is working fine but the easySlider is not initialized after retrieving the data successfully . and the slide does not starts.
I have codes on http://lkamal.com.np/r3dImage
my plugin code is as follows:
(function($) {
$.fn.r3dImage = function(options){
var defaults = {
url: 'ajax/test.txt',
pause: 2000,
};
var options = $.extend(defaults, options);
//retrive json file
return this.each(function() {
obj = $(this);
var body = obj.html();
getJson();
});
function getJson(){
$.ajax({
type: "POST",
url: options.url,
dataType: "json",
cache: false,
contentType: "application/json",
success: function(data) {
//alert("Success");
$.each(data.dashboard, function(i,post){
obj.html('<li><img src="' + post.ImageUrl + '" title="' + post.OverlayText +'" /></li>');
});
$(obj).easySlider({
pause: options.pause
});
},
error: function(xhr, status, error) {
alert(xhr.status);
}
});
};
/* this.each(function() {
$(options.container).easySlider({
pause: options.pause
});
});*/
};
})(jQuery);
and another is easy slider 1.7.
or
can i do it inside the easyslider plugin.
How Can i merge this two plugin and make one.
I got solution for this also.
$(function() {
$.fn.r3dImage = function(param) {
var options = {
url : "",
pause : 2000,
feedFetchDelay : 10
};
this.each(function() {
var element = $(this);
//alert(element.attr('id'));
element.html("<ul></ul>");
options = $.extend(options,param);
if(options.url=="") { console.log("URL is not specified"); }
else {
getJsonFeed(element); //retrives json feed and appends to respective div
setInterval(getJsonFeed, options.feedFetchDelay*1000*60); //Time interval in milli seconds converted to minute using delay*1000*60
}
});
function getJsonFeed(element){
//function to retrive json feed start using post of json data
$.post(
options.url,
function(data) {
//alert(data.dashboard);
html = '';
$.each(data.dashboard, function(k,v) {
html += '<li>';
html += '<a href="'+v.TargetUrl+'" target="'+v.Target+'">';
html += '<img src="' + v.ImageUrl + '" alt="' + v.Alt +'" title="' + v.OverlayText +'" />';
html += '</a><p>'+v.OverlayText+'</p></li>';
});
//alert(html);
$("ul", element).append(html); //appending the json data with respective div
//initialize the slider to easy slider
$(element).easySlider({
auto: true,
continuous: true
});
},
"json"
);
}
}
});
I need to test various web services which are posts that take an uploaded file as the content of the body. To do this I'd like to do quick tests using ajax call. I found the following page which describes how to do this:
http://www.captain.at/ajax-file-upload.php
However, it requires that the page have "UniversalXPConnect" privileges in firefox.
How do I enable that privilege? I tried editing prefs.js and adding:
user_pref("capability.principal.foo.id", "http://localhost:8080/access/index.html");
user_pref("capability.principal.foo.granted", "UniversalXPConnect");
which should give access to the page http://localhost:8080/access/index.html. But, it doesn't seem to work.
Improving on panzi's answer, you can use the FormData object to send files with Ajax in a very simple manner:
<html>
<head>
<title>HTML5 File API</title>
</head>
<script type="text/javascript">
// <!--
// See: https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Using_FormData_objects
function upload() {
var uploadRequest = new XMLHttpRequest,
uploadForm = document.getElementById('file_upload');
function transferProgress(progressEvent) {
/*Executes For each update of the progress of the Ajax transfer.*/
// show progress bar or something....
}
function transferComplete() {
/*Executes when the transfer is complete.*/
//Do something like show a nice message...
}
function transferFailed() {
/*Executes when the transfer fails.*/
alert('Upload failed!');
}
function transferCanceled() {
/*Executes when the transfer is canceled.*/
alert('Upload canceled!');
}
uploadRequest.upload.addEventListener('progress', transferProgress, false);
//uploadRequest.upload.addEventListener('load', transferComplete, false); // transfer complete, but this doesn't mean a response from the server has been received.
uploadRequest.addEventListener('load', transferComplete, false); // ajax request complete, response from the server has been received and all has been processed.
uploadRequest.upload.addEventListener('error', transferFailed, false);
uploadRequest.upload.addEventListener('abort', transferCanceled, false);
uploadRequest.open('POST', action, true);
uploadRequest.send(new FormData(uploadForm));
}
// -->
</script>
<body>
<form id="file_upload" enctype="multipart/form-data">
<input type="text" id="text" value="blah blah blah"/>
<input type="file" onchange="upload();"/>
</form>
</body>
</html>
If the user specifies the file you don't need UniversalXPConnect. The HTML5 File API is enough:
<html>
<head>
<title>HTML5 File API</title>
</head>
<script type="text/javascript">
// <!--
// See: http://dev.w3.org/2006/webapi/FileAPI/
function upload (input) {
for (var i = 0; i < input.files.length; ++ i) {
// makes multiple uploads
uploadFile(input.files[i]);
}
}
function uploadFile (file) {
var reader = new FileReader();
reader.onprogress = function (event) {
var percent = 100 * event.loaded / event.total;
// TODO: display progress
};
reader.onerror = function (event) {
// display error
alert(errorMessage(reader.error)+': '+file.name);
};
reader.onload = function (event) {
if (reader.error) {
// display error
alert(errorMessage(reader.error)+': '+file.name);
}
else {
// You could also use reader.readAsBinaryString(file)
// and the mozilla specific function call btoa(reader.result).
// For more mozilla specific stuff (e.g. sending data as binary)
// see: https://developer.mozilla.org/en/using_xmlhttprequest
var data = reader.result.substring(reader.result.search(',')+1);
var text = document.getElementById('text').value;
var request = new XMLHttpRequest();
var boundaryString = guid();
var boundary = '--' + boundaryString;
while (text.search(boundary) != -1) {
boundaryString = guid();
boundary = '--' + boundaryString;
}
var requestbody = boundary + '\n' +
'Content-Disposition: form-data; name="mytext"\n' +
'\n' +
text +
'\n' +
boundary + '\n' +
'Content-Disposition: form-data; name="myfile"; filename="' +
file.name.replace(/"/g, '') + '"\n' +
'Content-Type: application/octet-stream\n' +
'Content-Transfer-Encoding: base64\n' +
'\n' +
data + '\n' +
boundary;
request.onreadystatechange = function () {
if (request.readyState == 4) {
if (request.status == 200) {
alert('Result: ' + request.responseText);
}
else {
alert(
'Error "' + request.statusText + '" occured while uploading: ' +
file.name);
}
}
};
/* a non-standard variant (still supported by many browsers) would be:
request.onuploadprogress = function () {
// possibly only mozilla, but awesome! upload progress!
var percent = 100 * event.loaded / event.total;
// TODO: display progress
};
request.onload = function () {
if (request.status == 200) {
alert('Result: ' + request.responseText);
}
else {
alert(
'Error "' + request.statusText + '" occured while uploading: ' +
file.name);
}
};
request.onerror = function () {
alert(
'There was a problem with the request when uploading file: ' +
file.name);
};
*/
request.open('POST', 'post.php', true);
request.setRequestHeader('Content-type', 'multipart/form-data; boundary="' +
boundaryString + '"');
request.setRequestHeader('Connection', 'close');
request.setRequestHeader('Content-Length', requestbody.length);
request.send(requestbody);
}
};
reader.readAsDataURL(file);
// there would also be:
// reader.readAsBinaryString(file);
// reader.readAsText(file, 'UTF-8');
// reader.readAsArrayBuffer(file);
}
function errorMessage (error) {
switch (error.code) {
case FileError.ABORT_ERR:
return 'Aborted';
case FileError.ENCODING_ERR:
return 'Encoding Error';
case FileError.NOT_FOUND_ERR:
return 'File not found';
case FileError.NOT_READABLE_ERR:
return 'File is not readable';
case FileError.NO_MODIFICATION_ALLOWED_ERR:
return 'File is not writeable';
case FileError.SECURITY_ERR:
return 'Security Error';
default:
return 'Unknown error code: ' + error.code;
}
}
// from: https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
function S4() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
function guid() {
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}
// -->
</script>
<body>
<input type="text" id="text" value="My text.."/>
<input type="file" onchange="upload(this);"/>
</body>
</html>
Still, I would recommend to use an iframe, because it is best supported by all browsers:
Is it possible to use Ajax to do file upload?