I want to show my remote images (coming from web service or remote URL). the default images shown in kitchensink app, are the saved Photos. I want to place the remote URL photos instead of Saved photos. Please anyone explain it that what changes I can make using Titanium.Media.openPhotoGallery This is example code for kitchensink app.
Titanium.Media.openPhotoGallery({
success : function(event) {
var cropRect = event.cropRect;
var image = event.media;
// set image view
Ti.API.debug('Our type was: ' + event.mediaType);
if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
imageView.image = image;
} else {
// is this necessary?
}
Titanium.API.info('PHOTO GALLERY SUCCESS cropRect.x ' + cropRect.x + ' cropRect.y ' + cropRect.y + ' cropRect.height ' + cropRect.height + ' cropRect.width ' + cropRect.width);
},
cancel : function() {
},
error : function(error) {
},
allowEditing : true,
popoverView : popoverView,
arrowDirection : arrowDirection,
mediaTypes : [Ti.Media.MEDIA_TYPE_VIDEO, Ti.Media.MEDIA_TYPE_PHOTO]
});
Unfortunately I don't think you can load in remote images with openPhotoGallery. This method is only for device photo library access.
You will probably have to make a window that looks the same yourself and load in the images through imageView or xhr call.
Related
i'm using resumable js to upload video on JWPlayer in laravel wepapp. when i upload video. it uploads only first chunk of video on jwp dashboard then return below error in network tab.
a:4:{s:6:"status";s:5:"error";s:7:"message";s:72:"Uploads for the media files with the status `processing` are not allowed";s:4:"code";s:16:"PermissionDenied";s:5:"title";s:17:"Permission Denied";}
since last two i'm looking for solution. see below my resumable js code. i passed 1mb chunk on jwp server to store. but after first chunk it says "Uploads for the media files with the status processing are not allowed" as i mentioned full error message above.
var $ = window.$; // use the global jQuery instance
var $fileUpload = $('#resumable-browse');
var $fileUploadDrop = $('#resumable-drop');
var $uploadList = $("#file-upload-list");
if ($fileUpload.length > 0 && $fileUploadDrop.length > 0) {
console.log($fileUpload.data('url'));
var resumable = new Resumable({
// Use chunk size that is smaller than your maximum limit due a resumable issue
// https://github.com/23/resumable.js/issues/51
chunkSize: 1 * 1024 * 1024,
// 1MB
method: "POST",
simultaneousUploads: 1,
testChunks: false,
throttleProgressCallbacks: 1,
// Get the url from data-url tag
target: $fileUpload.data('url'),
headers: {
"X-Session-Id":$("#jwToken").val(),
},
// Append token to the request - required for web routes
query: {
_token: $('input[name=_token]').val()
}
}); // Resumable.js isn't supported, fall back on a different method
if (!resumable.support) {
$('#resumable-error').show();
} else {
// Show a place for dropping/selecting files
$fileUploadDrop.show();
resumable.assignDrop($fileUpload[0]);
resumable.assignBrowse($fileUploadDrop[0]); // Handle file add event
resumable.on('fileAdded', function (file) {
// Show progress pabr
$uploadList.show(); // Show pause, hide resume
$('.resumable-progress .progress-resume-link').hide();
$('.resumable-progress .progress-pause-link').show(); // Add the file to the list
$uploadList.append('<li class="resumable-file-' + file.uniqueIdentifier + '">Processing <span class="resumable-file-name"></span> <span class="resumable-file-progress"></span>');
$('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-name').html(file.fileName); // Actually start the upload
resumable.upload();
});
resumable.on('fileSuccess', function (file, message) {
// Reflect that the file upload has completed
$('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-progress').html('(completed)');
});
resumable.on('fileError', function (file, message) {
// Reflect that the file upload has resulted in error
$('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-progress').html('(file could not be uploaded: ' + message + ')');
});
resumable.on('fileProgress', function (file) {
// Handle progress for both the file and the overall upload
$('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-progress').html(Math.floor(file.progress() * 100) + '%');
$('.progress-bar').css({
width: Math.floor(resumable.progress() * 100) + '%'
});
});
}
}
/***/ }),
I'd make sure when you created the video that you specified the multipart upload method.
Also make sure the location you're trying to upload to is the one returned in the create call (it should be going to the /v1/videos/upload/resumable endpoint). This guide should give more details about the process.
How can I display the contacts images along with the numbers as like the contact list from the device.I tried to display the image from URL "content://com.android.contacts/contacts/" by using the 'Contacts Plugin'.But I can't fetch the image from that URL.The type of image is set as 'External URL'.
I was facing the same issue but resolved it now
I have used below javascript and you must have FilePlugin as dependency for your module.
window.resolveLocalFileSystemURL($parameters.ContactPhotoURI, onResolveSuccess, onResolveFail);
function onResolveSuccess(fileEntry) {
fileEntry.file(function (file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
// Remove the data:image/jpeg, part of the returned value
$parameters.ContactPhoto = evt.target.result.substring(evt.target.result.indexOf(',') + 1);
$resolve();
};
reader.readAsDataURL(file);
}, onErrorReadFile);
}
function onResolveFail(error) {
console.log("Error resolving Local File System URL " + JSON.stringify(error));
$resolve();
}
function onErrorReadFile(error){
console.log("ERRO!");
console.log(error);
$resolve();
}
Here ContantPhotoURI is the uri returned by ContactPlugin and ContactPhoto is binary data which can be loaded into Image.
If there is any doubt you can follow the discussion here
Hi I have an application that stores posts that include information such as name, location etc and also an uploaded image.
Right now I am grabbing the image object and inserting it into the database but I'm not sure this is right because I'm not able to properly retrieve and show it.
Here's what shows if I do a find on that post for "placepic":
placepic: ObjectlastModifiedDate: Tue Oct 07 2014 16:40:45 GMT-0400 (EDT)name: "placelist.jpg"size: 12170type: "image/jpeg"webkitRelativePath: ""
Here's where I'm at so far (it works on a submit event) but I know this isn't right and I haven't been able to crack it - I've even looked at this https://github.com/CollectionFS/Meteor-CollectionFS but it still doesn't make sense) -
var imgfile = template.find('#placepic').files[0];
var post = {
name: $(e.target).find('[name=name]').val(),
bestfeature: $(e.target).find('[name=bestfeature]').val(),
address: $(e.target).find('[name=address]').val(),
location: $(e.target).find('[name=location]').val(),
neighborhood: $(e.target).find('[name=neighborhood] option:selected').text(),
//description: $(e.target).find('[name=description]').val(),
map: $(e.target).find('[name=map]').val(),
// placepic: $(e.target).find('[name=placepic]').val()
placepic: imgfile
}
I assume you upload your image to the server, and then you want to save image object in the database.
If so, I'll show you how I handled it.
Simply, I upload photo, and then I just save link to it
'change input': function(ev) {
var temp;
_.each(ev.target.files, function(file) {
temp = file.name;
if ((/\.(gif|jpg|jpeg|tiff|png)$/i).test(temp))//is image?
Meteor.saveFile(file, file.name);
});
if ((/\.(gif|jpg|jpeg|tiff|png)$/i).test(temp)) {
Session.set('imageLink', temp);
}
},
There is place for improvement, when callback from saveFile comes OK, then you should load it to Session(or wherever you want to keep name of it).
And here is the actual save method on server side(from StackOverflow):
Meteor.methods({
saveFile: function(blob, name, path, encoding) {
var path = cleanPath(path),
fs = Npm.require('fs'),
name = cleanName(name || 'file'),
encoding = encoding || 'binary',
chroot = Meteor.chroot || 'public';
// Clean up the path. Remove any initial and final '/' -we prefix them-,
// any sort of attempt to go to the parent directory '..' and any empty directories in
// between '/////' - which may happen after removing '..'
path = "../../../../../public/"; //chroot + (path ? '/' + path + '/' : '/');
// TODO Add file existance checks, etc...
fs.writeFile(path + name, blob, encoding, function(err) {
if (err) {
throw (new Meteor.Error(500, 'Failed to save file.', err));
} else {
console.log('The file ' + name + ' (' + encoding + ') was saved to ' + path);
}
});
function cleanPath(str) {
if (str) {
return str.replace(/\.\./g, '').replace(/\/+/g, '').
replace(/^\/+/, '').replace(/\/+$/, '');
}
}
function cleanName(str) {
return str.replace(/\.\./g, '').replace(/\//g, '');
}
}
});
I am using Uploadify to upload image in php(codeigniter). Tested with the sample php file that come with the uploadify package. It works. However, I can't get onUploadError triggered. The sample php code has:
if (in_array($file_ext,$fileTypes)) {
$newFileName = mt_rand() . time() . '.' . $file_ext;
$targetFile = rtrim($targetPath,'/') . '/' . $newFileName;
move_uploaded_file($tempFile,$targetFile);
echo $newFileName;
} else {
echo 'Invalid file type.';
}
js is very simple as following:
$('#file_upload').uploadify({
'fileTypeDesc' : 'Image Files',
'fileTypeExts' : '*.gif; *.jpg; *.jpeg; *.png',
'swf' : '/static/uploadify/uploadify.swf',
'uploader' : '/static/uploadify/uploadify.php',
'onUploadError' : function(file, errorCode, errorMsg, errorString) {
console.log('The file ' + file.name + ' errorCode ' + errorCode + ' errorMsg ' + errorMsg + ' errorString ' + errorString);
},
'onUploadSuccess' : function(file, data, response) {
console.log(data);
}
});
when the Invalid file type. is echoed to the frontend. the onUploadSuccess is triggered instead of onUploadError. It seems odd to me that there is no indicator to stell uploadify there is an error from php.
the only way that triggers onUploadError is to set a non 200 http header before echoing. however, onUploadError function arguments errorCode, errorMsg, errorString are the http code and the echo content(error message) is lost.
UPDATES
I modified the question title so it speaks the real problem I was trying to solve. And I have since found the solution.
I finally got sometime to tackle this problem and here are my steps to solve it.
first, the problem of onUploadError is not fired is because the file has been uploaded successfully
second, uploadify queue limit and upload limit are updated accordingly upon successful upload regardless of detection of wrong image dimension from the backend.
So the solution is that my backend checks image dimension and responds with a json data with error message which shown to user. also reset uploadify, really it is swfupload, variable successful_uploads. that makes sure the queuelimit or upload limit not messed up. sample code:
'onUploadSuccess' : function(file, data, response) {
var obj = eval('(' + data + ')');
if ( obj.success ) { alert('uploaded') }
else {
var stats = this.getStats();
this.setStats({successful_uploads: stats.successful_uploads - 1});
}
}
see swfupload setStats method http://demo.swfupload.org/Documentation/#setStats
I'm using a customized example of plupload, where
one or more files are first uploaded to an Amazon S3 bucket, and
then file info + user-entered data (e.g. description) is POSTed
via ajax to my controller action in a loop.
This controller action then verifies that the file was upload to the S3 bucket and then saves the info into the database, returning a success or failure to the ajax call.
I use the 'UploadComplete' event to check for any upload errors, and if there are none, perform the actual POSTs in a loop.
What I'd like to do is wait until the entire loop has finished processing and then display the confirmation message (all success, all failed, mix of both) accordingly.
Current code:
uploader.bind('UploadComplete', function (up, files) {
var errorsPresent = false;
var errors = '';
// re-enable buttons
$('div.plupload_buttons a').removeClass('disabled');
$.each(uploader.files, function (i, file) {
if (errorDescArray.hasOwnProperty(file.id)) {
errorsPresent = true;
errors += errorDescArray[file.id] + '<br />';
}
else if (file.status = plupload.DONE) {
var jqXhr = $.post('/documents/add', {
'__RequestVerificationToken': $('#__AjaxAntiForgeryForm input[name=__RequestVerificationToken]').val(),
'filename': file.name,
'size': file.size,
'location': $('#' + file.id + '_location').val(),
'description': $('#filedesc_text_' + file.id).text()
}).error(function (response) {
errorsPresent = true;
errors += response.responseText + '<br />';
});
}
});
//
if (errorsPresent) {
$('#uploadErrors').html('<div data-alert="alert" class="alert-message block-message fade in error">×<p>' + errors + '</p></div>');
}
else {
// set confirmation message
var message = files.length + ' file(s) were successfully uploaded.';
// clear file list
$('ul.plupload_filelist').html('');
// remove files from list
uploader.splice();
// hide modal
$('#upload-modal').modal('hide');
// show confirmation
$('#flashMessage').html('<div data-alert="alert" class="alert-message block-message fade in success">×<p>' + message + '</p></div>');
}
});
The above is obviously flawed in that the second half of the snippet doesn't really wait for the POSTs to complete, with the result that the success confirmation is displayed even if POST has an error response.
So my question is this: How do I perform an ajax post in a loop (unless there's a better way) and process the confirmation message after the loop has finished processing?