I am using uploadify on my server which is hosted on amazon ec2, i have port 80 and 22 open, which port does Uploadify use so i can fix it?
The problem is that uploadify make the customer believe that the image is uploaded but i doesn't arrive on my server, i think it is the port since it worked on my old server with hostgator
my code on the form is:
// <![CDATA[
$(document).ready(function() {
$("#dialog").dialog({
bgiframe: true,
height: 250,
width:400,
autoOpen: false,
modal: false,
buttons: {
'cancel order': function() {
$(this).dialog('close');
$('#file_upload').uploadifyClearQueue();
$('#file_upload').uploadifyCancel(($('.uploadifyQueueItem').first().attr('id').replace('file_upload','')));
},
'confirm order': function() {
$('#file_upload').uploadifyUpload();
$(this).dialog('close');
}
}
});
$('#file_upload').uploadify({
'uploader' : 'swf/uploadify.swf',
'script' : 'swf/uploadify.php?userid=<?php echo $_SESSION['userid']; ?>',
'cancelImg' : 'image/cancel.png',
'folder' : 'uploads',
'buttonImg' : 'image/uploadbtn.png',
'height' : 120,
'width' : 400,
'sizeLimit' : 299240000,
'auto' : false,
'queueSizeLimit' : 3,
'scriptData': {'session_name': '<?php echo session_id(); ?>'},
'checkScript' : 'ajaxfiles/check.php',
'onSelect' : function(event,ID,fileObj) {
$('#dialog').dialog('open');
var price=$('#templateprice').val();
var txt="You are now uploading 1 image at a price of $ "+price+" pr. image ";
$('#test_para').text(txt);
},
'onError' : function (event,ID,fileObj,errorObj) {
alert(errorObj.type + ' Error: ' + errorObj.info);
},
'onProgress' : function(event,ID,fileObj,data) {
var bytes = Math.round(data.bytesLoaded / 1024);
$('#' + $(event.target).attr('id') + ID).find('.percentage').text(' - ' + bytes + 'KB Uploaded');
return false;
},
'onAllComplete' : function(){ alert("Thank you. File uploaded successfully."); }
});
});
// ]]>
Uploadify uses http or https to upload files to a PHP script.
If you have both ports 80 and 22 open, the issue must lie elsewhere.
I suggest you investigate file permissions on the server
Make sure the permissions of your upload folder are correct. If you’re unsure or what permissions to set them to, use 755.
http://www.uploadify.com/documentation/uploadify/making-uploadify-secure/
Related
It was all good and working when i was testing my code on local server.
But always when i test the same code on live server it gives errors.
Actually, I am working with Filepond using Laravel and creating a website.
This is Edit Blade Js
<pre>
<script>
// Register the plugin with FilePond
FilePond.registerPlugin(
FilePondPluginMediaPreview,
FilePondPluginImagePreview,
FilePondPluginFileValidateType,
FilePondPluginFileValidateSize,
FilePondPluginFilePoster
);
const inputElement1 = document.querySelector('input[id="card_image_id"]');
const inputElement2 = document.querySelector('input[id="video"]');
const workimages = document.querySelector('input[id="workimages"]');
const pond1 = FilePond.create(inputElement1, {
acceptedFileTypes: ['image/*'],
fileValidateTypeDetectType: true,
maxFileSize: 10000000, //10 mbs max size
allowFileSizeValidation: true,
onaddfilestart: (file) => {
isLoadingCheck();
},
onprocessfile: (files) => {
isLoadingCheck();
},
});
const pond2 = FilePond.create(inputElement2, {
acceptedFileTypes: ['video/*'],
fileValidateTypeDetectType: true,
maxFileSize: 35000000, //35 mbs max size
allowFileSizeValidation: true,
onaddfilestart: (file) => {
isLoadingCheck();
},
onprocessfile: (files) => {
isLoadingCheck();
},
});
const pond3 = FilePond.create(workimages, {
acceptedFileTypes: ['image/*'],
fileValidateTypeDetectType: true,
maxFileSize: 10000000, //10 mbs max size
allowFileSizeValidation: true,
onaddfilestart: (file) => {
isLoadingCheck();
},
onprocessfile: (files) => {
isLoadingCheck();
},
});
FilePond.setOptions({
server: {
process: '/tempupload',
revert: '/tempdelete/{{ $fileid }}',
// fetch: '/tempfetch',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}',
'work_id': '{{ $work->id }}'
},
},
});
</script>
</pre>
This is web routes
<pre>
Route::delete('tempdelete', [WorkController::class, 'tempdelete'])->name('tempdelete');
</pre>
This is controller
<pre>
public function tempdelete()
{
$this->WorkService->tempdelete();
return response()->json(null, 204);
}
</pre>
This is Service
<pre>
public function tempdelete()
{
$work_id = (request()->header('work-id'));
$temporaryfile = TemporaryFile::where('fid', request()->getContent())->first();
if ($temporaryfile) {
$filesexist_in_workimages = Workimage::where([
'size' => $temporaryfile->size,
'name' => $temporaryfile->filename,
'work_id' => $work_id,
])->first();
if (isset($filesexist_in_workimages)) {
if (File::exists($filesexist_in_workimages->folder)) {
File::delete($filesexist_in_workimages->folder);
}
$filesexist_in_workimages->delete();
}
if (isset($temporaryfile->folder)) {
if (File::exists($temporaryfile->folder . $temporaryfile->filename)) {
File::delete($temporaryfile->folder . $temporaryfile->filename);
}
}
$temporaryfile->delete();
}
}
</pre>
The point is that this code works perfectly for deleting a file on local server but shows this error on live server
On Console:
<pre>
DELETE http://brokenclient1.000webhostapp.com/tempdelete net::ERR_EMPTY_RESPONSE
</pre>
On Network:
Failed to load responce, No data found for source with given identifier
When i try to dd on controller or service it does not even works to show dd.
This problem is not connected with FilePond. Are you using Postman or Insomnia to check your API and connection? Check your server settings. Try this solution provided in this link
Laravel Project ERR_EMPTY_RESPONSE
This is typical server error response or sometimes Internet Service Provider error.
Hi I use in my project bootgrid I did custom lenght dropdown, evrithing is working apart the table pagination Is there a whay this to be fixed? Here is my code:
var $table = $("#data-table");
$table.bootgrid({
ajax: true,
url : 'myfancyurl',
columnSelection : false,
templates: {
//header: "" //Removes default bootgrid header
},
css : {
icon: 'md icon',
iconColumns: 'md-view-module',
iconDown: 'md-expand-more',
iconRefresh: 'md-refresh',
iconUp: 'md-expand-less'
},
labels :{
all:'',
loading:''
},
requestHandler: function (request) {
request.searchPhrase = $("#search-phrase").val();
request.rowCount = parseInt($('#row-count li.active').text());
return request;
}
}
});
$('#row-count li').on('click', function(e){
$('#row-count li').removeClass('active');
$(this).addClass('active');
$('.row-count').text( $(this).text() );
$table.bootgrid("reload");
});
So when I change lenght on backend side works fine, but the bootgrid doesn't recalc pagination when I pass the rowCount from request. Thanks in advance if someone can help.
I don't understand your question correctly.
You can add custom rowCount using the rowCount property
var $table = $("#data-table");
$table.bootgrid({
ajax: true,
url : 'myfancyurl',
columnSelection : false,
**rowCount: [10, 25, 33, 50, 66, 100],**
templates: {
//header: "" //Removes default bootgrid header
},...
and then in the backend you can use the request param
rowCount= request.args.get('rowCount', 33)
I am using the dropzone js plugin to upload files to a php server. It is working great. I am facilitating the user to update the uploaded files. So once the user clicks on update button, the dropzone appears, and I am able to display the uploaded files in it through a JQuery-AJAX call. But my problem is that though the files are displayed in the thumbnail format, the number of files in the dropzone counts to zero. I feel that the accept function is not being triggered.But if a new file is added to the displaying list the file count is 1 though there are files already existing in it.
I am using the following code to display the files in dropzone:
var mockFile = { name: "Filename", size: 12345 };
myDropzone.options.addedfile.call(myDropzone, mockFile);
myDropzone.options.thumbnail.call(myDropzone, mockFile, "/image/url");
Can anyone help me solve this?
I think you need to push the mockFile in the dropZone manually like this
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("complete", mockFile);
myDropzone.files.push(mockFile);
It's work for me... if you need more code just ask!
Mock file is not uploaded as explained here https://github.com/enyo/dropzone/issues/418
If you want to submit the form use myDropzone.uploadFiles([]); in init()
$('input[type="submit"]').on("click", function (e) {
e.preventDefault();
e.stopPropagation();
var form = $(this).closest('#dropzone-form');
if (form.valid() == true) { //trigger ASP.NET MVC validation
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
myDropzone.uploadFiles([]);
}
}
});
example for U!
jQuery(function($) {
//文件上传
$(".dropzone").dropzone({
url : "pic_upload.jsp?id=<%=request.getParameter("id")%>",
addRemoveLinks : true,
dictRemoveLinks : "x",
dictCancelUpload : "x",
maxFiles : 5,
maxFilesize : 5,
acceptedFiles: "image/*",
init : function() {
//上传成功处理函数
this.on("success", function(file) {
alert("修改前:"+file.name);
});
this.on("removedfile", function(file) {
alert("File " + file.name + "removed");
//ajax删除数据库的文件信息
$.ajax({
type:'post',
url:'pic_delete.jsp?id='+file.name ,
cache:false,
success:function(data){
}
});
});
<%
if(null!=list){
for(PlaceImg img:list){%>
//add already store files on server
var mockFile = { name: "<%=img.getId()%>", size: <%=img.getFilesize()%> };
// Call the default addedfile event handler
this.emit("addedfile", mockFile);
// And optionally show the thumbnail of the file:
this.emit("thumbnail", mockFile, "<%=img.getImgUrl()%>");
<%}
}%>
}
});
Im using a jquery script to add new file upload fields to my form dynamically, as a result, all my file fields look like so
<input class="file-input-area" name="mpfile[]" type="file" size="32" value="" />
So in other words, if i click the 'add more file upload' link 5 times, i get 5 file upload fields that look exactly as the one above.
Iam quite new to codeigniter and have done some research which tells me that if uploading multiple files, i should use the [] after the field name ... i hope this is right.
My problem now is figuring the process to upload the files, and store their names to a database table.
I have tried normal PHP uploading but it doesnt seem to be working, im not sure what to put in my view, controller and model.
If someone can give me an example of how they would go about it, it would help me so much.
Cheers,
Use jQuery uploadify. The files are uploaded asynchronously, see some demos here.
Here's an implementation:
jQuery('#images').uploadify({
'uploader' : '/uploadify/uploadify.swf',
'script' : '/uploadify/uploadify.php',
'cancelImg' : '/uploadify/cancel.png',
'folder' : '/data/images',
'auto' : true,
'fileExt' : '*.jpg;*.gif;*.png;*.jpeg;*.tif',
'fileDesc' : 'Web Image Files (.JPG, .GIF, .PNG, .JPEG, .TIF)',
'queueID' : 'images-queue',
'onCancel' : function(event,ID,fileObj,data) {
jQuery.ajax({
type: "POST",
url: "uploadify/delete_image.php",
data: "filepath=/data/images/" + jQuery("#"+ID).val(),
success: function(){
jQuery("#"+ID).remove();
queueSize = data.fileCount;
jQuery('#status-message').text('Photo uploaded!');
}
});
},
'onSelect' :function (event, ID) {
if (queueSize < maxQueueSize)
queueSize++;
else{
alert("Max number of files is " + maxQueueSize);
jQuery('#images').uploadifyCancel(ID);
return false;
}
},
'onSelectOnce' : function(event,data) {
jQuery('#status-message').text('File is currently uploaded...');
},
'onComplete': function (evt, queueID, fileObj, response, data) {
jQuery('#status-message').text('H φωτογραφία φορτώθηκε!');
jQuery("#field_photos").append("<input id="+ queueID +" type='hidden' name='pics[]' value='" + response + "' />"); //adds hidden form field
},
'onAllComplete' : function(event,data) {
},
'onClearQueue' : function (a, b) {
queueSize = 0;
},
'multi' : true,
'simUploadLimit' : 3,
'removeCompleted': false,
'sizeLimit' : 1048576,
'queueSizeLimit' : 1
});
With this line:
jQuery("#field_photos").append("<input id="+ queueID +" type='hidden' name='pics[]' value='" + response + "' />"); //adds hidden form field
we store the filenames in the hidden array field "pics". When your form is submitted, you read these names using $this->input->post('pics') and store them into your database.
I'm having problems with scriptData on uploadify, I'm pretty sure the config syntax is fine but whatever I do, scriptData is not passed to the upload script.
I tested in both FF and Chrome with flash v. Shockwave Flash 9.0 r31
This is the config:
$(document).ready(function() {
$('#id_file').uploadify({
'uploader' : '/media/filebrowser/uploadify/uploadify.swf',
'script' : '/admin/filebrowser/upload_file/',
'scriptData' : {'session_key': 'e1b552afde044bdd188ad51af40cfa8e'},
'checkScript' : '/admin/filebrowser/check_file/',
'cancelImg' : '/media/filebrowser/uploadify/cancel.png',
'auto' : false,
'folder' : '',
'multi' : true,
'fileDesc' : '*.html;*.py;*.js;*.css;*.jpg;*.jpeg;*.gif;*.png;*.tif;*.tiff;*.mp3;*.mp4;*.wav;*.aiff;*.midi;*.m4p;*.mov;*.wmv;*.mpeg;*.mpg;*.avi;*.rm;*.pdf;*.doc;*.rtf;*.txt;*.xls;*.csv;',
'fileExt' : '*.html;*.py;*.js;*.css;*.jpg;*.jpeg;*.gif;*.png;*.tif;*.tiff;*.mp3;*.mp4;*.wav;*.aiff;*.midi;*.m4p;*.mov;*.wmv;*.mpeg;*.mpg;*.avi;*.rm;*.pdf;*.doc;*.rtf;*.txt;*.xls;*.csv;',
'sizeLimit' : 10485760,
'scriptAccess' : 'sameDomain',
'queueSizeLimit' : 50,
'simUploadLimit' : 1,
'width' : 300,
'height' : 30,
'hideButton' : false,
'wmode' : 'transparent',
translations : {
browseButton: 'BROWSE',
error: 'An Error occured',
completed: 'Completed',
replaceFile: 'Do you want to replace the file',
unitKb: 'KB',
unitMb: 'MB'
}
});
$('input:submit').click(function(){
$('#id_file').uploadifyUpload();
return false;
});
});
I checked that other values (file name) are passed correctly but session_key is not.
This is the decorator code from django-filebrowser, you can see it checks for
request.POST.get('session_key'), the problem is that request.POST is empty.
def flash_login_required(function):
"""
Decorator to recognize a user by its session.
Used for Flash-Uploading.
"""
def decorator(request, *args, **kwargs):
try:
engine = __import__(settings.SESSION_ENGINE, {}, {}, [''])
except:
import django.contrib.sessions.backends.db
engine = django.contrib.sessions.backends.db
print request.POST
session_data = engine.SessionStore(request.POST.get('session_key'))
user_id = session_data['_auth_user_id']
# will return 404 if the session ID does not resolve to a valid user
request.user = get_object_or_404(User, pk=user_id)
return function(request, *args, **kwargs)
return decorator
I found a solution without using scriptData. You can pass your data by passing through your URL:
$("#image_upload1").uploadify({
'method':'POST',
'buttonText':'Select',
'fileTypeDesc' : 'Image Files',
'fileTypeExts' : '*.gif; *.jpg; *.png',
'swf':'<?php echo base_url()?>resources/flash/uploadify.swf',
'uploader':'<?php echo site_url('item/update_item_images/'.$picid[0]); ?>',
'width': 40,
'multi':false,
'onUploadComplete':function(file)
{
$('.original').hide();
$('#image1').attr('style','background-image:url("../resources/uploads/<?php echo $id;?>/'+file.name+'");background-size: 140px 119px;');
$('#hidden_img_value1').attr('value',file.name)
}
});
Here I pass the value $picid[0] in uploader. This data you can access in your controller.
#Jimbo after removing inverted comma (') ,then also the value is not reciving in controller.
$("#image_upload1").uploadify({
'method':'POST',
'buttonText':'Select',
'fileTypeDesc' : 'Image Files',
'fileTypeExts' : '*.gif; *.jpg; *.png',
'swf':'<?php echo base_url()?>resources/flash/uploadify.swf',
'uploader':'<?php echo site_url('item/update_item_image1')?>',
'width': 40,
'multi':false,
'scriptData':{id:'<?=$picid[0]?>'},
'onUploadComplete':function(file)
{
//alert(response);
$('.original').hide();
$('#image1').attr('style','background-image:url("../resources/uploads/18/'+file.name+'")');
$('#hidden_img_value1').attr('value',file.name)
}
});
This might sound silly, but are you sure it's a session_key problem?
I had an authentication problem with filebrowser+uploadify but the problem was not the session_key but that the site was protected by a HTTP digest authentication set in Apache and, although session_key was sent fine, uploadify does not send the HTTP authentication headers.
Is your web server requiring any form of authentication?
I had a a similar problem passing script data in the past. Removing the inverted comma (') around the key in the key/value pairs fixed my problem
Instead of:
'scriptData' : {'session_key': 'e1b552afde044bdd188ad51af40cfa8e'},
Use:
'scriptData' : {session_key: 'e1b552afde044bdd188ad51af40cfa8e'},
(useful Uploadify post here)